fix(suite): fix spacing for ETH warrning

trezor · May 7, 2024 · 39ad328 · 39ad328
1 parent 5866769
commit 39ad328
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/...onents/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewEvmExplanation.tsx b/...onents/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewEvmExplanation.tsx
@@ -2,13 +2,25 @@ import { Warning } from '@trezor/components';
 import { Translation } from 'src/components/suite';
 import { Account } from 'src/types/wallet';
 import { networks } from '@suite-common/wallet-config';
+import {
+    FrameProps,
+    TransientFrameProps,
+    withFrameProps,
+} from '@trezor/components/src/components/common/frameProps';
+import styled from 'styled-components';
 
-interface TransactionReviewEvmExplanationProps {
+const Wrapper = styled.div<TransientFrameProps>`
+    ${withFrameProps}
+`;
+
+type TransactionReviewEvmExplanationProps = {
     account: Account;
-}
+    margin?: FrameProps['margin'];
+};
 
 export const TransactionReviewEvmExplanation = ({
     account,
+    margin,
 }: TransactionReviewEvmExplanationProps) => {
     const network = networks[account.symbol];
 
@@ -17,14 +29,16 @@ export const TransactionReviewEvmExplanation = ({
     }
 
     return (
-        <Warning>
-            <Translation
-                id="TR_EVM_EXPLANATION_SEND_MODAL_DESCRIPTION"
-                values={{
-                    network: network.name,
-                    b: text => <b>{text}</b>,
-                }}
-            />
-        </Warning>
+        <Wrapper $margin={margin}>
+            <Warning>
+                <Translation
+                    id="TR_EVM_EXPLANATION_SEND_MODAL_DESCRIPTION"
+                    values={{
+                        network: network.name,
+                        b: text => <b>{text}</b>,
+                    }}
+                />
+            </Warning>
+        </Wrapper>
     );
 };
diff --git a/...mponents/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx b/...mponents/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx
@@ -14,6 +14,7 @@ import { TransactionReviewSummary } from './TransactionReviewSummary';
 import { TransactionReviewOutputList } from './TransactionReviewOutputList/TransactionReviewOutputList';
 import { TransactionReviewEvmExplanation } from './TransactionReviewEvmExplanation';
 import { DeviceModelInternal } from '@trezor/connect';
+import { spacings } from '@trezor/theme';
 
 const StyledModal = styled(Modal)`
     ${Modal.Body} {
@@ -159,7 +160,10 @@ export const TransactionReviewModalContent = ({
                 setIsSending={() => setIsSending(true)}
                 ethereumStakeType={ethereumStakeType || undefined}
             />
-            <TransactionReviewEvmExplanation account={selectedAccount.account} />
+            <TransactionReviewEvmExplanation
+                account={selectedAccount.account}
+                margin={{ top: spacings.sm }}
+            />
         </StyledModal>
     );
 };