[Wallet] aum / WALL-2271 / fix-ui-crypto-deposit

packages/wallets/src/AppContent.scss

@@ -4,9 +4,9 @@
     align-items: center;
     gap: 24px;
     width: 100%;
-    min-height: calc(100vh - 8.4rem); // 100vh - (4.8rem header + 3.6rem footer)
     align-self: stretch;
     background: var(--system-light-7-secondary-background, #f2f3f4);
+    height: calc(100vh - 8.4rem); // 100vh - (4.8rem header + 3.6rem footer)
 
     @include mobile {
         overflow-y: auto;

packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss

@@ -1,12 +1,14 @@
 .wallets-deposit-crypto {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    gap: 24px;
+    padding-top: 2.4rem;
+    gap: 2.4rem;
     position: relative;
 
     @include mobile {
         width: 100%;
         justify-content: start;
+        padding-top: 0rem;
+        gap: 1.6rem;
     }
 }

packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.scss

@@ -2,20 +2,20 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 24px;
-    min-height: 60px;
+    gap: 2.4rem;
+    min-height: 6rem;
 
     &__hash {
         color: #000;
         text-align: center;
-        font-size: 14px;
+        font-size: 1.4rem;
         font-weight: 700;
         padding: 0.8rem 1rem;
         border-radius: 4px 0px 0px 4px;
         border: 1px solid #e6e9e9;
 
         @include mobile {
-            font-size: 12px;
+            font-size: 1.2rem;
             text-overflow: ellipsis;
         }
 
@@ -27,6 +27,6 @@
 
     &__loader {
         position: relative;
-        height: 60px;
+        height: 6rem;
     }
 }

packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx

@@ -26,7 +26,7 @@ const DepositCryptoAddress = () => {
 
     return (
         <div className='wallets-deposit-crypto-address'>
-            <QRCode size={isMobile ? 128 : 160} value={depositCryptoAddress || ''} />
+            <QRCode size={128} value={depositCryptoAddress || ''} />
             <div className='wallets-deposit-crypto-address__hash-container'>
                 <p className='wallets-deposit-crypto-address__hash'>{depositCryptoAddress}</p>
                 <WalletClipboard

packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api';
-import './DepositCryptoCurrencyDetails.scss';
+import { WalletText } from '../../../../../../components';
 
 const DepositCryptoCurrencyDetails = () => {
     const { data } = useActiveWalletAccount();
 
     return (
-        <p className='wallets-deposit-crypto-currency-details'>
+        <WalletText align='center' size='md' weight='bold'>
             Send only {data?.currency_config?.name} ({data?.currency_config?.display_code}) to this address.
-        </p>
+        </WalletText>
     );
 };
 

packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss

@@ -2,16 +2,19 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 24px;
+    gap: 2.4rem;
+
+    @include mobile {
+        gap: 1.6rem;
+    }
 
     &__content {
-        line-height: 14px;
+        line-height: 1.4rem;
     }
 
     &__note {
-        display: flex;
-        justify-content: center;
-        font-size: 12px;
-        line-height: 18px;
+        font-size: 1.2rem;
+        line-height: 1.8rem;
+        text-align: center;
     }
 }

packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx

@@ -22,7 +22,9 @@ const DepositCryptoDisclaimers = () => {
         <div className='wallets-deposit-crypto-disclaimers'>
             <InlineMessage>
                 <div className='wallets-deposit-crypto-disclaimers__content'>
-                    <p>To avoid loss of funds:</p>
+                    <WalletText size='2xs' weight='bold'>
+                        To avoid loss of funds:
+                    </WalletText>
                     <br />
                     {data?.currency_config?.minimum_deposit && (
                         <li>