From 5a0214d99d513e6429b7f08a9ef390b20b975903 Mon Sep 17 00:00:00 2001
From: Rostik Kayko <119863957+rostislav-deriv@users.noreply.github.com>
Date: Thu, 25 Jan 2024 13:25:22 +0300
Subject: [PATCH] [WALL] [Fix] Rostislav / WALL-3345 / Align transfer tab
 component size with Figma (#13124)

* fix: align w figma

* refactor: simplify css

* refactor: 3 lines support

* fix: a different way via min-height
---
 .../Base/ATMAmountInput/ATMAmountInput.scss          |  1 +
 .../components/TransferForm/TransferForm.scss        |  1 +
 .../TransferFormDropdown/TransferFormDropdown.scss   | 12 +++++++++++-
 .../TransferFormDropdown/TransferFormDropdown.tsx    |  8 +++++---
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.scss b/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.scss
index f55817c1ae1d..fe95abfab940 100644
--- a/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.scss
+++ b/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.scss
@@ -20,6 +20,7 @@
     }
 
     &__input-container {
+        height: 3rem;
         position: relative;
         flex-grow: 1;
     }
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.scss b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.scss
index 8e776027a9a5..6c386d865c57 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.scss
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.scss
@@ -25,6 +25,7 @@
         padding: 0.8rem;
 
         @include mobile {
+            min-height: 9rem;
             grid-template-columns: 60% 40%;
         }
     }
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.scss b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.scss
index f43dee86f29e..50c6da5f4148 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.scss
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.scss
@@ -15,7 +15,11 @@
         display: flex;
         flex-direction: column;
         flex: 1;
-        gap: 0.4rem;
+        gap: 0.2rem;
+
+        @include mobile {
+            gap: 0.4rem;
+        }
     }
 
     &__header {
@@ -27,6 +31,12 @@
         }
     }
 
+    &__select-account-cta {
+        @include mobile {
+            padding: 0.5rem 0;
+        }
+    }
+
     &__icon-dropdown {
         margin-left: 1rem;
 
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx
index 78e71799ae6e..835fd52c47c8 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx
@@ -118,9 +118,11 @@ const TransferFormDropdown: React.FC<TProps> = ({ fieldName, mobileAccountsListR
                 {selectedAccount ? (
                     <TransferFormAccountCard account={selectedAccount} activeWallet={activeWallet} type='input' />
                 ) : (
-                    <WalletText size='sm' weight='bold'>
-                        Select a trading account or a Wallet
-                    </WalletText>
+                    <div className='wallets-transfer-form-dropdown__select-account-cta'>
+                        <WalletText size='sm' weight='bold'>
+                            Select a trading account or a Wallet
+                        </WalletText>
+                    </div>
                 )}
             </div>