[Wallet] george / WALL-2247 / cashier header improvements (deriv-com#…

…10961) * feat: ✨ refactor cashier header, add watermark, add tabs icon, add autoscroll to active tab * style: 💄 refactor classnames * style: 💄 fix watermark background * fix: 🚑 styles fix, fix icons * fix: 🚑 sonarcloud issue * refactor: 💄 replace elements with modifiers, replace icons (deposit and withdraw) * fix: 🔥 removed unused icon * refactor: ♻️ rename icon name
heorhi-deriv · Oct 27, 2023 · 9177d92 · 9177d92
1 parent 6c89b4d
commit 9177d92
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 148 deletions.
diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.scss b/packages/wallets/src/components/Base/WalletText/WalletText.scss
@@ -9,6 +9,7 @@ $color-map: (
     less-prominent: #999999,
     red: #ff444f,
     blue: #377cfc,
+    system-dark-2-general-text: #c2c2c2,
 );
 
 $desktop-font-size-map: (

diff --git a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss
@@ -1142,20 +1142,6 @@
                         )
                         #212329;
                     border-radius: 0.8rem;
-                    &:before {
-                        content: '';
-                        display: block;
-                        position: absolute;
-                        left: 0;
-                        top: 0;
-                        width: 100%;
-                        height: 100%;
-                        background-image: url('../../public/images/wallet-demo-bg-light.svg');
-                        background-repeat: repeat;
-                        background-size: 7rem;
-                        mix-blend-mode: overlay;
-                        opacity: 0.24;
-                    }
                 }
                 &-dark {
                     background: radial-gradient(
@@ -1189,5 +1175,22 @@
                 }
             }
         }
+        &-desktop-header-light,
+        &-mobile-header-light,
+        &-mobile-card-light {
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                inset: 0;
+                width: 100%;
+                height: 100%;
+                background-image: url('../../public/images/wallet-demo-bg-light.svg');
+                background-repeat: repeat;
+                background-size: 7rem;
+                mix-blend-mode: overlay;
+                opacity: 0.24;
+            }
+        }
     }
 }
diff --git a/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.scss b/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.scss
@@ -22,8 +22,7 @@
                 content: '';
                 display: block;
                 position: absolute;
-                left: 0;
-                top: 0;
+                inset: 0;
                 width: 100%;
                 height: 100%;
                 border-radius: 1.6rem;

diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts
@@ -9,6 +9,7 @@ export * from './TradingAccountCard';
 export * from './WalletCard';
 export * from './WalletCardIcon';
 export * from './WalletError';
+export * from './WalletGradientBackground';
 export * from './WalletListCard';
 export * from './WalletListCardActions';
 export * from './WalletListCardBadge';

diff --git a/...ages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss b/...ages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss
@@ -1,5 +1,8 @@
 .wallets-cashier-header {
+    width: 100%;
+    max-width: 128rem;
     height: 16rem;
+    margin: 0 auto;
     padding-top: 2.4rem;
     position: relative;
     overflow: hidden;
@@ -9,83 +12,83 @@
     gap: 1.6rem;
 
     @include mobile {
-        padding-top: 0rem;
+        padding-top: 0;
         height: fit-content;
     }
 
-    &__close-button {
-        all: unset;
-        cursor: pointer;
-    }
-
     &__info {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding-inline: 2.4rem;
+        padding-inline: 4rem;
 
         @include mobile {
             padding: 1.6rem 1.6rem 0rem;
         }
+    }
 
-        &__top-left {
-            display: flex;
-            flex-direction: column;
-            gap: 0.6rem;
-
-            &__details {
-                display: flex;
-                gap: 2.4rem;
-                align-items: center;
-
-                @include mobile {
-                    opacity: 1;
-                    max-height: 2rem;
-                    transition: opacity 0.25s ease, max-height 0.25s ease;
-                    gap: 0.8rem;
-                }
-
-                &__title {
-                    font-size: 1.6rem;
-
-                    @include mobile {
-                        font-size: 1.4rem;
-                    }
-                }
-            }
+    &__top-left-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.6rem;
+    }
+
+    &__details {
+        display: flex;
+        gap: 2.4rem;
+        align-items: center;
 
-            &__balance {
-                font-size: 3.2rem;
-                font-weight: 700;
+        @include mobile {
+            opacity: 1;
+            max-height: 2rem;
+            transition: opacity 0.25s ease, max-height 0.25s ease;
+            gap: 0.8rem;
 
-                @include mobile {
-                    font-size: 1.8rem;
-                }
+            &--hide-details {
+                max-height: 0;
+                opacity: 0;
             }
         }
+    }
+
+    &__top-right-info {
+        display: flex;
+        gap: 1.6rem;
+        align-items: start;
+
+        @include mobile {
+            gap: 0.8rem;
+        }
+    }
 
-        &__top-right {
-            display: flex;
-            gap: 1.6rem;
-            align-items: start;
+    &__currency-icon {
+        @include mobile {
+            & > :first-child {
+                max-height: 4.8rem;
+                transition: opacity 0.2s ease, max-height 0.2s ease;
+            }
 
-            @include mobile {
-                gap: 0.8rem;
+            &--hide-currency-icon > :first-child {
+                max-height: 0;
+                opacity: 0;
             }
+        }
+    }
 
-            &__icon > :first-child {
-                @include mobile {
-                    max-height: 4.8rem;
-                    transition: opacity 0.2s ease, max-height 0.2s ease;
-                }
+    &__close-icon {
+        cursor: pointer;
+
+        &--white {
+            path {
+                fill: var(--light-8-primary-background, #fff);
             }
         }
     }
 
     &__tabs {
         display: flex;
         overflow-x: scroll;
-        padding-inline: 2.4rem;
+        padding-inline: 4rem;
         -ms-overflow-style: none;
         scrollbar-width: none;
 
@@ -96,42 +99,37 @@
         @include mobile {
             padding-inline: 1.6rem;
         }
+    }
 
-        &__tab {
-            all: unset;
-            display: flex;
-            width: 14.4rem;
-            height: 4.8rem;
-            padding: 0rem 1.6rem;
-            justify-content: center;
-            align-items: center;
-            gap: 0.8rem;
-            flex-shrink: 0;
-            font-size: 1.8rem;
-            text-transform: capitalize;
-            cursor: pointer;
-
-            @include mobile {
-                height: 4rem;
-                font-size: 1.2rem;
-                width: 8rem;
-            }
+    &__tab {
+        all: unset;
+        display: flex;
+        min-width: 11.2rem;
+        height: 4.8rem;
+        padding-inline: 1.6rem;
+        justify-content: center;
+        align-items: center;
+        gap: 0.8rem;
+        flex-shrink: 0;
+        cursor: pointer;
 
-            &--active {
-                border-radius: 1.6rem 1.6rem 0rem 0rem;
-                background-color: #ffffff;
-                font-weight: 700;
-            }
+        @include mobile {
+            height: 4rem;
+            min-width: 7.2rem;
+            padding-inline: 2.4rem;
         }
-    }
 
-    &__hide-details {
-        max-height: 0;
-        opacity: 0;
+        &--active {
+            border-radius: 1.6rem 1.6rem 0rem 0rem;
+            background: var(--light-8-primary-background, #fff);
+        }
     }
 
-    &__hide-currency-icon > :first-child {
-        max-height: 0;
-        opacity: 0;
+    &__tab-icon {
+        &--system-dark-2-general-text {
+            path {
+                fill: var(--system-dark-2-general-text, #c2c2c2);
+            }
+        }
     }
 }