[Wallet] aum / WALL-2271 / fix-ui-crypto-deposit (#10850)

* fix: fixed some UI styles * chore: fixed some more UI elements * chore: removed redundant styling * chore: replaced units with rem * chore: replaced p tag with WalletText
deriv-com · Oct 25, 2023 · f1653a3 · f1653a3 · vercel · Oct 25, 2023
1 parent f326438
commit f1653a3
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 16 deletions.
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
@@ -1,12 +1,15 @@
 .wallets-deposit-crypto {
     display: flex;
     flex-direction: column;
+    padding-top: 2.4rem;
     justify-content: center;
     gap: 2.4rem;
     position: relative;
 
     @include mobile {
         width: 100%;
         justify-content: start;
+        padding-top: 0rem;
+        gap: 1.6rem;
     }
 }
diff --git a/...es/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx b/...es/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

diff --git a/...s/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss b/...s/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss
diff --git a/...es/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.tsx b/...es/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>
     );
 };
 

diff --git a/...r/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss b/...r/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
@@ -4,14 +4,19 @@
     justify-content: center;
     gap: 2.4rem;
 
+    @include mobile {
+        gap: 1.6rem;
+    }
+
     &__content {
         line-height: 1.4rem;
     }
 
     &__note {
-        display: flex;
-        justify-content: center;
         font-size: 1.2rem;
         line-height: 1.8rem;
+        text-align: center;
+        display: flex;
+        justify-content: center;
     }
 }
diff --git a/...er/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx b/...er/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>