chore: remove theme.blue200 (#4533)

* chore: remove theme.blue200

* favorite button changes
This commit is contained in:
Vignesh Mohankumar 2022-08-31 20:13:21 -04:00 committed by GitHub
parent 98d4e108e6
commit f194845b2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 9 deletions

@ -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),

@ -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