feat(suite): add subtle variant to rewards button

(cherry picked from commit 6bc3217)
trezor · Jan 14, 2025 · 53788ba · 53788ba
1 parent 19c9ef8
commit 53788ba
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/packages/components/src/components/buttons/buttonStyleUtils.ts b/packages/components/src/components/buttons/buttonStyleUtils.ts
@@ -48,7 +48,7 @@ export const getIconColor = ({
 
     switch (variant) {
         case 'primary':
-            return theme.iconOnPrimary;
+            return isSubtle ? theme.iconPrimaryDefault : theme.iconOnPrimary;
         case 'tertiary':
             return theme.iconOnTertiary;
         case 'info':
@@ -117,8 +117,11 @@ export const useVariantStyle = (
     const variantsColors: Record<ButtonVariant, Record<string, string | Colors>> = {
         primary: {
             background: theme.backgroundPrimaryDefault,
+            backgroundSubtle: hexToRgba(theme.backgroundPrimaryDefault, SUBTLE_ALPHA),
             backgroundHover: theme.backgroundPrimaryPressed,
+            backgroundSubtleHover: hexToRgba(theme.backgroundPrimaryDefault, SUBTLE_ALPHA_HOVER),
             text: theme.textOnPrimary,
+            textSubtle: theme.textPrimaryDefault,
         },
         tertiary: {
             background: mapElevationToButtonBackground({

diff --git a/packages/components/src/components/form/FractionButton/FractionButton.tsx b/packages/components/src/components/form/FractionButton/FractionButton.tsx
@@ -9,6 +9,7 @@ export type FractionButtonProps = {
     children: React.ReactNode;
     tooltip?: React.ReactNode;
     isDisabled?: boolean;
+    isSubtle?: boolean;
     variant?: ButtonVariant;
     onClick: () => void;
 };
@@ -18,20 +19,20 @@ export const FractionButton = ({
     children,
     tooltip,
     isDisabled,
+    isSubtle,
     variant,
     onClick,
-}: FractionButtonProps) => {
-    return (
-        <Tooltip key={id} content={tooltip} cursor="pointer">
-            <Button
-                variant={variant ?? DEFAULT_VARIANT}
-                type="button"
-                size="tiny"
-                isDisabled={isDisabled}
-                onClick={onClick}
-            >
-                {children}
-            </Button>
-        </Tooltip>
-    );
-};
+}: FractionButtonProps) => (
+    <Tooltip key={id} content={tooltip} cursor="pointer">
+        <Button
+            variant={variant ?? DEFAULT_VARIANT}
+            type="button"
+            size="tiny"
+            isDisabled={isDisabled}
+            isSubtle={isSubtle}
+            onClick={onClick}
+        >
+            {children}
+        </Button>
+    </Tooltip>
+);
diff --git a/...omponents/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Inputs.tsx b/...omponents/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Inputs.tsx
@@ -44,6 +44,8 @@ export const Inputs = () => {
         restakedReward = '0',
     } = getStakingDataForNetwork(account) ?? {};
 
+    const isRewardsDisabled = restakedReward === '0';
+
     const { symbol } = account;
     const networkDisplaySymbol = getNetworkDisplaySymbol(symbol);
 
@@ -172,15 +174,19 @@ export const Inputs = () => {
                     {
                         id: 'TR_FRACTION_BUTTONS_REWARDS',
                         children: <Translation id="TR_FRACTION_BUTTONS_REWARDS" />,
-                        tooltip: (
+                        tooltip: isRewardsDisabled ? (
+                            <Translation id="TR_STAKE_NO_REWARDS" />
+                        ) : (
                             <Column alignItems="flex-end">
                                 <FormattedCryptoAmount value={restakedReward} symbol={symbol} />
                                 <Text variant="primary">
                                     <FiatValue amount={restakedReward} symbol={symbol} />
                                 </Text>
                             </Column>
                         ),
+                        isSubtle: true,
                         variant: 'primary',
+                        isDisabled: isRewardsDisabled,
                         onClick: () => onCryptoAmountChange(restakedReward),
                     },
                 ]}

diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts
@@ -8886,6 +8886,10 @@ export default defineMessages({
         id: 'TR_STAKE_ONLY_REWARDS',
         defaultMessage: 'Only rewards',
     },
+    TR_STAKE_NO_REWARDS: {
+        id: 'TR_STAKE_NO_REWARDS',
+        defaultMessage: 'No rewards available',
+    },
     TR_STAKE_UNSTAKED_AND_READY_TO_CLAIM: {
         id: 'TR_STAKE_UNSTAKED_AND_READY_TO_CLAIM',
         defaultMessage: 'Unstaked and ready to claim',