[Wallet] george / cashier header animation (heigth transition + opaci…

…ty) (deriv-com#10965) * style: 💄 add height transition with opacity * fix: fixed the height issue for desktop wallets-cashier-content (#41) --------- Co-authored-by: Aum Bhatt <125039206+aum-deriv@users.noreply.github.com>
niloofar-deriv · Oct 26, 2023 · 5618278 · 5618278
1 parent 64a549c
commit 5618278
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/packages/wallets/src/features/cashier/WalletCashier.scss b/packages/wallets/src/features/cashier/WalletCashier.scss
@@ -1,7 +1,11 @@
 .wallets-cashier {
     display: flex;
     flex-direction: column;
-    height: calc(100svh - 4rem);
+    height: calc(100vh - (4.8rem + 3.6rem));
+
+    @include mobile {
+        height: calc(100svh - 4rem);
+    }
 }
 
 .wallets-cashier-content {

diff --git a/...ages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss b/...ages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss
@@ -10,7 +10,6 @@
 
     @include mobile {
         padding-top: 0rem;
-        transition: height 0.2s ease-in;
         height: fit-content;
     }
 
@@ -40,9 +39,9 @@
                 align-items: center;
 
                 @include mobile {
-                    visibility: visible;
-                    transition: visibility 0s, height 0.2s ease;
-                    height: 2rem;
+                    opacity: 1;
+                    max-height: 2rem;
+                    transition: opacity 0.25s ease, max-height 0.25s ease;
                     gap: 0.8rem;
                 }
 
@@ -74,9 +73,10 @@
                 gap: 0.8rem;
             }
 
-            &__icon {
+            &__icon > :first-child {
                 @include mobile {
-                    transition: visibility 0s, height 0.2s ease;
+                    max-height: 4.8rem;
+                    transition: opacity 0.2s ease, max-height 0.2s ease;
                 }
             }
         }
@@ -124,9 +124,14 @@
             }
         }
     }
-}
 
-.wallets-hide-details {
-    height: 0;
-    visibility: hidden;
+    &__hide-details {
+        max-height: 0;
+        opacity: 0;
+    }
+
+    &__hide-currency-icon > :first-child {
+        max-height: 0;
+        opacity: 0;
+    }
 }
diff --git a/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx b/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
 import classNames from 'classnames';
+import { useHistory, useLocation } from 'react-router-dom';
 import { useActiveWalletAccount } from '@deriv/api';
 import { WalletCardIcon } from '../../../../components/WalletCardIcon';
 import { WalletGradientBackground } from '../../../../components/WalletGradientBackground';
@@ -35,7 +35,7 @@ const WalletCashierHeader = ({ hideWalletDetails }: { hideWalletDetails: boolean
                     <div className='wallets-cashier-header__info__top-left'>
                         <div
                             className={classNames('wallets-cashier-header__info__top-left__details', {
-                                'wallets-hide-details': isMobile && hideWalletDetails,
+                                'wallets-cashier-header__hide-details': isMobile && hideWalletDetails,
                             })}
                         >
                             <h1 className='wallets-cashier-header__info__top-left__details__title'>
@@ -51,7 +51,7 @@ const WalletCashierHeader = ({ hideWalletDetails }: { hideWalletDetails: boolean
                         {data?.wallet_currency_type && (
                             <div
                                 className={classNames('wallets-cashier-header__info__top-right__icon', {
-                                    'wallets-hide-details': isMobile && hideWalletDetails,
+                                    'wallets-cashier-header__hide-currency-icon': isMobile && hideWalletDetails,
                                 })}
                             >
                                 <WalletCardIcon size='xl' type={data?.wallet_currency_type} />