From 22172d0fff7bc6ece24197fb46b364d964d1995c Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:38:29 +0800
Subject: [PATCH] [WALL] Aizad/WALL-3698/Update Wallet Header  (#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
---
 .../Base/WalletButton/WalletButton.scss       |  4 +--
 .../Base/WalletButton/WalletButton.tsx        |  2 +-
 .../WalletsCarouselLoader.scss                |  7 ++--
 .../WalletListCardActions.scss                |  8 ++++-
 .../WalletListCardActions.tsx                 | 33 ++++++++++++-------
 5 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.scss b/packages/wallets/src/components/Base/WalletButton/WalletButton.scss
index de65a9dd015b..e6903331b632 100644
--- 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
index 7f95ff28f637..e5a551508092 100644
--- 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/packages/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.scss b/packages/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.scss
index 19d5eef2241f..8a118c115a53 100644
--- a/packages/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.scss
+++ b/packages/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
index d8bf49f7a892..e8f8b398a358 100644
--- 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
index e0961516f7d0..a0d973139ea3 100644
--- 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>