ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix various selected states on Explore filters and update theme colors (#4433)

Browse Source 
* fixed

* update more
This commit is contained in:
Kaylee George 2022-08-22 10:51:59 -07:00 committed by GitHub
parent e12c00e980
commit d42ed88845
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Tokens/TokenTable/FavoriteButton.tsx
View File

@ -16,7 +16,7 @@ const StyledFavoriteButton = styled.button<{ active: boolean }>`
border-radius: 12px;
background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundInteractive)};
border: none;
color: ${({ theme }) => theme.textPrimary};
color: ${({ theme, active }) => (active ? theme.white : theme.textPrimary)};
font-size: 16px;
font-weight: 600;
cursor: pointer;
@ -37,7 +37,7 @@ export default function FavoriteButton() {
return (
<StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
<FavoriteButtonContent>
<Heart size={17} color={theme.textPrimary} fill="transparent" />
<Heart size={17} color={showFavorites ? theme.white : theme.textPrimary} fill="transparent" />
<FavoriteText>Favorites</FavoriteText>
</FavoriteButtonContent>
</StyledFavoriteButton>

9
src/components/Tokens/TokenTable/NetworkFilter.tsx
View File

@ -65,7 +65,7 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
height: 100%;
color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
border: none;
background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundInteractive)};
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
margin: 0;
padding: 6px 12px 6px 12px;
border-radius: 12px;
@ -76,10 +76,13 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
:hover {
cursor: pointer;
outline: none;
background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundModule)};
border: none;
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundModule)};
}
:focus {
background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundInteractive)};
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
border: none;
outline: none;
}
svg {
margin-top: 2px;

9
src/components/Tokens/TokenTable/TimeSelector.tsx
View File

@ -83,7 +83,7 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
border: none;
color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
margin: 0;
background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundInteractive)};
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
padding: 6px 12px 6px 12px;
border-radius: 12px;
font-size: 16px;
@ -92,11 +92,14 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
:hover {
cursor: pointer;
border: none;
outline: none;
background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundModule)};
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundModule)};
}
:focus {
background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundInteractive)};
background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
border: none;
outline: none;
}
svg {
margin-top: 2px;

34
src/theme/colors.ts
View File

@ -232,8 +232,8 @@ export const colorsLight: Palette = {
backgroundBackdrop: colors.white,
backgroundSurface: colors.white,
backgroundModule: colors.gray50,
backgroundInteractive: opacify(6, colors.gray700),
backgroundFloating: opacify(8, colors.white),
backgroundInteractive: colors.gray100,
backgroundFloating: opacify(8, colors.gray700),
backgroundOutline: opacify(24, colors.gray500),
backgroundScrim: opacify(60, colors.gray900),
@ -248,18 +248,18 @@ export const colorsLight: Palette = {
accentFailure: colors.red400,
accentCritical: colors.red400,
accentActionSoft: opacify(12, colors.pink400),
accentActiveSoft: opacify(12, colors.blue400),
accentSuccessSoft: opacify(12, colors.green400),
accentWarningSoft: opacify(12, colors.gold200),
accentFailureSoft: opacify(12, colors.red400),
accentActionSoft: opacify(24, colors.pink400),
accentActiveSoft: opacify(24, colors.blue400),
accentSuccessSoft: opacify(24, colors.green400),
accentWarningSoft: opacify(24, colors.gold200),
accentFailureSoft: opacify(24, colors.red400),
accentTextDarkPrimary: opacify(80, colors.black),
accentTextDarkSecondary: opacify(60, colors.black),
accentTextDarkTertiary: opacify(24, colors.black),
accentTextDarkPrimary: opacify(80, colors.gray900),
accentTextDarkSecondary: opacify(60, colors.gray900),
accentTextDarkTertiary: opacify(24, colors.gray900),
accentTextLightPrimary: colors.white,
accentTextLightSecondary: opacify(60, colors.white),
accentTextLightSecondary: opacify(72, colors.white),
accentTextLightTertiary: opacify(12, colors.white),
white: colors.white,
@ -293,25 +293,25 @@ export const colorsDark: Palette = {
backgroundSurface: colors.gray900,
backgroundModule: opacify(8, colors.gray300),
backgroundInteractive: colors.gray700,
backgroundFloating: opacify(8, colors.gray700),
backgroundFloating: opacify(12, colors.black),
backgroundOutline: opacify(24, colors.gray300),
backgroundScrim: opacify(72, colors.gray900),
textPrimary: colors.white,
textSecondary: colors.gray300,
textTertiary: colors.gray400,
textTertiary: colors.gray500,
accentAction: colors.blue400,
accentActive: colors.blue400,
accentSuccess: colors.greenVibrant,
accentSuccess: colors.green200,
accentWarning: colors.gold200,
accentFailure: colors.red400,
accentCritical: colors.red300,
accentActionSoft: opacify(24, colors.blue400),
accentActiveSoft: opacify(12, colors.blue400),
accentSuccessSoft: opacify(12, colors.green400),
accentWarningSoft: opacify(12, colors.gold200),
accentActiveSoft: opacify(24, colors.blue400),
accentSuccessSoft: opacify(24, colors.green400),
accentWarningSoft: opacify(24, colors.gold200),
accentFailureSoft: opacify(12, colors.red400),
accentTextDarkPrimary: opacify(80, colors.black),