From ef89579c9f6cefc36e3b661aec5253009878f471 Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Fri, 20 Oct 2023 16:32:25 +0400
Subject: [PATCH 1/5] fix: fixed some UI styles

---
 packages/wallets/src/AppContent.scss                           | 3 ++-
 .../features/cashier/modules/DepositCrypto/DepositCrypto.scss  | 2 +-
 .../components/DepositCryptoAddress/DepositCryptoAddress.tsx   | 2 +-
 .../DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss     | 1 +
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/wallets/src/AppContent.scss b/packages/wallets/src/AppContent.scss
index 1da3ad2566e0..da3527610c13 100644
--- a/packages/wallets/src/AppContent.scss
+++ b/packages/wallets/src/AppContent.scss
@@ -7,9 +7,10 @@
     min-height: 100%;
     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;
-        height: 100%;
+        height: calc(100svh - 4rem); // 100svh - 4rem (header)
     }
 }
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
index a4657d4eac4e..ca674b961fe5 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
@@ -1,7 +1,7 @@
 .wallets-deposit-crypto {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    padding-top: 24px;
     gap: 24px;
     position: relative;
 
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx
index a7798b37ac5d..40a2d56cc322 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx
+++ b/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
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
index ea3fdf695fd3..81b05cf7931a 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
@@ -11,5 +11,6 @@
     &__note {
         font-size: 12px;
         line-height: 18px;
+        text-align: center;
     }
 }

From e742ccd0872379eb508708604b9b594ed2074f6a Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Mon, 23 Oct 2023 13:19:25 +0400
Subject: [PATCH 2/5] chore: fixed some more UI elements

---
 .../features/cashier/modules/DepositCrypto/DepositCrypto.scss | 2 ++
 .../DepositCryptoCurrencyDetails.scss                         | 2 +-
 .../DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss    | 4 ++++
 .../DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx     | 4 +++-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
index ca674b961fe5..52c362fa90c8 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
@@ -8,5 +8,7 @@
     @include mobile {
         width: 100%;
         justify-content: start;
+        padding-top: 0px;
+        gap: 16px;
     }
 }
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss
index f2683dce606e..1d5c4d814546 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss
@@ -1,6 +1,6 @@
 .wallets-deposit-crypto-currency-details {
     font-weight: 700;
-    font-size: 20px;
+    font-size: 16px;
     align-self: center;
 
     @include mobile {
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
index 81b05cf7931a..e871a34b4c0d 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
@@ -4,6 +4,10 @@
     justify-content: center;
     gap: 24px;
 
+    @include mobile {
+        gap: 16px;
+    }
+
     &__content {
         line-height: 14px;
     }
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx
index 8345555f170c..85a1ca8ffcfc 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx
@@ -24,7 +24,9 @@ const DepositCryptoDisclaimers = () => {
         <div className='wallets-deposit-crypto-disclaimers'>
             <InlineMessage>
                 <div className='wallets-deposit-crypto-disclaimers__content'>
-                    <p>To avoid loss of funds:</p>
+                    <strong>
+                        <p>To avoid loss of funds:</p>
+                    </strong>
                     <br />
                     {data?.currency_config?.minimum_deposit && (
                         <li>

From 3e8162f640d1faff51d9585c127289c664e391e5 Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Tue, 24 Oct 2023 09:14:35 +0400
Subject: [PATCH 3/5] chore: removed redundant styling

---
 packages/wallets/src/AppContent.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/wallets/src/AppContent.scss b/packages/wallets/src/AppContent.scss
index a76265521eaa..9bfde02a3bdb 100644
--- a/packages/wallets/src/AppContent.scss
+++ b/packages/wallets/src/AppContent.scss
@@ -4,7 +4,6 @@
     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)

From bdf785df86882f0f7b41acac4f49f04d905f9bed Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Tue, 24 Oct 2023 11:32:22 +0400
Subject: [PATCH 4/5] chore: replaced units with rem

---
 .../cashier/modules/DepositCrypto/DepositCrypto.scss   |  8 ++++----
 .../DepositCryptoAddress/DepositCryptoAddress.scss     | 10 +++++-----
 .../DepositCryptoCurrencyDetails.scss                  |  4 ++--
 .../DepositCryptoDisclaimers.scss                      | 10 +++++-----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
index 52c362fa90c8..48384c9a1797 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
@@ -1,14 +1,14 @@
 .wallets-deposit-crypto {
     display: flex;
     flex-direction: column;
-    padding-top: 24px;
-    gap: 24px;
+    padding-top: 2.4rem;
+    gap: 2.4rem;
     position: relative;
 
     @include mobile {
         width: 100%;
         justify-content: start;
-        padding-top: 0px;
-        gap: 16px;
+        padding-top: 0rem;
+        gap: 1.6rem;
     }
 }
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.scss
index 176880d0f8fb..40e95c482ae6 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.scss
+++ b/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;
     }
 }
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss
index 1d5c4d814546..51fc95ee598b 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss
@@ -1,9 +1,9 @@
 .wallets-deposit-crypto-currency-details {
     font-weight: 700;
-    font-size: 16px;
+    font-size: 1, 6rem;
     align-self: center;
 
     @include mobile {
-        font-size: 14px;
+        font-size: 1.4rem;
     }
 }
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
index e871a34b4c0d..45704e7b66d4 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.scss
@@ -2,19 +2,19 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 24px;
+    gap: 2.4rem;
 
     @include mobile {
-        gap: 16px;
+        gap: 1.6rem;
     }
 
     &__content {
-        line-height: 14px;
+        line-height: 1.4rem;
     }
 
     &__note {
-        font-size: 12px;
-        line-height: 18px;
+        font-size: 1.2rem;
+        line-height: 1.8rem;
         text-align: center;
     }
 }

From 1f80812e158c126871ad052cd1a353459c896942 Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Tue, 24 Oct 2023 12:23:17 +0400
Subject: [PATCH 5/5] chore: replaced p tag with WalletText

---
 .../DepositCryptoCurrencyDetails.scss                    | 9 ---------
 .../DepositCryptoCurrencyDetails.tsx                     | 6 +++---
 .../DepositCryptoDisclaimers.tsx                         | 6 +++---
 3 files changed, 6 insertions(+), 15 deletions(-)
 delete mode 100644 packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss

diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss
deleted file mode 100644
index 51fc95ee598b..000000000000
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.wallets-deposit-crypto-currency-details {
-    font-weight: 700;
-    font-size: 1, 6rem;
-    align-self: center;
-
-    @include mobile {
-        font-size: 1.4rem;
-    }
-}
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.tsx b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.tsx
index 5901c2508f95..8c3c4fce583d 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.tsx
+++ b/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>
     );
 };
 
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx
index 66129205e352..1df2791692d5 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx
@@ -22,9 +22,9 @@ const DepositCryptoDisclaimers = () => {
         <div className='wallets-deposit-crypto-disclaimers'>
             <InlineMessage>
                 <div className='wallets-deposit-crypto-disclaimers__content'>
-                    <strong>
-                        <p>To avoid loss of funds:</p>
-                    </strong>
+                    <WalletText size='2xs' weight='bold'>
+                        To avoid loss of funds:
+                    </WalletText>
                     <br />
                     {data?.currency_config?.minimum_deposit && (
                         <li>