Fix StakeOverviewScene styling

Need a 4 button UI design spec before using ButtonsViewUi4. For now, just make it look right using the ButtonsViewUi4 column styling.
EdgeApp · Jan 24, 2024 · aecb408 · aecb408
1 parent 77f6105
commit aecb408
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 35 deletions.
diff --git a/src/components/scenes/Staking/StakeOverviewScene.tsx b/src/components/scenes/Staking/StakeOverviewScene.tsx
@@ -22,6 +22,7 @@ import { cacheStyles, Theme, useTheme } from '../../services/ThemeContext'
 import { MainButton } from '../../themed/MainButton'
 import { SceneHeader } from '../../themed/SceneHeader'
 import { CryptoFiatAmountTile } from '../../tiles/CryptoFiatAmountTile'
+import { StyledButtonContainer } from '../../ui4/ButtonsViewUi4'
 
 interface Props extends EdgeSceneProps<'stakeOverview'> {
   wallet: EdgeCurrencyWallet
@@ -143,7 +144,7 @@ const StakeOverviewSceneComponent = (props: Props) => {
   const { canStake = false, canClaim = false, canUnstakeAndClaim = false, canUnstake = false } = stakePosition ?? {}
 
   return (
-    <SceneWrapper scroll>
+    <SceneWrapper padding={theme.rem(0.5)} scroll>
       <SceneHeader title={title} withTopMargin />
       <View style={styles.card}>
         <StakingReturnsCard
@@ -170,40 +171,42 @@ const StakeOverviewSceneComponent = (props: Props) => {
           `${allocation.allocationType}${allocation.currencyCode}${allocation.nativeAmount}${getAllocationLocktimeMessage(allocation)}`
         }
       />
-      <MainButton
-        label={lstrings.stake_stake_more_funds}
-        disabled={!canStake}
-        type="primary"
-        onPress={handleModifyPress('stake')}
-        marginRem={[0.5, 0.5, 0.25, 0.5]}
-      />
-      {stakePolicy.hideClaimAction ? null : (
-        <MainButton
-          label={lstrings.stake_claim_rewards}
-          disabled={!canClaim}
-          type="secondary"
-          onPress={handleModifyPress('claim')}
-          marginRem={[0.25, 0.5, 0.25, 0.5]}
-        />
-      )}
-      {stakePolicy.hideUnstakeAndClaimAction ? null : (
-        <MainButton
-          label={lstrings.stake_unstake_claim}
-          disabled={!canUnstakeAndClaim}
-          type="escape"
-          onPress={handleModifyPress('unstakeAndClaim')}
-          marginRem={[0.25, 0.5, 0.25, 0.5]}
-        />
-      )}
-      {stakePolicy.hideUnstakeAction ? null : (
+      <StyledButtonContainer layout="column">
         <MainButton
-          label={lstrings.stake_unstake}
-          disabled={!canUnstake}
-          type="escape"
-          onPress={handleModifyPress('unstake')}
-          marginRem={[0.25, 0.5, 0.25, 0.5]}
+          label={lstrings.stake_stake_more_funds}
+          disabled={!canStake}
+          type="primary"
+          onPress={handleModifyPress('stake')}
+          marginRem={[0.5, 0.5, 0.25, 0.5]}
         />
-      )}
+        {stakePolicy.hideClaimAction ? null : (
+          <MainButton
+            label={lstrings.stake_claim_rewards}
+            disabled={!canClaim}
+            type="secondary"
+            onPress={handleModifyPress('claim')}
+            marginRem={[0.25, 0.5, 0.25, 0.5]}
+          />
+        )}
+        {stakePolicy.hideUnstakeAndClaimAction ? null : (
+          <MainButton
+            label={lstrings.stake_unstake_claim}
+            disabled={!canUnstakeAndClaim}
+            type="escape"
+            onPress={handleModifyPress('unstakeAndClaim')}
+            marginRem={[0.25, 0.5, 0.25, 0.5]}
+          />
+        )}
+        {stakePolicy.hideUnstakeAction ? null : (
+          <MainButton
+            label={lstrings.stake_unstake}
+            disabled={!canUnstake}
+            type="escape"
+            onPress={handleModifyPress('unstake')}
+            marginRem={[0.25, 0.5, 0.25, 0.5]}
+          />
+        )}
+      </StyledButtonContainer>
     </SceneWrapper>
   )
 }
@@ -212,7 +215,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
   card: {
     alignItems: 'center',
     justifyContent: 'flex-start',
-    paddingTop: theme.rem(0.5)
+    padding: theme.rem(0.5)
   },
   shimmer: {
     height: theme.rem(3),

diff --git a/src/components/ui4/ButtonsViewUi4.tsx b/src/components/ui4/ButtonsViewUi4.tsx
@@ -83,7 +83,7 @@ export const ButtonsViewUi4 = React.memo(({ absolute = false, fade, primary, sec
   )
 })
 
-const StyledButtonContainer = styled(View)<{ absolute: boolean; layout: 'row' | 'column' | 'solo'; sceneMargin?: boolean }>(theme => props => {
+export const StyledButtonContainer = styled(View)<{ absolute?: boolean; layout: 'row' | 'column' | 'solo'; sceneMargin?: boolean }>(theme => props => {
   const { absolute, layout, sceneMargin } = props
 
   const marginSize = theme.rem(0.5)