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

* fixed

* update more

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

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;

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;

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),
+  backgroundInteractive: colors.gray100,
-  backgroundFloating: opacify(8, colors.white),
+  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),
+  accentActionSoft: opacify(24, colors.pink400),
-  accentActiveSoft: opacify(12, colors.blue400),
+  accentActiveSoft: opacify(24, colors.blue400),
-  accentSuccessSoft: opacify(12, colors.green400),
+  accentSuccessSoft: opacify(24, colors.green400),
-  accentWarningSoft: opacify(12, colors.gold200),
+  accentWarningSoft: opacify(24, colors.gold200),
-  accentFailureSoft: opacify(12, colors.red400),
+  accentFailureSoft: opacify(24, colors.red400),
 
-  accentTextDarkPrimary: opacify(80, colors.black),
+  accentTextDarkPrimary: opacify(80, colors.gray900),
-  accentTextDarkSecondary: opacify(60, colors.black),
+  accentTextDarkSecondary: opacify(60, colors.gray900),
-  accentTextDarkTertiary: opacify(24, colors.black),
+  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),
+  accentActiveSoft: opacify(24, colors.blue400),
-  accentSuccessSoft: opacify(12, colors.green400),
+  accentSuccessSoft: opacify(24, colors.green400),
-  accentWarningSoft: opacify(12, colors.gold200),
+  accentWarningSoft: opacify(24, colors.gold200),
   accentFailureSoft: opacify(12, colors.red400),
 
   accentTextDarkPrimary: opacify(80, colors.black),