fix(suite): Fix staking cards (#14376)

(cherry picked from commit da374a4)
trezor · Sep 17, 2024 · bcf94e4 · bcf94e4
1 parent e4ee395
commit bcf94e4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/...ages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ApyCard.tsx b/...ages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ApyCard.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from 'styled-components';
-import { Card, Icon } from '@trezor/components';
+import { Card, Column, Icon } from '@trezor/components';
 import { Translation } from 'src/components/suite';
 import { AccentP, CardBottomContent, GreyP } from './styled';
 
@@ -12,14 +12,16 @@ export const ApyCard = ({ apy }: ApyCardProps) => {
 
     return (
         <Card paddingType="small">
-            <Icon name="percent" color={theme.iconSubdued} />
+            <Column alignItems="flex-start">
+                <Icon name="percent" color={theme.iconSubdued} />
 
-            <CardBottomContent>
-                <AccentP>{`${apy}%`}</AccentP>
-                <GreyP>
-                    <Translation id="TR_STAKE_APY" />
-                </GreyP>
-            </CardBottomContent>
+                <CardBottomContent>
+                    <AccentP>{`${apy}%`}</AccentP>
+                    <GreyP>
+                        <Translation id="TR_STAKE_APY" />
+                    </GreyP>
+                </CardBottomContent>
+            </Column>
         </Card>
     );
 };
diff --git a/...s/suite/src/views/wallet/staking/components/EthStakingDashboard/components/PayoutCard.tsx b/...s/suite/src/views/wallet/staking/components/EthStakingDashboard/components/PayoutCard.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 import { useTheme } from 'styled-components';
-import { Card, Icon } from '@trezor/components';
+import { Card, Column, Icon } from '@trezor/components';
 import { Translation } from 'src/components/suite';
 import { AccentP, CardBottomContent, GreyP } from './styled';
 import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
@@ -38,23 +38,25 @@ export const PayoutCard = ({
 
     return (
         <Card paddingType="small">
-            <Icon name="calendar" color={theme.iconSubdued} />
-
-            <CardBottomContent>
-                <AccentP>
-                    {payout === undefined ? (
-                        <Translation
-                            id="TR_STAKE_MAX_REWARD_DAYS"
-                            values={{ count: BACKUP_REWARD_PAYOUT_DAYS }}
-                        />
-                    ) : (
-                        <Translation id="TR_STAKE_DAYS" values={{ count: payout }} />
-                    )}
-                </AccentP>
-                <GreyP>
-                    <Translation id="TR_STAKE_NEXT_PAYOUT" />
-                </GreyP>
-            </CardBottomContent>
+            <Column alignItems="flex-start">
+                <Icon name="calendar" color={theme.iconSubdued} />
+
+                <CardBottomContent>
+                    <AccentP>
+                        {payout === undefined ? (
+                            <Translation
+                                id="TR_STAKE_MAX_REWARD_DAYS"
+                                values={{ count: BACKUP_REWARD_PAYOUT_DAYS }}
+                            />
+                        ) : (
+                            <Translation id="TR_STAKE_DAYS" values={{ count: payout }} />
+                        )}
+                    </AccentP>
+                    <GreyP>
+                        <Translation id="TR_STAKE_NEXT_PAYOUT" />
+                    </GreyP>
+                </CardBottomContent>
+            </Column>
         </Card>
     );
 };