feat(suite): add subtle variant to rewards button

Author: izmy

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({

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,6 +19,7 @@ export const FractionButton = ({
     children,
     tooltip,
     isDisabled,
+    isSubtle,
     variant,
     onClick,
 }: FractionButtonProps) => (
@@ -27,6 +29,7 @@ export const FractionButton = ({
             type="button"
             size="tiny"
             isDisabled={isDisabled}
+            isSubtle={isSubtle}
             onClick={onClick}
         >
             {children}

packages/suite/src/components/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),
                     },
                 ]}

packages/suite/src/support/messages.ts

@@ -8891,6 +8891,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',