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 }>`
padding: 0px 16px;
border-radius: 12px;
background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundInteractive)};
background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)};
border: none;
color: ${({ theme, active }) => (active ? theme.white : theme.textPrimary)};
color: ${({ theme, active }) => (active ? theme.accentActive : theme.textPrimary)};
font-size: 16px;
font-weight: 600;
cursor: pointer;
@ -38,7 +38,11 @@ export default function FavoriteButton() {
return (
<StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
<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>
<Trans>Favorites</Trans>
</FavoriteText>

@ -63,7 +63,7 @@ const MenuTimeFlyout = styled.span`
const StyledMenuButton = styled.button<{ open: boolean }>`
width: 100%;
height: 100%;
color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
border: none;
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
margin: 0;
@ -115,7 +115,7 @@ const StyledMenuContent = styled.div`
const Chevron = styled.span<{ open: boolean }>`
padding-top: 1px;
color: ${({ open, theme }) => (open ? theme.blue200 : theme.textSecondary)};
color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
`
const NetworkLabel = styled.div`
display: flex;

@ -81,7 +81,7 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
width: 100%;
height: 100%;
border: none;
color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
margin: 0;
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
padding: 6px 12px 6px 12px;
@ -131,7 +131,7 @@ const StyledMenuContent = styled.div`
const Chevron = styled.span<{ open: boolean }>`
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

@ -131,7 +131,6 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
chain_421611: colorsDark.chain_421611,
chain_80001: colorsDark.chain_80001,
blue200: ColorsPalette.blue200,
shallowShadow: darkMode ? colorsDark.shallowShadow : colorsLight.shallowShadow,
deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow,
hoverState: opacify(24, ColorsPalette.blue200),

@ -53,7 +53,6 @@ export interface ThemeColors {
chain_421611: Color
chain_80001: Color
blue200: Color
shallowShadow: Color
deepShadow: Color
hoverState: Color