diff --git a/.changeset/green-deers-pretend.md b/.changeset/green-deers-pretend.md new file mode 100644 index 00000000000..1bb18a1d3cc --- /dev/null +++ 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 index b98e6bc61a6..00b9808a41d 100644 --- 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( 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( 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),