[WALL] Aizad/WALL-3698/Update Wallet Header (deriv-com#14493)

* chore: updated wallet header icons according to new desigin * chore: make changes to WalletButton * chore: fix testcases for WalletListCardActions * chore: update stylings for Loading state for carousel * fix: resolve comments * chore: resolve comments * fix: retrigger test cases * fix: retrigger process
heorhi-deriv · Apr 5, 2024 · 22172d0 · 22172d0
1 parent d91473c
commit 22172d0
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 17 deletions.
diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.scss b/packages/wallets/src/components/Base/WalletButton/WalletButton.scss
@@ -86,10 +86,10 @@ $size-map: (
             border-radius: 0.4rem;
         }
         &--md {
-            border-radius: 6.4rem;
+            border-radius: 0.8rem;
         }
         &--lg {
-            border-radius: 100%;
+            border-radius: 1.2rem;
         }
     }
 

diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx b/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx
@@ -16,7 +16,7 @@ interface WalletButtonProps {
     isFullWidth?: boolean;
     isLoading?: boolean;
     onClick?: ComponentProps<'button'>['onClick'];
-    rounded?: Extract<TGenericSizes, 'md' | 'sm'>;
+    rounded?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
     size?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
     textSize?: ComponentProps<typeof WalletText>['size'];
     type?: ComponentProps<'button'>['type'];

diff --git a/...es/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.scss b/...es/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.scss
@@ -9,13 +9,16 @@
 
     &__actions {
         display: flex;
-        justify-content: space-evenly;
+        padding-left: 2.4rem;
+        padding-right: 2.4rem;
+        gap: 3.2rem;
+        justify-content: center;
         padding-inline: 2.4rem;
 
         &-button {
             width: 4.2rem;
             height: 4.2rem;
-            border-radius: 100%;
+            border-radius: 1.2rem;
         }
     }
 

diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.scss b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.scss
@@ -68,7 +68,13 @@
         gap: 0.4rem;
 
         &-icon {
-            border: 0.1rem solid var(--system-light-5-active-background, #d6dadb);
+            border-radius: 1.2rem;
+            border: 0.1rem solid var(--text-general, #333333);
+
+            &--primary {
+                border-radius: 1.2rem;
+                border-collapse: collapse;
+            }
         }
     }
 }
diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
@@ -1,29 +1,41 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useActiveWalletAccount } from '@deriv/api-v2';
+import {
+    LabelPairedArrowsRotateMdBoldIcon,
+    LabelPairedArrowUpArrowDownMdBoldIcon,
+    LabelPairedMinusMdBoldIcon,
+    LabelPairedPlusMdBoldIcon,
+} from '@deriv/quill-icons';
 import useDevice from '../../hooks/useDevice';
-import IcCashierAdd from '../../public/images/ic-cashier-deposit.svg';
-import IcCashierTransfer from '../../public/images/ic-cashier-transfer.svg';
-import IcCashierWithdrawal from '../../public/images/ic-cashier-withdrawal.svg';
 import { IconButton, WalletButton, WalletText } from '../Base';
 import './WalletListCardActions.scss';
 
 const getWalletHeaderButtons = (isDemo?: boolean) => {
     const buttons = [
         {
-            icon: <IcCashierAdd />,
+            className: isDemo ? 'wallets-mobile-actions-content-icon' : 'wallets-mobile-actions-content-icon--primary',
+            color: isDemo ? 'transparent' : 'primary',
+            icon: isDemo ? <LabelPairedArrowsRotateMdBoldIcon /> : <LabelPairedPlusMdBoldIcon fill='#FFF' />,
             name: isDemo ? 'reset-balance' : 'deposit',
             text: isDemo ? 'Reset balance' : 'Deposit',
+            variant: isDemo ? 'outlined' : 'contained',
         },
         {
-            icon: <IcCashierWithdrawal />,
+            className: 'wallets-mobile-actions-content-icon',
+            color: 'white',
+            icon: <LabelPairedMinusMdBoldIcon />,
             name: 'withdraw',
             text: 'Withdraw',
+            variant: 'outlined',
         },
         {
-            icon: <IcCashierTransfer />,
+            className: 'wallets-mobile-actions-content-icon',
+            color: 'white',
+            icon: <LabelPairedArrowUpArrowDownMdBoldIcon />,
             name: 'transfer',
             text: 'Transfer',
+            variant: 'outlined',
         },
     ] as const;
 
@@ -55,10 +67,9 @@ const WalletListCardActions = () => {
                         <div className='wallets-mobile-actions-content' key={button.name}>
                             <IconButton
                                 aria-label={button.name}
-                                className='wallets-mobile-actions-content-icon'
-                                color='transparent'
+                                className={button.className}
+                                color={button.color}
                                 icon={button.icon}
-                                isRound
                                 onClick={() => {
                                     history.push(`/wallets/cashier/${button.name}`);
                                 }}
@@ -81,8 +92,8 @@ const WalletListCardActions = () => {
                     onClick={() => {
                         history.push(`/wallets/cashier/${button.name}`);
                     }}
-                    rounded='md'
-                    variant='outlined'
+                    rounded='lg'
+                    variant={button.variant}
                 >
                     {isActive ? button.text : ''}
                 </WalletButton>