Fix secondary button

centrifuge · Sep 26, 2024 · 46d40cd · 46d40cd
1 parent 358530f
commit 46d40cd
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 20 deletions.
diff --git a/fabric/src/components/Button/VisualButton.tsx b/fabric/src/components/Button/VisualButton.tsx
@@ -89,9 +89,27 @@ export const StyledButton = styled.span<StyledProps>(
     const borderDisabled = `borderButton${variantToken}Disabled`
     const shadow = `button${variantToken}`
 
+    const backgroundHover = () => {
+      if (isTertiaryIcon) return undefined
+      if ($variant === 'wallet') return 'backgroundInverted'
+      else return bgHover
+    }
+
+    const backgroundActive = () => {
+      if (isTertiaryIcon) return undefined
+      if ($variant === 'wallet') return 'backgroundInverted'
+      else return bgPressed
+    }
+
+    const backgroundFocus = () => {
+      if (isTertiaryIcon) return undefined
+      if ($variant === 'wallet') return 'backgroundInverted'
+      else return bgFocus
+    }
+
     return css({
       color: $disabled ? fgDisabled : $active ? fgHover : fg,
-      backgroundColor: $disabled ? bgDisabled : $active ? bgHover : bg,
+      backgroundColor: $disabled ? bgDisabled : $active && $variant !== 'wallet' ? bgHover : bg,
       borderColor: $disabled ? borderDisabled : $active ? borderHover : border,
       borderWidth: 1,
       borderRadius: 'button',
@@ -100,20 +118,20 @@ export const StyledButton = styled.span<StyledProps>(
       boxShadow: variant !== 'tertiary' && !$disabled ? shadow : 'none',
 
       '&:hover': {
-        color: fgHover,
-        backgroundColor: isTertiaryIcon ? undefined : bgHover,
-        borderColor: isTertiaryIcon ? undefined : borderHover,
+        color: $variant !== 'wallet' ? fgHover : fg,
+        backgroundColor: backgroundHover(),
+        borderColor: isTertiaryIcon || $variant === 'wallet' ? undefined : borderHover,
       },
       '&:active': {
-        color: fgPressed,
-        backgroundColor: isTertiaryIcon ? undefined : bgPressed,
-        borderColor: isTertiaryIcon ? undefined : borderPressed,
+        color: $variant !== 'wallet' ? fgPressed : fg,
+        backgroundColor: backgroundActive(),
+        borderColor: isTertiaryIcon || $variant === 'wallet' ? undefined : borderPressed,
       },
 
       'a:focus-visible &, button:focus-visible &': {
-        color: fgFocus,
-        backgroundColor: isTertiaryIcon ? undefined : bgFocus,
-        borderColor: borderFocus,
+        color: $variant !== 'wallet' ? fgFocus : fg,
+        backgroundColor: backgroundFocus(),
+        borderColor: $variant === 'wallet' ? border : borderFocus,
       },
 
       '& > :last-child': {

diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
@@ -30,6 +30,14 @@ const StyledButton = styled.button`
   outline: 0;
   border-radius: 40px;
   white-space: nowrap;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary};
+    outline: none;
+    box-shadow: none;
+  }
 `
 
 const IdenticonWrapper = styled(Flex)({

diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
@@ -1,4 +1,4 @@
-import { black, blackScale, blueScale, gold, grayScale, yellowScale } from './colors'
+import { black, blueScale, gold, grayScale, yellowScale } from './colors'
 
 const statusDefault = grayScale[800]
 const statusInfo = blueScale[500]
@@ -65,19 +65,19 @@ const colors = {
   shadowButtonPrimary: 'transparent',
 
   backgroundButtonSecondary: black,
-  backgroundButtonSecondaryFocus: blackScale[500],
-  backgroundButtonSecondaryHover: blackScale[500],
-  backgroundButtonSecondaryPressed: blackScale[500],
+  backgroundButtonSecondaryFocus: 'white',
+  backgroundButtonSecondaryHover: 'white',
+  backgroundButtonSecondaryPressed: 'white',
   backgroundButtonSecondaryDisabled: grayScale[300],
   textButtonSecondary: 'white',
-  textButtonSecondaryFocus: gold,
-  textButtonSecondaryHover: gold,
-  textButtonSecondaryPressed: gold,
+  textButtonSecondaryFocus: black,
+  textButtonSecondaryHover: black,
+  textButtonSecondaryPressed: black,
   textButtonSecondaryDisabled: grayScale[500],
   borderButtonSecondary: grayScale[300],
-  borderButtonSecondaryFocus: gold,
-  borderButtonSecondaryHover: gold,
-  borderButtonSecondaryPressed: gold,
+  borderButtonSecondaryFocus: black,
+  borderButtonSecondaryHover: black,
+  borderButtonSecondaryPressed: black,
   borderButtonSecondaryDisabled: 'transparent',
   shadowButtonSecondary: 'transparent',