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> = { 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 803e8137d32..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,20 +19,20 @@ export const FractionButton = ({ children, tooltip, isDisabled, + isSubtle, variant, onClick, -}: FractionButtonProps) => { - return ( - - - - ); -}; +}: FractionButtonProps) => ( + + + +); 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: , - tooltip: ( + tooltip: isRewardsDisabled ? ( + + ) : ( @@ -180,7 +184,9 @@ export const Inputs = () => { ), + 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 a2c735a9d53..19f19452a52 100644 --- 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',