chore: remove theme.blue200 (#4533)
* chore: remove theme.blue200 * favorite button changes
This commit is contained in:
parent
98d4e108e6
commit
f194845b2b
@ -15,9 +15,9 @@ const FavoriteButtonContent = styled.div`
|
|||||||
const StyledFavoriteButton = styled.button<{ active: boolean }>`
|
const StyledFavoriteButton = styled.button<{ active: boolean }>`
|
||||||
padding: 0px 16px;
|
padding: 0px 16px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundInteractive)};
|
background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)};
|
||||||
border: none;
|
border: none;
|
||||||
color: ${({ theme, active }) => (active ? theme.white : theme.textPrimary)};
|
color: ${({ theme, active }) => (active ? theme.accentActive : theme.textPrimary)};
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -38,7 +38,11 @@ export default function FavoriteButton() {
|
|||||||
return (
|
return (
|
||||||
<StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
|
<StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
|
||||||
<FavoriteButtonContent>
|
<FavoriteButtonContent>
|
||||||
<Heart size={17} color={showFavorites ? theme.white : theme.textPrimary} fill="transparent" />
|
<Heart
|
||||||
|
size={17}
|
||||||
|
color={showFavorites ? theme.accentActive : theme.textPrimary}
|
||||||
|
fill={showFavorites ? theme.accentActive : 'transparent'}
|
||||||
|
/>
|
||||||
<FavoriteText>
|
<FavoriteText>
|
||||||
<Trans>Favorites</Trans>
|
<Trans>Favorites</Trans>
|
||||||
</FavoriteText>
|
</FavoriteText>
|
||||||
|
@ -63,7 +63,7 @@ const MenuTimeFlyout = styled.span`
|
|||||||
const StyledMenuButton = styled.button<{ open: boolean }>`
|
const StyledMenuButton = styled.button<{ open: boolean }>`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
|
color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
|
||||||
border: none;
|
border: none;
|
||||||
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
|
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -115,7 +115,7 @@ const StyledMenuContent = styled.div`
|
|||||||
|
|
||||||
const Chevron = styled.span<{ open: boolean }>`
|
const Chevron = styled.span<{ open: boolean }>`
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
color: ${({ open, theme }) => (open ? theme.blue200 : theme.textSecondary)};
|
color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
|
||||||
`
|
`
|
||||||
const NetworkLabel = styled.div`
|
const NetworkLabel = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -81,7 +81,7 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border: none;
|
border: none;
|
||||||
color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
|
color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
|
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
|
||||||
padding: 6px 12px 6px 12px;
|
padding: 6px 12px 6px 12px;
|
||||||
@ -131,7 +131,7 @@ const StyledMenuContent = styled.div`
|
|||||||
|
|
||||||
const Chevron = styled.span<{ open: boolean }>`
|
const Chevron = styled.span<{ open: boolean }>`
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
color: ${({ open, theme }) => (open ? theme.blue200 : theme.textSecondary)};
|
color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
|
||||||
`
|
`
|
||||||
|
|
||||||
// TODO: change this to reflect data pipeline
|
// TODO: change this to reflect data pipeline
|
||||||
|
@ -131,7 +131,6 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
|
|||||||
chain_421611: colorsDark.chain_421611,
|
chain_421611: colorsDark.chain_421611,
|
||||||
chain_80001: colorsDark.chain_80001,
|
chain_80001: colorsDark.chain_80001,
|
||||||
|
|
||||||
blue200: ColorsPalette.blue200,
|
|
||||||
shallowShadow: darkMode ? colorsDark.shallowShadow : colorsLight.shallowShadow,
|
shallowShadow: darkMode ? colorsDark.shallowShadow : colorsLight.shallowShadow,
|
||||||
deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow,
|
deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow,
|
||||||
hoverState: opacify(24, ColorsPalette.blue200),
|
hoverState: opacify(24, ColorsPalette.blue200),
|
||||||
|
1
src/theme/styled.d.ts
vendored
1
src/theme/styled.d.ts
vendored
@ -53,7 +53,6 @@ export interface ThemeColors {
|
|||||||
chain_421611: Color
|
chain_421611: Color
|
||||||
chain_80001: Color
|
chain_80001: Color
|
||||||
|
|
||||||
blue200: Color
|
|
||||||
shallowShadow: Color
|
shallowShadow: Color
|
||||||
deepShadow: Color
|
deepShadow: Color
|
||||||
hoverState: Color
|
hoverState: Color
|
||||||
|
Loading…
Reference in New Issue
Block a user