fix: the thing (deriv-com#11794)

heorhi-deriv · Nov 27, 2023 · 9e97302 · 9e97302
1 parent 435a34b
commit 9e97302
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 8 deletions.
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss
@@ -3,6 +3,7 @@
     width: 100%;
     display: flex;
     justify-content: center;
+    gap: 2.4rem;
 
     @include mobile {
         height: fit-content;
@@ -21,4 +22,16 @@
             gap: 1.6rem;
         }
     }
+
+    &__side-pane {
+        height: fit-content;
+        display: flex;
+        flex: 1 1 0;
+        justify-content: flex-end;
+
+        .wallets-transaction-status {
+            margin-top: -2.4rem;
+            margin-right: 2.4rem;
+        }
+    }
 }
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.tsx b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.tsx
@@ -10,14 +10,17 @@ import './DepositCrypto.scss';
 const DepositCrypto = () => {
     return (
         <div className='wallets-deposit-crypto'>
+            <div className='wallets-deposit-crypto__side-pane' />
             <div className='wallets-deposit-crypto__main-content'>
                 <DepositCryptoCurrencyDetails />
                 <DepositCryptoAddress />
                 <DepositCryptoDisclaimers />
                 <Divider />
                 <DepositCryptoTryFiatOnRamp />
             </div>
-            <TransactionStatus transactionType='deposit' />
+            <div className='wallets-deposit-crypto__side-pane'>
+                <TransactionStatus transactionType='deposit' />
+            </div>
         </div>
     );
 };

diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.scss b/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.scss
@@ -1,12 +1,8 @@
 .wallets-transaction-status {
     width: 100%;
 
-    /* This positioning is temporary, ideally it should be determined by the parent component whenever we use `TransactionStatus` */
     @include desktop {
-        position: absolute;
-        top: -2.4rem;
-        right: 2.4rem;
-        max-width: 28.2rem;
+        width: 28.2rem;
     }
 
     display: flex;

diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.scss b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.scss
@@ -1,8 +1,9 @@
 .wallets-withdrawal-crypto {
     position: relative;
+    width: 100%;
     display: flex;
     justify-content: center;
-    width: 100%;
+    gap: 2.4rem;
 
     @include mobile {
         flex-direction: column;
@@ -27,6 +28,18 @@
             max-width: none;
         }
     }
+
+    &__side-pane {
+        height: fit-content;
+        display: flex;
+        flex: 1 1 0;
+        justify-content: flex-end;
+
+        .wallets-transaction-status {
+            margin-top: -2.4rem;
+            margin-right: 2.4rem;
+        }
+    }
 }
 
 .wallets-withdrawal-crypto-address {

diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx
@@ -37,6 +37,7 @@ const WithdrawalCrypto: React.FC<TWithdrawalCryptoProps> = ({ onClose, verificat
 
     return (
         <div className='wallets-withdrawal-crypto'>
+            <div className='wallets-withdrawal-crypto__side-pane' />
             <div className='wallets-withdrawal-crypto__content'>
                 <WalletText weight='bold'>
                     Withdraw {activeWallet?.currency ? getConfig(activeWallet?.currency)?.name : ''} (
@@ -50,7 +51,9 @@ const WithdrawalCrypto: React.FC<TWithdrawalCryptoProps> = ({ onClose, verificat
                     verificationCode={verificationCode}
                 />
             </div>
-            <TransactionStatus transactionType='withdrawal' />
+            <div className='wallets-withdrawal-crypto__side-pane'>
+                <TransactionStatus transactionType='withdrawal' />
+            </div>
         </div>
     );
 };