Cardinal-Cryptography · rAskVAL · Jul 17, 2025 · Jul 15, 2025
diff --git a/src/domains/misc/components/ContentBox.tsx 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
diff --git 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) => (
-  <BorderWrapper className={wrapperClassName}>
+  <Wrapper className={wrapperClassName}>
     <ContentWrapper className={contentContainerClassName}>
       {children}
     </ContentWrapper>
-  </BorderWrapper>
+  </Wrapper>
 );
 
 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
@@ -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
@@ -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
@@ -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<keyof typeof TABS>('tokens');
 
   if (!isSuccess) {
     return (
-      <Wrapper>
+      <Container>
         <WithPadding>
           <Skeleton
             style={{
@@ -81,72 +81,72 @@ useState<keyof typeof TABS>('tokens');
             }}
           />
         </WithPadding>
-      </Wrapper>
+      </Container>
     );
   }
 
   return (
-    <Wrapper>
-      <Container $withoutBottomPadding={currentTab === 'activity'}>
-        <WithPadding>
-          <Title size="medium">Your accounts</Title>
-          <AccountTypeSelector />
-          <Tabs size="small" selectedTabKey={currentTab} tabsConfig={tabsConfig} />
-        </WithPadding>
-        {currentTab === 'activity' ? (
-          <Activity />
-        ) : (
-          <>
-            {selectedAccountType === 'public' && (
-              <WithPadding>
-                <InfoBox>
-                  <BIcon icon="Info" size={20} />
-                  <p>Tokens that can be moved to shielded account:</p>
-                </InfoBox>
-              </WithPadding>
-            )}
-            <TokensWrapper>
-              <TokenList tokens={tokens} />
-            </TokensWrapper>
-            {selectedAccountType === 'shielded' && (
-              <WithPadding>
-                <Disclaimer>
-                  <InfoContainer>
-                    <BIcon
-                      icon="InfoRegular"
-                      size={20}
-                      color={vars('--color-neutral-foreground-3-rest')}
-                    />
-                    <p>
-                      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.
-                    </p>
-                  </InfoContainer>
-                  <ShieldImage src={shieldImage} alt="Shield icon" />
-                </Disclaimer>
-              </WithPadding>
-            )}
-          </>
-        )}
-      </Container>
-    </Wrapper>
+    <Container $withoutBottomPadding={currentTab === 'activity'}>
+      <WithPadding>
+        <Title size="medium">Your accounts</Title>
+        <AccountTypeSelector />
+        <Tabs size="small" selectedTabKey={currentTab} tabsConfig={tabsConfig} />
+      </WithPadding>
+      {currentTab === 'activity' ? (
+        <Activity />
+      ) : (
+        <>
+          {selectedAccountType === 'public' && (
+            <WithPadding>
+              <InfoBox>
+                <BIcon icon="Info" size={20} />
+                <p>Tokens that can be moved to shielded account:</p>
+              </InfoBox>
+            </WithPadding>
+          )}
+          <TokensWrapper>
+            <TokenList tokens={tokens} />
+          </TokensWrapper>
+          {selectedAccountType === 'shielded' && (
+            <WithPadding>
+              <Disclaimer>
+                <InfoContainer>
+                  <BIcon
+                    icon="InfoRegular"
+                    size={20}
+                    color={vars('--color-neutral-foreground-3-rest')}
+                  />
+                  <p>
+                    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.
+                  </p>
+                </InfoContainer>
+                <ShieldImage src={shieldImage} alt="Shield icon" />
+              </Disclaimer>
+            </WithPadding>
+          )}
+        </>
+      )}
+    </Container>
   );
 };
 
 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
@@ -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
@@ -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
@@ -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
@@ -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')};
 `;