From 3b1479c0021922997124a3a0ff8c33aea206ffa8 Mon Sep 17 00:00:00 2001 From: rAskVAL Date: Tue, 15 Jul 2025 16:07:11 +0300 Subject: [PATCH] SD-106: Remove double border from wrapper --- src/domains/misc/components/ContentBox.tsx | 13 ++ .../misc/components/DoubleBorderBox.tsx | 42 ------- .../misc/components/Layout/TopBar/NavBox.tsx | 20 +--- src/domains/misc/components/Modal/Modal.tsx | 4 +- .../shielder/components/HelpDisclaimer.tsx | 11 +- src/domains/shielder/components/Shielder.tsx | 112 +++++++++--------- .../TokenList/Modals/ConfirmPage.tsx | 6 +- .../Modals/SendModal/SelectAccountPage.tsx | 4 +- .../Modals/SendModal/SelectAmountPage.tsx | 4 +- .../Modals/ShieldModal/SelectAmountPage.tsx | 9 +- .../shielder/components/Welcome/Welcome.tsx | 48 ++++---- 11 files changed, 115 insertions(+), 158 deletions(-) create mode 100644 src/domains/misc/components/ContentBox.tsx delete mode 100644 src/domains/misc/components/DoubleBorderBox.tsx diff --git a/src/domains/misc/components/ContentBox.tsx b/src/domains/misc/components/ContentBox.tsx new file mode 100644 index 0000000..63b5f7e --- /dev/null +++ b/src/domains/misc/components/ContentBox.tsx @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +import vars from 'src/domains/styling/utils/vars'; + +const ContentBox = styled.div<{ $disableMargin?: boolean }>` + padding: ${vars('--spacing-xxl')}; + margin: ${({ $disableMargin }) => $disableMargin ? 'none' : vars('--spacing-s')}; + background-color: ${vars('--color-neutral-background-3a-rest')}; + border-radius: ${vars('--border-radius-l')}; + overflow: hidden; +`; + +export default ContentBox; diff --git a/src/domains/misc/components/DoubleBorderBox.tsx b/src/domains/misc/components/DoubleBorderBox.tsx deleted file mode 100644 index 9d007cb..0000000 --- a/src/domains/misc/components/DoubleBorderBox.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import styled from 'styled-components'; - -import { backgroundFilters } from 'src/domains/styling/utils/tokens'; -import vars from 'src/domains/styling/utils/vars'; - -const borderSize = 1; - -const Wrapper = styled.div` - position: relative; - padding: ${borderSize}px; - background-color: ${vars('--color-neutral-background-alpha-4-rest')}; - border-radius: ${vars('--border-radius-xxl')}; - - &::after { - content: ""; - - position: absolute; - inset: 0; - - border: ${borderSize}px solid ${vars('--color-neutral-stroke-gradient-color-a')}; - - border-radius: inherit; - pointer-events: none; - - mask-image: linear-gradient(to bottom right, black, transparent 60%); - } -`; - -const Content = styled(Wrapper)<{ $disableMargin?: boolean }>` - padding: ${vars('--spacing-xxl')}; - margin: ${({ $disableMargin }) => $disableMargin ? 'none' : vars('--spacing-s')}; - background-color: ${vars('--color-neutral-background-3a-rest')}; - border-radius: calc(${vars('--border-radius-l')} - ${borderSize}px); - overflow: hidden; - ${backgroundFilters.backgroundBlur1}; - - &::after { - border-radius: inherit; - } -`; - -export default { Wrapper, Content }; diff --git a/src/domains/misc/components/Layout/TopBar/NavBox.tsx b/src/domains/misc/components/Layout/TopBar/NavBox.tsx index 2d6fce0..6e3e9c2 100644 --- a/src/domains/misc/components/Layout/TopBar/NavBox.tsx +++ b/src/domains/misc/components/Layout/TopBar/NavBox.tsx @@ -14,16 +14,16 @@ type Props = { }; export const Container = ({ children, wrapperClassName, contentContainerClassName }: Props) => ( - + {children} - + ); const borderSize = 1; -const BorderWrapper = styled.div.withConfig({ +const Wrapper = styled.div.withConfig({ shouldForwardProp: prop => !['withGradientBorder'].includes(prop), })` min-width: 0; @@ -32,20 +32,6 @@ const BorderWrapper = styled.div.withConfig({ position: relative; margin: ${vars('--spacing-xxxl')}; padding: ${borderSize}px; - - &::after { - content: ""; - - position: absolute; - inset: 0; - - border: ${borderSize}px solid ${vars('--color-neutral-stroke-3-rest')}; - - border-radius: ${vars('--border-radius-xxl')}; - pointer-events: none; /* necessary because of the z-index, which makes this element cover other children */ - - mask-image: linear-gradient(to bottom right, black 10%, transparent 90%); - } } `; diff --git a/src/domains/misc/components/Modal/Modal.tsx b/src/domains/misc/components/Modal/Modal.tsx index 81ec9cf..41da9ec 100644 --- a/src/domains/misc/components/Modal/Modal.tsx +++ b/src/domains/misc/components/Modal/Modal.tsx @@ -3,7 +3,7 @@ import { MouseEvent, ReactElement, useCallback, useEffect, useRef, useState } fr import styled from 'styled-components'; import Button from 'src/domains/misc/components/Button'; -import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox'; +import ContentBox from 'src/domains/misc/components/ContentBox'; import Pager from 'src/domains/misc/components/Pager'; import * as Title from 'src/domains/misc/components/Title'; import { useToast } from 'src/domains/misc/components/Toast'; @@ -129,7 +129,7 @@ const ModalWrapper = styled.div` } `; -const ModalContent = styled(motion.create(DoubleBorderBox.Content))` +const ModalContent = styled(motion.create(ContentBox))` width: min(${SLIDE_IN_CARD_BREAKPOINT}px, 100dvw); max-height: 90vh; margin: 0; diff --git a/src/domains/shielder/components/HelpDisclaimer.tsx b/src/domains/shielder/components/HelpDisclaimer.tsx index ea1d8b7..7d020b7 100644 --- a/src/domains/shielder/components/HelpDisclaimer.tsx +++ b/src/domains/shielder/components/HelpDisclaimer.tsx @@ -1,8 +1,9 @@ import { styled } from 'styled-components'; import BIcon from 'src/domains/misc/components/BIcon'; +import ContentBox from 'src/domains/misc/components/ContentBox'; import { FRAUD_PROTECTION_LINK } from 'src/domains/misc/consts/consts'; -import { backgroundFilters, typography } from 'src/domains/styling/utils/tokens'; +import { typography } from 'src/domains/styling/utils/tokens'; import vars from 'src/domains/styling/utils/vars'; const HelpDisclaimer = () => ( @@ -18,20 +19,16 @@ const HelpDisclaimer = () => ( export default HelpDisclaimer; -const Container = styled.div` +const Container = styled(ContentBox)` display: flex; align-items: start; gap: ${vars('--spacing-s')}; + width: 100%; padding: ${vars('--spacing-l')}; color: ${vars('--color-neutral-foreground-3-rest')}; - - border-radius: ${vars('--border-radius-xxl')}; - background: ${vars('--color-neutral-background-alpha-4-rest')}; - - ${backgroundFilters.backgroundBlur6} `; const Text = styled.p` diff --git a/src/domains/shielder/components/Shielder.tsx b/src/domains/shielder/components/Shielder.tsx index 498be87..b795b25 100644 --- a/src/domains/shielder/components/Shielder.tsx +++ b/src/domains/shielder/components/Shielder.tsx @@ -4,7 +4,7 @@ import { objectEntries, objectKeys } from 'tsafe'; import useChain from 'src/domains/chains/utils/useChain'; import BIcon from 'src/domains/misc/components/BIcon'; -import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox'; +import ContentBox from 'src/domains/misc/components/ContentBox'; import Skeleton from 'src/domains/misc/components/Skeleton'; import Tabs from 'src/domains/misc/components/Tabs'; import Title from 'src/domains/misc/components/Title'; @@ -69,7 +69,7 @@ useState('tokens'); if (!isSuccess) { return ( - + ('tokens'); }} /> - + ); } return ( - - - - Your accounts - - - - {currentTab === 'activity' ? ( - - ) : ( - <> - {selectedAccountType === 'public' && ( - - - -

Tokens that can be moved to shielded account:

- - - )} - - - - {selectedAccountType === 'shielded' && ( - - - - -

- Shielded account is created based on your connected account. - It’s specific to the platform you use – accounts created in - the Web App can be retrieved from the Web App on another device. -

- - - - - )} - - )} - - + + + Your accounts + + + + {currentTab === 'activity' ? ( + + ) : ( + <> + {selectedAccountType === 'public' && ( + + + +

Tokens that can be moved to shielded account:

+ + + )} + + + + {selectedAccountType === 'shielded' && ( + + + + +

+ Shielded account is created based on your connected account. + It’s specific to the platform you use – accounts created in + the Web App can be retrieved from the Web App on another device. +

+ + + + + )} + + )} + ); }; export default Shielder; -const Wrapper = styled(DoubleBorderBox.Wrapper)` - width: 100%; - overflow: hidden; -`; - -const Container = styled(DoubleBorderBox.Content)<{ $withoutBottomPadding?: boolean }>` +const Container = styled(ContentBox)<{ $withoutBottomPadding?: boolean }>` display: flex; - flex-direction: column; + + gap: ${vars('--spacing-l')}; + flex-direction: column; + + width: 100%; padding-inline: ${vars('--spacing-none')}; padding-block: ${vars('--spacing-l')}; + + overflow: hidden; + ${({ $withoutBottomPadding }) => $withoutBottomPadding && css` padding-bottom: 0; ` @@ -174,7 +174,7 @@ const InfoBox = styled.div` ${typography.body1Strong}; `; -const Disclaimer = styled(DoubleBorderBox.Content)` +const Disclaimer = styled(ContentBox)` display: flex; flex-direction: row; diff --git a/src/domains/shielder/components/TokenList/Modals/ConfirmPage.tsx b/src/domains/shielder/components/TokenList/Modals/ConfirmPage.tsx index ccae260..c2fa2b9 100644 --- a/src/domains/shielder/components/TokenList/Modals/ConfirmPage.tsx +++ b/src/domains/shielder/components/TokenList/Modals/ConfirmPage.tsx @@ -5,7 +5,7 @@ import useChain from 'src/domains/chains/utils/useChain'; import AccountTypeIcon from 'src/domains/misc/components/AccountTypeIcon'; import BIcon from 'src/domains/misc/components/BIcon'; import Button from 'src/domains/misc/components/Button'; -import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox'; +import ContentBox from 'src/domains/misc/components/ContentBox'; import InfoPair from 'src/domains/misc/components/InfoPair'; import Skeleton from 'src/domains/misc/components/Skeleton'; import TokenIcon from 'src/domains/misc/components/TokenIcon'; @@ -149,9 +149,9 @@ const Footer = styled(Wrapper)` gap: ${vars('--spacing-xl')}; `; -const Content = styled(DoubleBorderBox.Content)` +const Content = styled(ContentBox)` display: flex; - + gap: ${vars('--spacing-m')}; align-items: center; justify-content: space-between; diff --git a/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAccountPage.tsx b/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAccountPage.tsx index 80b8b7f..94e665f 100644 --- a/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAccountPage.tsx +++ b/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAccountPage.tsx @@ -6,7 +6,7 @@ import { isAddress } from 'viem'; import { useWallet } from 'src/domains/chains/components/WalletProvider'; import BIcon from 'src/domains/misc/components/BIcon'; import Button from 'src/domains/misc/components/Button'; -import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox'; +import ContentBox from 'src/domains/misc/components/ContentBox'; import PasteButton from 'src/domains/misc/components/PasteButton'; import TextInput from 'src/domains/misc/components/TextInput'; import { BEST_PRACTICES_LINK } from 'src/domains/misc/consts/consts'; @@ -130,7 +130,7 @@ const Container = styled.div` gap: ${vars('--spacing-xl')}; `; -const Content = styled(DoubleBorderBox.Content)` +const Content = styled(ContentBox)` display: flex; flex-direction: column; diff --git a/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx b/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx index 1073888..06757b8 100644 --- a/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx +++ b/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx @@ -6,7 +6,7 @@ import { useWallet } from 'src/domains/chains/components/WalletProvider'; import useChain from 'src/domains/chains/utils/useChain'; import BIcon from 'src/domains/misc/components/BIcon'; import Button from 'src/domains/misc/components/Button'; -import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox'; +import ContentBox from 'src/domains/misc/components/ContentBox'; import InfoPair from 'src/domains/misc/components/InfoPair'; import Skeleton from 'src/domains/misc/components/Skeleton'; import TokenIcon from 'src/domains/misc/components/TokenIcon'; @@ -137,7 +137,7 @@ const Container = styled.div` gap: ${vars('--spacing-xl')}; `; -const Content = styled(DoubleBorderBox.Content)` +const Content = styled(ContentBox)` display: flex; flex-direction: column; diff --git a/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx b/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx index d32cab5..6abc785 100644 --- a/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx +++ b/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx @@ -6,7 +6,7 @@ import { useWallet } from 'src/domains/chains/components/WalletProvider'; import useChain from 'src/domains/chains/utils/useChain'; import BIcon from 'src/domains/misc/components/BIcon'; import Button from 'src/domains/misc/components/Button'; -import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox'; +import ContentBox from 'src/domains/misc/components/ContentBox'; import InfoPair from 'src/domains/misc/components/InfoPair'; import Skeleton from 'src/domains/misc/components/Skeleton'; import TokenIcon from 'src/domains/misc/components/TokenIcon'; @@ -142,11 +142,16 @@ const Container = styled.div` gap: ${vars('--spacing-xl')}; `; -const Disclaimer = styled(DoubleBorderBox.Content)` +const Disclaimer = styled(ContentBox)` display: flex; + + flex-direction: row; justify-content: space-between; + gap: ${vars('--spacing-m')}; + margin: ${vars('--spacing-none')}; padding: ${vars('--spacing-s')} 0 0 0; + background: ${vars('--color-neutral-background-4a-rest')}; `; diff --git a/src/domains/shielder/components/Welcome/Welcome.tsx b/src/domains/shielder/components/Welcome/Welcome.tsx index 284fd9c..e3280dc 100644 --- a/src/domains/shielder/components/Welcome/Welcome.tsx +++ b/src/domains/shielder/components/Welcome/Welcome.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; import ConnectModal from 'src/domains/chains/components/ConnectModal'; import Button from 'src/domains/misc/components/Button'; -import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox'; +import ContentBox from 'src/domains/misc/components/ContentBox'; import { useModal } from 'src/domains/misc/components/Modal'; import { typography } from 'src/domains/styling/utils/tokens'; import vars from 'src/domains/styling/utils/vars'; @@ -15,29 +15,27 @@ const Welcome = () => { const { open } = useModal(); return ( - - - - - Make your onchain actions private and secure with shielding. - - {STEPS.map((step, index) => ( - - {index + 1} -

{step}

- - ))} - - - void open()} - > - Connect Wallet - - - + + + + Make your onchain actions private and secure with shielding. + + {STEPS.map((step, index) => ( + + {index + 1} +

{step}

+ + ))} + + + void open()} + > + Connect Wallet + + ); }; @@ -51,7 +49,7 @@ const BreakTheTrace = styled.img` user-select: none; `; -const Content = styled(DoubleBorderBox.Content)` +const Content = styled(ContentBox)` display: flex; flex-direction: column;