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; + rounded?: Extract; size?: Extract; textSize?: ComponentProps['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: , + className: isDemo ? 'wallets-mobile-actions-content-icon' : 'wallets-mobile-actions-content-icon--primary', + color: isDemo ? 'transparent' : 'primary', + icon: isDemo ? : , name: isDemo ? 'reset-balance' : 'deposit', text: isDemo ? 'Reset balance' : 'Deposit', + variant: isDemo ? 'outlined' : 'contained', }, { - icon: , + className: 'wallets-mobile-actions-content-icon', + color: 'white', + icon: , name: 'withdraw', text: 'Withdraw', + variant: 'outlined', }, { - icon: , + className: 'wallets-mobile-actions-content-icon', + color: 'white', + icon: , name: 'transfer', text: 'Transfer', + variant: 'outlined', }, ] as const; @@ -55,10 +67,9 @@ const WalletListCardActions = () => {
{ 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 : ''}