fixup! feat(eth-staking): apply redesign changes

everstake · Feb 22, 2024 · 521430a · 521430a
1 parent 0972bf9
commit 521430a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/...suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx b/...suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { Button, Checkbox, H2, Icon } from '@trezor/components';
+import { Button, Checkbox, H2, Icon, Divider } from '@trezor/components';
 import { spacingsPx } from '@trezor/theme';
 import { Modal, Translation, TrezorLink } from 'src/components/suite';
 import { useDispatch } from 'src/hooks/suite';
@@ -24,12 +24,13 @@ const Flex = styled.div`
     gap: ${spacingsPx.md};
 `;
 
-const Divider = styled.div`
-    height: 1px;
-    background: ${({ theme }) => theme.borderOnElevation0};
-    margin: ${spacingsPx.lg} 0 ${spacingsPx.md} auto;
-    max-width: 428px;
-    width: 100%;
+const DividerWrapper = styled.div`
+    & > div {
+        background: ${({ theme }) => theme.borderOnElevation1};
+        margin: ${spacingsPx.lg} 0 ${spacingsPx.md} auto;
+        max-width: 428px;
+        width: 100%;
+    }
 `;
 
 const StyledCheckbox = styled(Checkbox)`
@@ -98,7 +99,9 @@ export const ConfirmStakeEthModal = ({ onConfirm, onCancel }: ConfirmStakeEthMod
                 </Flex>
             </VStack>
 
-            <Divider />
+            <DividerWrapper>
+                <Divider />
+            </DividerWrapper>
 
             <StyledCheckbox onClick={() => setHasAgreed(!hasAgreed)} isChecked={hasAgreed}>
                 <Translation id="TR_STAKE_ACKNOWLEDGE_ENTRY_PERIOD" />

diff --git a/...s/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx b/...s/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Button, Paragraph, Warning } from '@trezor/components';
+import { Button, Divider, Paragraph, Warning } from '@trezor/components';
 import { spacingsPx } from '@trezor/theme';
 import { Translation } from 'src/components/suite';
 import { FeesInfo } from 'src/components/wallet/FeesInfo';
@@ -13,12 +13,13 @@ const GreyP = styled(Paragraph)`
     color: ${({ theme }) => theme.textSubdued};
 `;
 
-const MaxWidthDivider = styled.div`
-    height: 1px;
-    background: ${({ theme }) => theme.borderOnElevation1};
-    width: calc(100% + 64px);
-    margin-left: -${spacingsPx.xxl};
-    margin-bottom: ${spacingsPx.lg};
+const DividerWrapper = styled.div`
+    & > div {
+        background: ${({ theme }) => theme.borderOnElevation1};
+        width: calc(100% + 64px);
+        margin-left: -${spacingsPx.xxl};
+        margin-bottom: ${spacingsPx.lg};
+    }
 `;
 
 const StyledWarning = styled(Warning)`
@@ -71,7 +72,9 @@ export const UnstakeEthForm = () => {
         <form onSubmit={handleSubmit(signTx)}>
             <Options symbol={symbol} />
 
-            <MaxWidthDivider />
+            <DividerWrapper>
+                <Divider />
+            </DividerWrapper>
 
             <FeesInfo
                 transactionInfo={transactionInfo}