[C-4836] Adjust FilterButton active states (#9289)

AudiusProject · Jul 29, 2024 · 7d41d87 · 7d41d87
1 parent d4fd3dc
commit 7d41d87
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/.changeset/green-deers-pretend.md b/.changeset/green-deers-pretend.md
@@ -0,0 +1,5 @@
+---
+'@audius/harmony': patch
+---
+
+Fix active and hover styling for FilterButton
diff --git a/packages/harmony/src/components/button/FilterButton/FilterButton.tsx b/packages/harmony/src/components/button/FilterButton/FilterButton.tsx
@@ -69,21 +69,18 @@ export const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(
       background: color.secondary.s400,
       border: `1px solid ${color.secondary.s400}`,
       '&:hover': {
-        border: `1px solid ${color.secondary.s400}`,
-        transform: 'none'
+        border: `1px solid ${color.secondary.s400}`
       }
     }
 
-    const activeStyle =
-      variant !== 'fillContainer' || value === null
-        ? {
-            border: `1px solid ${color.border.strong}`,
-            background: color.background.surface2
-          }
-        : {}
-
     const hoverStyle = {
-      border: `1px solid ${color.neutral.n800}`,
+      background: color.background.surface1
+    }
+
+    const activeStyle = {
+      background: color.background.surface2
+    }
+    const disabledTransform = {
       transform: 'none'
     }
 
@@ -102,12 +99,17 @@ export const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(
       lineHeight: typography.lineHeight.s,
       opacity: disabled ? 0.6 : 1,
 
-      '&:hover': hoverStyle,
-      '&:focus': hoverStyle,
-
+      '&:hover': {
+        ...disabledTransform,
+        ...(value === null ? hoverStyle : {})
+      },
+      '&:focus': {
+        ...disabledTransform,
+        ...(value === null ? activeStyle : {})
+      },
       '&:active': {
-        ...activeStyle,
-        transform: 'none'
+        ...disabledTransform,
+        ...(value === null ? activeStyle : {})
       },
 
       ...(size === 'small' ? smallStyles : defaultStyles),