From 521430a37d9c6545ea5f951f98a9c03d2549060a Mon Sep 17 00:00:00 2001
From: shotgunofdeath <faust.child@gmail.com>
Date: Thu, 22 Feb 2024 14:38:16 +0100
Subject: [PATCH] fixup! feat(eth-staking): apply redesign changes

---
 .../StakeEthForm/ConfirmStakeEthModal.tsx     | 19 +++++++++++--------
 .../UnstakeEthForm/UnstakeEthForm.tsx         | 19 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx
index 231ab23baded..d8cdd13b2212 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx
+++ b/packages/suite/src/components/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/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx
index 59ea13a3c4c4..32e5821adb51 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx
+++ b/packages/suite/src/components/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}