diff --git a/src/components/AccountDrawer/AuthenticatedHeader.tsx b/src/components/AccountDrawer/AuthenticatedHeader.tsx index 39b93c42bf..79edfd363c 100644 --- a/src/components/AccountDrawer/AuthenticatedHeader.tsx +++ b/src/components/AccountDrawer/AuthenticatedHeader.tsx @@ -117,7 +117,7 @@ const AccountNamesWrapper = styled.div` width: 100%; flex-direction: column; justify-content: center; - gap: 2px; + margin-left: 8px; ` const StyledInfoIcon = styled(Info)` diff --git a/src/components/Tokens/TokenDetails/BalanceSummary.tsx b/src/components/Tokens/TokenDetails/BalanceSummary.tsx index cccb82bc62..8c33a8cf9b 100644 --- a/src/components/Tokens/TokenDetails/BalanceSummary.tsx +++ b/src/components/Tokens/TokenDetails/BalanceSummary.tsx @@ -11,13 +11,11 @@ import { ThemedText } from 'theme' import { NumberType, useFormatter } from 'utils/formatNumbers' const BalancesCard = styled.div` - background-color: ${({ theme }) => theme.surface1}; - border: ${({ theme }) => `1px solid ${theme.surface3}`}; border-radius: 16px; color: ${({ theme }) => theme.neutral1}; display: none; height: fit-content; - padding: 20px; + padding: 16px; width: 100%; // 768 hardcoded to match NFT-redesign navbar breakpoints @@ -35,7 +33,7 @@ const BalanceRow = styled.div` align-items: center; display: flex; flex-direction: row; - margin-top: 20px; + margin-top: 12px; ` const BalanceItem = styled.div` display: flex; diff --git a/src/components/Tokens/TokenTable/FilterOption.tsx b/src/components/Tokens/TokenTable/FilterOption.tsx index b817d0841d..e085fb8383 100644 --- a/src/components/Tokens/TokenTable/FilterOption.tsx +++ b/src/components/Tokens/TokenTable/FilterOption.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components' const FilterOption = styled.button<{ active: boolean; highlight?: boolean }>` height: 100%; - color: ${({ theme, active }) => (active ? theme.accent1 : theme.neutral1)}; - background-color: ${({ theme, active }) => (active ? theme.accent2 : theme.surface3)}; + color: ${({ theme, active }) => (active ? theme.neutral1 : theme.neutral1)}; + background-color: ${({ theme, active }) => (active ? theme.surface1 : theme.surface1)}; margin: 0; padding: 6px 6px 6px 14px; border-radius: 12px; @@ -19,7 +19,7 @@ const FilterOption = styled.button<{ active: boolean; highlight?: boolean }>` opacity: ${({ theme, active }) => (active ? theme.opacity.hover : 1)}; } :focus { - background-color: ${({ theme, active }) => (active ? theme.accent2 : theme.surface3)}; + background-color: ${({ theme, active }) => (active ? theme.surface2 : theme.surface3)}; } ` export default FilterOption diff --git a/src/components/Tokens/TokenTable/NetworkFilter.tsx b/src/components/Tokens/TokenTable/NetworkFilter.tsx index 82da6e00c7..63e2479fbd 100644 --- a/src/components/Tokens/TokenTable/NetworkFilter.tsx +++ b/src/components/Tokens/TokenTable/NetworkFilter.tsx @@ -83,7 +83,7 @@ const StyledMenuContent = styled.div` ` const Chevron = styled.span<{ open: boolean }>` padding-top: 1px; - color: ${({ open, theme }) => (open ? theme.accent1 : theme.neutral2)}; + color: ${({ open, theme }) => (open ? theme.neutral1 : theme.neutral2)}; ` const NetworkLabel = styled.div` ${EllipsisStyle} diff --git a/src/components/Tokens/TokenTable/TimeSelector.tsx b/src/components/Tokens/TokenTable/TimeSelector.tsx index 7307f54e44..33334411a6 100644 --- a/src/components/Tokens/TokenTable/TimeSelector.tsx +++ b/src/components/Tokens/TokenTable/TimeSelector.tsx @@ -97,7 +97,7 @@ const StyledMenuContent = styled.div` ` const Chevron = styled.span<{ open: boolean }>` padding-top: 1px; - color: ${({ open, theme }) => (open ? theme.accent1 : theme.neutral2)}; + color: ${({ open, theme }) => (open ? theme.neutral1 : theme.neutral2)}; ` // TODO: change this to reflect data pipeline