From d42ed8884571cfb95bafbee5f899055cb0b55579 Mon Sep 17 00:00:00 2001 From: Kaylee George <62825936+kayleegeorge@users.noreply.github.com> Date: Mon, 22 Aug 2022 10:51:59 -0700 Subject: [PATCH] fix: fix various selected states on Explore filters and update theme colors (#4433) * fixed * update more --- .../Tokens/TokenTable/FavoriteButton.tsx | 4 +-- .../Tokens/TokenTable/NetworkFilter.tsx | 9 +++-- .../Tokens/TokenTable/TimeSelector.tsx | 9 +++-- src/theme/colors.ts | 34 +++++++++---------- 4 files changed, 31 insertions(+), 25 deletions(-) diff --git a/src/components/Tokens/TokenTable/FavoriteButton.tsx b/src/components/Tokens/TokenTable/FavoriteButton.tsx index 14fe1d1434..b7ae36a488 100644 --- a/src/components/Tokens/TokenTable/FavoriteButton.tsx +++ b/src/components/Tokens/TokenTable/FavoriteButton.tsx @@ -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 ( setShowFavorites(!showFavorites)} active={showFavorites}> - + Favorites diff --git a/src/components/Tokens/TokenTable/NetworkFilter.tsx b/src/components/Tokens/TokenTable/NetworkFilter.tsx index 2997691acc..38ed958e1f 100644 --- a/src/components/Tokens/TokenTable/NetworkFilter.tsx +++ b/src/components/Tokens/TokenTable/NetworkFilter.tsx @@ -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; diff --git a/src/components/Tokens/TokenTable/TimeSelector.tsx b/src/components/Tokens/TokenTable/TimeSelector.tsx index 837ad52636..3d9848ca0a 100644 --- a/src/components/Tokens/TokenTable/TimeSelector.tsx +++ b/src/components/Tokens/TokenTable/TimeSelector.tsx @@ -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; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 7a1cfd0d9a..743d399917 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -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),