From 6bc3217cbab72f9d5f9b8344bb6c5d243f4bb81a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaroslav=20Hr=C3=A1ch?= <me@jaroslavhrach.cz>
Date: Tue, 14 Jan 2025 14:08:21 +0100
Subject: [PATCH] feat(suite): add subtle variant to rewards button

---
 .../components/src/components/buttons/buttonStyleUtils.ts | 5 ++++-
 .../src/components/form/FractionButton/FractionButton.tsx | 3 +++
 .../UnstakeModal/UnstakeEthForm/Inputs.tsx                | 8 +++++++-
 packages/suite/src/support/messages.ts                    | 4 ++++
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/buttons/buttonStyleUtils.ts b/packages/components/src/components/buttons/buttonStyleUtils.ts
index fb00519dad3..86f3b9dafba 100644
--- 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
index 080b7338635..fc6411975f2 100644
--- 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,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}
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Inputs.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Inputs.tsx
index e8a11475b81..c58125724c9 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Inputs.tsx
+++ b/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,7 +174,9 @@ 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">
@@ -180,7 +184,9 @@ export const Inputs = () => {
                                 </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
index a9bac956513..1b251d7da75 100644
--- a/packages/suite/src/support/messages.ts
+++ b/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',