Skip to content

Commit dc1116b

Browse files
rAskVALrAskVAL
committed
SD-106: Remove double border from wrapper
1 parent 23317d1 commit dc1116b

11 files changed

Lines changed: 115 additions & 158 deletions

File tree

‎src/domains/misc/components/ContentBox.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styled from 'styled-components';
2+
3+
import vars from 'src/domains/styling/utils/vars';
4+
5+
const ContentBox = styled.div<{ $disableMargin?: boolean }>`
6+
padding: ${vars('--spacing-xxl')};
7+
margin: ${({ $disableMargin }) => $disableMargin ? 'none' : vars('--spacing-s')};
8+
background-color: ${vars('--color-neutral-background-3a-rest')};
9+
border-radius: ${vars('--border-radius-l')};
10+
overflow: hidden;
11+
`;
12+
13+
export default ContentBox;

‎src/domains/misc/components/DoubleBorderBox.tsx‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/domains/misc/components/Layout/TopBar/NavBox.tsx‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@ type Props = {
1414
};
1515

1616
export const Container = ({ children, wrapperClassName, contentContainerClassName }: Props) => (
17-
<BorderWrapper className={wrapperClassName}>
17+
<Wrapper className={wrapperClassName}>
1818
<ContentWrapper className={contentContainerClassName}>
1919
{children}
2020
</ContentWrapper>
21-
</BorderWrapper>
21+
</Wrapper>
2222
);
2323

2424
const borderSize = 1;
2525

26-
const BorderWrapper = styled.div.withConfig({
26+
const Wrapper = styled.div.withConfig({
2727
shouldForwardProp: prop => !['withGradientBorder'].includes(prop),
2828
})`
2929
min-width: 0;
@@ -32,20 +32,6 @@ const BorderWrapper = styled.div.withConfig({
3232
position: relative;
3333
margin: ${vars('--spacing-xxxl')};
3434
padding: ${borderSize}px;
35-
36-
&::after {
37-
content: "";
38-
39-
position: absolute;
40-
inset: 0;
41-
42-
border: ${borderSize}px solid ${vars('--color-neutral-stroke-3-rest')};
43-
44-
border-radius: ${vars('--border-radius-xxl')};
45-
pointer-events: none; /* necessary because of the z-index, which makes this element cover other children */
46-
47-
mask-image: linear-gradient(to bottom right, black 10%, transparent 90%);
48-
}
4935
}
5036
`;
5137

‎src/domains/misc/components/Modal/Modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { MouseEvent, ReactElement, useCallback, useEffect, useRef, useState } fr
33
import styled from 'styled-components';
44

55
import Button from 'src/domains/misc/components/Button';
6-
import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
6+
import ContentBox from 'src/domains/misc/components/ContentBox';
77
import Pager from 'src/domains/misc/components/Pager';
88
import * as Title from 'src/domains/misc/components/Title';
99
import { useToast } from 'src/domains/misc/components/Toast';
@@ -129,7 +129,7 @@ const ModalWrapper = styled.div`
129129
}
130130
`;
131131

132-
const ModalContent = styled(motion.create(DoubleBorderBox.Content))`
132+
const ModalContent = styled(motion.create(ContentBox))`
133133
width: min(${SLIDE_IN_CARD_BREAKPOINT}px, 100dvw);
134134
max-height: 90vh;
135135
margin: 0;

‎src/domains/shielder/components/HelpDisclaimer.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { styled } from 'styled-components';
22

33
import CIcon from 'src/domains/misc/components/CIcon';
4+
import ContentBox from 'src/domains/misc/components/ContentBox';
45
import { FRAUD_PROTECTION_LINK } from 'src/domains/misc/consts/consts';
5-
import { backgroundFilters, typography } from 'src/domains/styling/utils/tokens';
6+
import { typography } from 'src/domains/styling/utils/tokens';
67
import vars from 'src/domains/styling/utils/vars';
78

89
const HelpDisclaimer = () => (
@@ -18,20 +19,16 @@ const HelpDisclaimer = () => (
1819

1920
export default HelpDisclaimer;
2021

21-
const Container = styled.div`
22+
const Container = styled(ContentBox)`
2223
display: flex;
2324
2425
align-items: start;
2526
gap: ${vars('--spacing-s')};
2627
28+
width: 100%;
2729
padding: ${vars('--spacing-l')};
2830
2931
color: ${vars('--color-neutral-foreground-3-rest')};
30-
31-
border-radius: ${vars('--border-radius-xxl')};
32-
background: ${vars('--color-neutral-background-alpha-4-rest')};
33-
34-
${backgroundFilters.backgroundBlur6}
3532
`;
3633

3734
const Text = styled.p`

‎src/domains/shielder/components/Shielder.tsx‎

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { objectEntries, objectKeys } from 'tsafe';
44

55
import useChain from 'src/domains/chains/utils/useChain';
66
import CIcon from 'src/domains/misc/components/CIcon';
7-
import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
7+
import ContentBox from 'src/domains/misc/components/ContentBox';
88
import Skeleton from 'src/domains/misc/components/Skeleton';
99
import Tabs from 'src/domains/misc/components/Tabs';
1010
import Title from 'src/domains/misc/components/Title';
@@ -69,7 +69,7 @@ useState<keyof typeof TABS>('tokens');
6969

7070
if (!isSuccess) {
7171
return (
72-
<Wrapper>
72+
<Container>
7373
<WithPadding>
7474
<Skeleton
7575
style={{
@@ -81,72 +81,72 @@ useState<keyof typeof TABS>('tokens');
8181
}}
8282
/>
8383
</WithPadding>
84-
</Wrapper>
84+
</Container>
8585
);
8686
}
8787

8888
return (
89-
<Wrapper>
90-
<Container $withoutBottomPadding={currentTab === 'activity'}>
91-
<WithPadding>
92-
<Title size="medium">Your accounts</Title>
93-
<AccountTypeSelector />
94-
<Tabs size="small" selectedTabKey={currentTab} tabsConfig={tabsConfig} />
95-
</WithPadding>
96-
{currentTab === 'activity' ? (
97-
<Activity />
98-
) : (
99-
<>
100-
{selectedAccountType === 'public' && (
101-
<WithPadding>
102-
<InfoBox>
103-
<CIcon icon="Info" size={20} />
104-
<p>Tokens that can be moved to shielded account:</p>
105-
</InfoBox>
106-
</WithPadding>
107-
)}
108-
<TokensWrapper>
109-
<TokenList tokens={tokens} />
110-
</TokensWrapper>
111-
{selectedAccountType === 'shielded' && (
112-
<WithPadding>
113-
<Disclaimer>
114-
<InfoContainer>
115-
<CIcon
116-
icon="InfoRegular"
117-
size={20}
118-
color={vars('--color-neutral-foreground-3-rest')}
119-
/>
120-
<p>
121-
Shielded account is created based on your connected account.
122-
It’s specific to the platform you use – accounts created in
123-
the Web App can be retrieved from the Web App on another device.
124-
</p>
125-
</InfoContainer>
126-
<ShieldImage src={shieldImage} alt="Shield icon" />
127-
</Disclaimer>
128-
</WithPadding>
129-
)}
130-
</>
131-
)}
132-
</Container>
133-
</Wrapper>
89+
<Container $withoutBottomPadding={currentTab === 'activity'}>
90+
<WithPadding>
91+
<Title size="medium">Your accounts</Title>
92+
<AccountTypeSelector />
93+
<Tabs size="small" selectedTabKey={currentTab} tabsConfig={tabsConfig} />
94+
</WithPadding>
95+
{currentTab === 'activity' ? (
96+
<Activity />
97+
) : (
98+
<>
99+
{selectedAccountType === 'public' && (
100+
<WithPadding>
101+
<InfoBox>
102+
<CIcon icon="Info" size={20} />
103+
<p>Tokens that can be moved to shielded account:</p>
104+
</InfoBox>
105+
</WithPadding>
106+
)}
107+
<TokensWrapper>
108+
<TokenList tokens={tokens} />
109+
</TokensWrapper>
110+
{selectedAccountType === 'shielded' && (
111+
<WithPadding>
112+
<Disclaimer>
113+
<InfoContainer>
114+
<CIcon
115+
icon="InfoRegular"
116+
size={20}
117+
color={vars('--color-neutral-foreground-3-rest')}
118+
/>
119+
<p>
120+
Shielded account is created based on your connected account.
121+
It’s specific to the platform you use – accounts created in
122+
the Web App can be retrieved from the Web App on another device.
123+
</p>
124+
</InfoContainer>
125+
<ShieldImage src={shieldImage} alt="Shield icon" />
126+
</Disclaimer>
127+
</WithPadding>
128+
)}
129+
</>
130+
)}
131+
</Container>
134132
);
135133
};
136134

137135
export default Shielder;
138136

139-
const Wrapper = styled(DoubleBorderBox.Wrapper)`
140-
width: 100%;
141-
overflow: hidden;
142-
`;
143-
144-
const Container = styled(DoubleBorderBox.Content)<{ $withoutBottomPadding?: boolean }>`
137+
const Container = styled(ContentBox)<{ $withoutBottomPadding?: boolean }>`
145138
display: flex;
146-
flex-direction: column;
139+
140+
147141
gap: ${vars('--spacing-l')};
142+
flex-direction: column;
143+
144+
width: 100%;
148145
padding-inline: ${vars('--spacing-none')};
149146
padding-block: ${vars('--spacing-l')};
147+
148+
overflow: hidden;
149+
150150
${({ $withoutBottomPadding }) => $withoutBottomPadding && css`
151151
padding-bottom: 0;
152152
`
@@ -174,7 +174,7 @@ const InfoBox = styled.div`
174174
${typography.body1Strong};
175175
`;
176176

177-
const Disclaimer = styled(DoubleBorderBox.Content)`
177+
const Disclaimer = styled(ContentBox)`
178178
display: flex;
179179
180180
flex-direction: row;

‎src/domains/shielder/components/TokenList/Modals/ConfirmPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import useChain from 'src/domains/chains/utils/useChain';
55
import AccountTypeIcon from 'src/domains/misc/components/AccountTypeIcon';
66
import Button from 'src/domains/misc/components/Button';
77
import CIcon from 'src/domains/misc/components/CIcon';
8-
import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
8+
import ContentBox from 'src/domains/misc/components/ContentBox';
99
import InfoPair from 'src/domains/misc/components/InfoPair';
1010
import Skeleton from 'src/domains/misc/components/Skeleton';
1111
import TokenIcon from 'src/domains/misc/components/TokenIcon';
@@ -149,9 +149,9 @@ const Footer = styled(Wrapper)`
149149
gap: ${vars('--spacing-xl')};
150150
`;
151151

152-
const Content = styled(DoubleBorderBox.Content)`
152+
const Content = styled(ContentBox)`
153153
display: flex;
154-
154+
155155
gap: ${vars('--spacing-m')};
156156
align-items: center;
157157
justify-content: space-between;

‎src/domains/shielder/components/TokenList/Modals/SendModal/SelectAccountPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { isAddress } from 'viem';
66
import { useWallet } from 'src/domains/chains/components/WalletProvider';
77
import Button from 'src/domains/misc/components/Button';
88
import CIcon from 'src/domains/misc/components/CIcon';
9-
import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
9+
import ContentBox from 'src/domains/misc/components/ContentBox';
1010
import PasteButton from 'src/domains/misc/components/PasteButton';
1111
import TextInput from 'src/domains/misc/components/TextInput';
1212
import { BEST_PRACTICES_LINK } from 'src/domains/misc/consts/consts';
@@ -130,7 +130,7 @@ const Container = styled.div`
130130
gap: ${vars('--spacing-xl')};
131131
`;
132132

133-
const Content = styled(DoubleBorderBox.Content)`
133+
const Content = styled(ContentBox)`
134134
display: flex;
135135
136136
flex-direction: column;

‎src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useWallet } from 'src/domains/chains/components/WalletProvider';
66
import useChain from 'src/domains/chains/utils/useChain';
77
import Button from 'src/domains/misc/components/Button';
88
import CIcon from 'src/domains/misc/components/CIcon';
9-
import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
9+
import ContentBox from 'src/domains/misc/components/ContentBox';
1010
import InfoPair from 'src/domains/misc/components/InfoPair';
1111
import Skeleton from 'src/domains/misc/components/Skeleton';
1212
import TokenIcon from 'src/domains/misc/components/TokenIcon';
@@ -137,7 +137,7 @@ const Container = styled.div`
137137
gap: ${vars('--spacing-xl')};
138138
`;
139139

140-
const Content = styled(DoubleBorderBox.Content)`
140+
const Content = styled(ContentBox)`
141141
display: flex;
142142
143143
flex-direction: column;

‎src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useWallet } from 'src/domains/chains/components/WalletProvider';
66
import useChain from 'src/domains/chains/utils/useChain';
77
import Button from 'src/domains/misc/components/Button';
88
import CIcon from 'src/domains/misc/components/CIcon';
9-
import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
9+
import ContentBox from 'src/domains/misc/components/ContentBox';
1010
import InfoPair from 'src/domains/misc/components/InfoPair';
1111
import Skeleton from 'src/domains/misc/components/Skeleton';
1212
import TokenIcon from 'src/domains/misc/components/TokenIcon';
@@ -142,11 +142,16 @@ const Container = styled.div`
142142
gap: ${vars('--spacing-xl')};
143143
`;
144144

145-
const Disclaimer = styled(DoubleBorderBox.Content)`
145+
const Disclaimer = styled(ContentBox)`
146146
display: flex;
147+
148+
flex-direction: row;
147149
justify-content: space-between;
150+
gap: ${vars('--spacing-m')};
151+
148152
margin: ${vars('--spacing-none')};
149153
padding: ${vars('--spacing-s')} 0 0 0;
154+
150155
background: ${vars('--color-neutral-background-4a-rest')};
151156
`;
152157

0 commit comments

Comments
 (0)