[WALL] [Fix] Rostislav / WALL-3345 / Align transfer tab component siz…

…e with Figma (#13124) * fix: align w figma * refactor: simplify css * refactor: 3 lines support * fix: a different way via min-height
deriv-com · Jan 25, 2024 · 5a0214d · 5a0214d · vercel · Jan 25, 2024
1 parent 9602efd
commit 5a0214d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git 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/...s/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.scss b/...s/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/...atures/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.scss b/...atures/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/...eatures/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx b/...eatures/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>