updated tertiary buttons

Emurgo · Dec 16, 2024 · b09b3ab · b09b3ab
1 parent 145c083
commit b09b3ab
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/.../yoroi-extension/app/components/wallet/staking/dashboard-revamp/DelegatedStakePoolCard.js b/.../yoroi-extension/app/components/wallet/staking/dashboard-revamp/DelegatedStakePoolCard.js
@@ -36,7 +36,7 @@ function DelegatedStakePoolCard({ delegatedPool, undelegate, intl, poolTransitio
 
     return (
       <UndelegateButton
-        variant="text"
+        variant="tertiary"
         onClick={undelegate}
         disabled={!undelegate}
         sx={{

diff --git a/packages/yoroi-extension/app/styles/overrides/Button.js b/packages/yoroi-extension/app/styles/overrides/Button.js
@@ -2,6 +2,7 @@
 
 import { darkThemeBase } from '../themes/dark-theme-base';
 import { lightThemeBase } from '../themes/light-theme-base';
+import { opacity } from '../themes/tokens/tokens';
 
 const { palette: darkThemePalette } = darkThemeBase;
 const { palette: lightThemePalette } = lightThemeBase;
@@ -219,10 +220,10 @@ function getTertiaryStyles(variant: 'primary' | 'grayscale', themePalette: Objec
     backgroundColor: 'transparent',
     color: themePalette.text_primary_medium,
     ':hover': {
-      backgroundColor: themePalette.gray_50,
-      color: themePalette[`${variant}_600`],
-      '& .MuiButton-startIcon svg': { fill: themePalette[`${variant}_600`] },
-      '& .MuiButton-startIcon svg path': { fill: themePalette[`${variant}_600`] },
+      backgroundColor: themePalette[`${variant}_100`],
+      color: variant === 'primary' ? themePalette.text_primary_max : themePalette.text_gray_max,
+      '& .MuiButton-startIcon svg': { fill: variant === 'primary' ? themePalette.text_primary_max : themePalette.text_gray_max },
+      '& .MuiButton-startIcon svg path': { fill: variant === 'primary' ? themePalette.text_primary_max : themePalette.text_gray_max },
     },
     ':active': {
       backgroundColor: themePalette.gray_100,
@@ -235,11 +236,19 @@ function getTertiaryStyles(variant: 'primary' | 'grayscale', themePalette: Objec
       outlineColor: themePalette.sys_yellow_500,
     },
     ':disabled': {
-      color: themePalette[`${variant}_200`],
+      color: variant === 'primary' ? themePalette.text_primary_min : themePalette.text_gray_min,
       cursor: 'not-allowed',
       pointerEvents: 'unset',
-      '& .MuiButton-startIcon svg': { fill: themePalette[`${variant}_200`] },
-      '& .MuiButton-startIcon svg path': { fill: themePalette[`${variant}_200`] },
+      '& .MuiButton-startIcon svg': { fill: variant === 'primary' ? themePalette.text_primary_min : themePalette.text_gray_min },
+      '& .MuiButton-startIcon svg path': { fill: variant === 'primary' ? themePalette.text_primary_min : themePalette.text_gray_min },
+    },
+    '&.Mui-disabled': {
+      color: variant === 'primary' ? themePalette.text_primary_min : themePalette.text_gray_min,
+      cursor: 'not-allowed',
+      pointerEvents: 'unset',
+      opacity: 1,
+      '& .MuiButton-startIcon svg': { fill: variant === 'primary' ? themePalette.text_primary_min : themePalette.text_gray_min },
+      '& .MuiButton-startIcon svg path': { fill: variant === 'primary' ? themePalette.text_primary_min : themePalette.text_gray_min },
     },
     '& .MuiLoadingButton-loadingIndicator': { color: themePalette[`${variant}_600`] },
     '& .MuiButton-startIcon svg': { fill: themePalette.text_primary_medium },