From b79c9f8501e33a20820486f7d377536b53ac2ede Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>
Date: Fri, 13 Oct 2023 16:54:27 +0800
Subject: [PATCH] [42069] Aizad: Creating Base Button for Wallets (#10649)

* chore: create base button component for wallets

* chore: replace some of the components with WalletButton and added extra props

* fix: added more components with WalletButton and WalletText

* fix: resolve comments
---
 .../PrimaryActionButton.scss                  | 22 ------
 .../PrimaryActionButton.tsx                   | 16 ----
 .../Base/PrimaryActionButton/index.ts         |  1 -
 .../SecondaryActionButton.scss                | 11 ---
 .../SecondaryActionButton.tsx                 | 10 ---
 .../Base/SecondaryActionButton/index.ts       |  1 -
 .../Base/WalletButton/WalletButton.module.css | 75 +++++++++++++++++++
 .../Base/WalletButton/WalletButton.tsx        | 37 +++++++++
 .../src/components/Base/WalletButton/index.ts |  1 +
 .../Base/WalletText/WalletText.module.css     | 14 ++--
 .../components/Base/WalletText/WalletText.tsx |  6 +-
 packages/wallets/src/components/Base/index.ts |  3 +-
 .../OptionsAndMultipliersListing.tsx          | 10 ++-
 .../WalletListCardActions.tsx                 |  8 +-
 .../components/CTraderList/CTraderList.scss   | 11 ---
 .../components/CTraderList/CTraderList.tsx    | 10 ++-
 .../AddedMT5AccountsList.scss                 | 34 ---------
 .../AddedMT5AccountsList.tsx                  | 18 +++--
 .../AvailableMT5AccountsList.tsx              | 11 ++-
 .../AddedDxtradeAccountsList.scss             | 34 ---------
 .../AddedDxtradeAccountsList.tsx              | 19 +++--
 .../AvailableDxtradeAccountsList.tsx          | 10 +--
 .../MT5AccountTypeModal.tsx                   | 10 ++-
 23 files changed, 180 insertions(+), 192 deletions(-)
 delete mode 100644 packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.scss
 delete mode 100644 packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.tsx
 delete mode 100644 packages/wallets/src/components/Base/PrimaryActionButton/index.ts
 delete mode 100644 packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.scss
 delete mode 100644 packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.tsx
 delete mode 100644 packages/wallets/src/components/Base/SecondaryActionButton/index.ts
 create mode 100644 packages/wallets/src/components/Base/WalletButton/WalletButton.module.css
 create mode 100644 packages/wallets/src/components/Base/WalletButton/WalletButton.tsx
 create mode 100644 packages/wallets/src/components/Base/WalletButton/index.ts

diff --git a/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.scss b/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.scss
deleted file mode 100644
index a4021f55d36c..000000000000
--- a/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.wallets-primary-action-button {
-    display: flex;
-    height: 32px;
-    padding: 6px 16px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    background: #ff444f;
-    border: unset;
-    cursor: pointer;
-
-    &-disabled {
-        border: unset;
-        padding: 6px 16px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 4px;
-        background-color: #ccc;
-        color: #666;
-        cursor: not-allowed;
-    }
-}
diff --git a/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.tsx b/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.tsx
deleted file mode 100644
index 6159a6594d36..000000000000
--- a/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import './PrimaryActionButton.scss';
-
-type TProps = React.ComponentProps<'button'> & {
-    disabled?: boolean;
-};
-
-const PrimaryActionButton: React.FC<TProps> = ({ children, disabled, ...rest }) => {
-    return (
-        <button className={`wallets-primary-action-button${disabled ? '-disabled' : ''}`} {...rest}>
-            {children}
-        </button>
-    );
-};
-
-export default PrimaryActionButton;
diff --git a/packages/wallets/src/components/Base/PrimaryActionButton/index.ts b/packages/wallets/src/components/Base/PrimaryActionButton/index.ts
deleted file mode 100644
index 32af6eae0805..000000000000
--- a/packages/wallets/src/components/Base/PrimaryActionButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as PrimaryActionButton } from './PrimaryActionButton';
diff --git a/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.scss b/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.scss
deleted file mode 100644
index c08995472b8e..000000000000
--- a/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.wallets-secondary-action-button {
-    display: flex;
-    height: 32px;
-    padding: 6px 16px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    background: rgba(255, 68, 79, 0.16);
-    border: unset;
-    cursor: pointer;
-}
diff --git a/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.tsx b/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.tsx
deleted file mode 100644
index 26c69685b98b..000000000000
--- a/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import './SecondaryActionButton.scss';
-
-const SecondaryActionButton: React.FC<React.ComponentProps<'button'>> = ({ children, ...rest }) => (
-    <button className='wallets-secondary-action-button' {...rest}>
-        {children}
-    </button>
-);
-
-export default SecondaryActionButton;
diff --git a/packages/wallets/src/components/Base/SecondaryActionButton/index.ts b/packages/wallets/src/components/Base/SecondaryActionButton/index.ts
deleted file mode 100644
index 5ab037e89913..000000000000
--- a/packages/wallets/src/components/Base/SecondaryActionButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SecondaryActionButton } from './SecondaryActionButton';
diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css b/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css
new file mode 100644
index 000000000000..75bf65e790c8
--- /dev/null
+++ b/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css
@@ -0,0 +1,75 @@
+.wallets-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.8rem;
+    cursor: pointer;
+    &:disabled {
+        opacity: 0.32;
+        cursor: not-allowed;
+    }
+    &-size-sm {
+        padding: 0.3rem 0.8rem;
+        font-size: 1.2rem;
+        line-height: 1.8rem;
+    }
+    &-size-md {
+        height: 3.2rem;
+        padding: 0.6rem 1.6rem;
+        flex-shrink: 0;
+        font-size: 1.4rem;
+    }
+    &-size-lg {
+        height: 4rem;
+        padding: 1rem 1.6rem;
+        flex-shrink: 0;
+        font-size: 1.4rem;
+    }
+    &-variant-contained {
+        border: none;
+    }
+    &-variant-outlined {
+        border: 1px solid var(--system-light-3-less-prominent-text, #999);
+        background: none;
+        &:hover {
+            background: rgba(0, 0, 0, 0.08);
+        }
+    }
+    &-variant-text {
+        background: none;
+        border: none;
+        &:hover {
+            background: rgba(255, 68, 79, 0.08);
+        }
+    }
+    &-rounded-default {
+        border-radius: 0.4rem;
+    }
+    &-rounded-full {
+        border-radius: 6.4rem;
+    }
+    &-color-primary {
+        background: var(--brand-coral, #ff444f);
+        &:hover {
+            background: var(--button-primary-hover-light, #eb3e48);
+        }
+    }
+    &-color-primary-light {
+        background: var(--button-primary-light-default, rgba(255, 68, 79, 0.16));
+        &:hover {
+            background: var(--button-primary-light-hover, rgba(255, 68, 79, 0.24));
+        }
+    }
+    &-color-white {
+        background: var(--system-light-8-primary-background, #fff);
+        &:hover {
+            background: var(--system-light-5-active-background, #d6dadb);
+        }
+    }
+    &-color-black {
+        background: var(--system-dark-8-primary-background, #0e0e0e);
+        &:hover {
+            background: var(--system-dark-5-active-background, #323738);
+        }
+    }
+}
diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx b/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx
new file mode 100644
index 000000000000..adcadf7a8c00
--- /dev/null
+++ b/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx
@@ -0,0 +1,37 @@
+import React, { ComponentProps, CSSProperties } from 'react';
+import classNames from 'classnames';
+import styles from './WalletButton.module.css';
+
+interface WalletButtonProps extends ComponentProps<'button'> {
+    children: React.ReactNode;
+    color?: CSSProperties['color'] | 'primary-light' | 'primary';
+    isRounded?: boolean;
+    size?: 'lg' | 'md' | 'sm';
+    variant?: 'contained' | 'outlined' | 'text';
+}
+
+const WalletButton: React.FC<WalletButtonProps> = ({
+    children,
+    color = 'primary',
+    isRounded = false,
+    size = 'md',
+    variant = 'contained',
+    ...rest
+}) => {
+    const isContained = variant === 'contained';
+    const buttonClassNames = classNames(
+        styles[`wallets-button`],
+        (isContained && styles[`wallets-button-color-${color}`]) || '',
+        styles[`wallets-button-size-${size}`],
+        styles[`wallets-button-variant-${variant}`],
+        isRounded ? styles[`wallets-button-rounded-full`] : styles[`wallets-button-rounded-default`]
+    );
+
+    return (
+        <button className={buttonClassNames} {...rest}>
+            {children}
+        </button>
+    );
+};
+
+export default WalletButton;
diff --git a/packages/wallets/src/components/Base/WalletButton/index.ts b/packages/wallets/src/components/Base/WalletButton/index.ts
new file mode 100644
index 000000000000..ab467774c4f0
--- /dev/null
+++ b/packages/wallets/src/components/Base/WalletButton/index.ts
@@ -0,0 +1 @@
+export { default as WalletButton } from './WalletButton';
diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.module.css b/packages/wallets/src/components/Base/WalletText/WalletText.module.css
index 18c355e8c5bd..3e0db57eb16b 100644
--- a/packages/wallets/src/components/Base/WalletText/WalletText.module.css
+++ b/packages/wallets/src/components/Base/WalletText/WalletText.module.css
@@ -11,15 +11,15 @@
         font-size: 1.2rem;
     }
 
-    &-size-s {
+    &-size-sm {
         font-size: 1.4rem;
     }
 
-    &-size-m {
+    &-size-md {
         font-size: 1.6rem;
     }
 
-    &-size-l {
+    &-size-lg {
         font-size: 1.8rem;
     }
 
@@ -40,15 +40,11 @@
     }
 
     &-weight-normal {
-        font-weight: normal;
+        font-weight: 400;
     }
 
     &-weight-bold {
-        font-weight: bold;
-    }
-
-    &-weight-bolder {
-        font-weight: bolder;
+        font-weight: 700;
     }
 
     &-align-left {
diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.tsx b/packages/wallets/src/components/Base/WalletText/WalletText.tsx
index bf4fd68d6dec..6986bed51649 100644
--- a/packages/wallets/src/components/Base/WalletText/WalletText.tsx
+++ b/packages/wallets/src/components/Base/WalletText/WalletText.tsx
@@ -6,15 +6,15 @@ interface WalletTextProps {
     align?: 'center' | 'left' | 'right';
     children: React.ReactNode;
     color?: 'black' | 'error' | 'general' | 'primary' | 'success' | 'warning' | 'white';
-    size?: '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'l' | 'm' | 's' | 'xl' | 'xs';
-    weight?: 'bold' | 'bolder' | 'normal';
+    size?: '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+    weight?: 'bold' | 'normal';
 }
 
 const WalletText: React.FC<WalletTextProps> = ({
     align = 'left',
     children,
     color = 'general',
-    size = 'm',
+    size = 'md',
     weight = 'normal',
 }) => {
     const textClassNames = classNames(
diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts
index 1a91120d9e8c..0e18cd84006d 100644
--- a/packages/wallets/src/components/Base/index.ts
+++ b/packages/wallets/src/components/Base/index.ts
@@ -1,9 +1,8 @@
 export * from './InlineMessage';
 export * from './ModalStepWrapper';
 export * from './ModalWrapper';
-export * from './PrimaryActionButton';
 export * from './ProgressBar';
-export * from './SecondaryActionButton';
 export * from './Tabs';
+export * from './WalletButton';
 export * from './WalletClipboard';
 export * from './WalletText';
diff --git a/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
index d31bcaca3c28..a180761532ff 100644
--- a/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
+++ b/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
@@ -5,7 +5,7 @@ import IcAppstoreDerivBot from '../../public/images/ic-appstore-deriv-bot.svg';
 import IcAppstoreDerivGo from '../../public/images/ic-appstore-deriv-go.svg';
 import IcAppstoreDerivTrader from '../../public/images/ic-appstore-deriv-trader.svg';
 import IcAppstoreSmartTrader from '../../public/images/ic-appstore-smart-trader.svg';
-import { PrimaryActionButton } from '../Base';
+import { WalletButton, WalletText } from '../Base';
 import { TradingAccountCard } from '../TradingAccountCard';
 import './OptionsAndMultipliersListing.scss';
 
@@ -72,9 +72,11 @@ const OptionsAndMultipliersListing = () => {
                             <div className='wallets-options-and-multipliers-listing__content__icon'>{account.icon}</div>
                         )}
                         trailing={() => (
-                            <PrimaryActionButton>
-                                <p className='wallets-options-and-multipliers-listing__content__text'>Open</p>
-                            </PrimaryActionButton>
+                            <WalletButton>
+                                <WalletText align='center' color='white' size='sm' weight='bold'>
+                                    Get
+                                </WalletText>
+                            </WalletButton>
                         )}
                     >
                         <div className='wallets-options-and-multipliers-listing__content__details'>
diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
index c46a110353f1..9ce58fa518c3 100644
--- a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
+++ b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
@@ -6,6 +6,7 @@ import IcCashierAdd from '../../public/images/ic-cashier-deposit.svg';
 import IcCashierStatement from '../../public/images/ic-cashier-statement.svg';
 import IcCashierTransfer from '../../public/images/ic-cashier-transfer.svg';
 import IcCashierWithdrawal from '../../public/images/ic-cashier-withdrawal.svg';
+import { WalletButton } from '../Base';
 import './WalletListCardActions.scss';
 
 const getWalletHeaderButtons = (isDemo: boolean, handleAction?: () => void) => {
@@ -77,13 +78,14 @@ const WalletListCardActions: React.FC<TProps> = ({ isActive, isDemo, loginid })
     return (
         <div className='wallets-header__actions'>
             {getWalletHeaderButtons(isDemo).map(button => (
-                <button
-                    className='wallets-header__button'
+                <WalletButton
+                    isRounded
                     key={button.name}
                     onClick={async () => {
                         await switchAccount(loginid);
                         history.push(`/wallets/cashier/${button.name}`);
                     }}
+                    variant='outlined'
                 >
                     {button.icon}
                     <span
@@ -93,7 +95,7 @@ const WalletListCardActions: React.FC<TProps> = ({ isActive, isDemo, loginid })
                     >
                         {button.text}
                     </span>
-                </button>
+                </WalletButton>
             ))}
         </div>
     );
diff --git a/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.scss b/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.scss
index 7b06672664e1..44fa6e562f6e 100644
--- a/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.scss
+++ b/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.scss
@@ -38,15 +38,4 @@
             }
         }
     }
-
-    &__text {
-        color: #ff444f;
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
 }
diff --git a/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx b/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx
index 715a4fc096c6..72969a9de1a4 100644
--- a/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx
+++ b/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { TradingAccountCard } from '../../../../components';
-import { SecondaryActionButton } from '../../../../components/Base';
+import { WalletButton, WalletText } from '../../../../components/Base';
 import CTrader from '../../../../public/images/ctrader.svg';
 import './CTraderList.scss';
 
@@ -25,9 +25,11 @@ const CTraderList: React.FC = () => {
                         key={`ctrader--${account.title}`}
                         leading={() => <div className='wallets-ctrader__content__icon'>{account.icon}</div>}
                         trailing={() => (
-                            <SecondaryActionButton>
-                                <p className='wallets-ctrader__text'>Get</p>
-                            </SecondaryActionButton>
+                            <WalletButton color='primary-light'>
+                                <WalletText align='center' color='error' size='sm' weight='bold'>
+                                    Get
+                                </WalletText>
+                            </WalletButton>
                         )}
                     >
                         <div className='wallets-ctrader__content__details'>
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss
index 024bb947eb00..a9b3db273fb1 100644
--- a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss
+++ b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss
@@ -1,38 +1,4 @@
 .wallets-added-mt5 {
-    &__transfer_button {
-        display: flex;
-        height: 32px;
-        padding: 6px 16px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 4px;
-        border: 1px solid var(--system-light-3-less-prominent-text, #999);
-        cursor: pointer;
-        background: #fff;
-    }
-
-    &__transfer_text {
-        color: var(--system-light-1-prominent-text, #333);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
-
-    &__open_text {
-        color: var(--system-dark-1-prominent-text, #fff);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
-
     &__actions {
         display: flex;
         flex-direction: column;
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx
index 076e5e0febc9..9170ff1b02fe 100644
--- a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx
+++ b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useMT5AccountsList } from '@deriv/api';
-import { PrimaryActionButton } from '../../../../../components/Base';
+import { WalletButton, WalletText } from '../../../../../components/Base';
 import { TradingAccountCard } from '../../../../../components/TradingAccountCard';
 import DerivedMT5 from '../../../../../public/images/mt5-derived.svg';
 import FinancialMT5 from '../../../../../public/images/mt5-financial.svg';
@@ -31,12 +31,16 @@ const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
             )}
             trailing={() => (
                 <div className='wallets-added-mt5__actions'>
-                    <PrimaryActionButton className='wallets-added-mt5__transfer_button'>
-                        <p className='wallets-added-mt5__transfer_text'>Transfer</p>
-                    </PrimaryActionButton>
-                    <PrimaryActionButton>
-                        <p className='wallets-added-mt5__open_text'>Open</p>
-                    </PrimaryActionButton>
+                    <WalletButton variant='outlined'>
+                        <WalletText align='center' size='sm' weight='bold'>
+                            Transfer
+                        </WalletText>
+                    </WalletButton>
+                    <WalletButton>
+                        <WalletText align='center' color='white' size='sm' weight='bold'>
+                            Open
+                        </WalletText>
+                    </WalletButton>
                 </div>
             )}
         >
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
index 99da7ac07d15..618599251f0b 100644
--- a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
+++ b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSortedMT5Accounts } from '@deriv/api';
-import { SecondaryActionButton, TradingAccountCard } from '../../../../../components';
+import { TradingAccountCard, WalletButton, WalletText } from '../../../../../components';
 import { useModal } from '../../../../../components/ModalProvider';
 import DerivedMT5 from '../../../../../public/images/mt5-derived.svg';
 import FinancialMT5 from '../../../../../public/images/mt5-financial.svg';
@@ -40,11 +40,14 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
                 </div>
             )}
             trailing={() => (
-                <SecondaryActionButton
+                <WalletButton
+                    color='primary-light'
                     onClick={() => show(<MT5PasswordModal marketType={account?.market_type || 'synthetic'} />)}
                 >
-                    <p className='wallets-available-mt5__text'>Get</p>
-                </SecondaryActionButton>
+                    <WalletText align='center' color='error' size='sm' weight='bold'>
+                        Get
+                    </WalletText>
+                </WalletButton>
             )}
         >
             <div className='wallets-available-mt5__details'>
diff --git a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss
index 2b25347715bf..f9e8899fef73 100644
--- a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss
+++ b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss
@@ -1,38 +1,4 @@
 .wallets-available-derivx {
-    &__transfer_button {
-        display: flex;
-        height: 32px;
-        padding: 6px 16px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 4px;
-        border: 1px solid var(--system-light-3-less-prominent-text, #999);
-        cursor: pointer;
-        background: #fff;
-    }
-
-    &__transfer_text {
-        color: var(--system-light-1-prominent-text, #333);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
-
-    &__open_text {
-        color: var(--system-dark-1-prominent-text, #fff);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
-
     &__actions {
         display: flex;
         flex-direction: column;
diff --git a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
index 76b8df0e8e1b..e6166ec1f807 100644
--- a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
+++ b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useDxtradeAccountsList } from '@deriv/api';
-import { PrimaryActionButton, TradingAccountCard } from '../../../../../../components';
+import { TradingAccountCard } from '../../../../../../components';
+import { WalletButton, WalletText } from '../../../../../../components/Base';
 import DerivX from '../../../../../../public/images/derivx.svg';
 import './AddedDxtradeAccountsList.scss';
 
@@ -16,12 +17,16 @@ const AddedDxtradeAccountsList: React.FC = () => {
             )}
             trailing={() => (
                 <div className='wallets-available-derivx__actions'>
-                    <PrimaryActionButton className='wallets-available-derivx__transfer_button'>
-                        <p className='wallets-available-derivx__transfer_text'>Transfer</p>
-                    </PrimaryActionButton>
-                    <PrimaryActionButton>
-                        <p className='wallets-available-derivx__open_text'>Open</p>
-                    </PrimaryActionButton>
+                    <WalletButton variant='outlined'>
+                        <WalletText align='center' size='sm' weight='bold'>
+                            Transfer
+                        </WalletText>
+                    </WalletButton>
+                    <WalletButton>
+                        <WalletText align='center' color='white' size='sm' weight='bold'>
+                            Open
+                        </WalletText>
+                    </WalletButton>
                 </div>
             )}
         >
diff --git a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
index 9593257e7ac4..5655f7c960fa 100644
--- a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
+++ b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { TradingAccountCard } from '../../../../../../components';
-import { SecondaryActionButton, WalletText } from '../../../../../../components/Base';
+import { WalletButton, WalletText } from '../../../../../../components/Base';
 import { useModal } from '../../../../../../components/ModalProvider';
 import DerivX from '../../../../../../public/images/derivx.svg';
 import { DxtradeEnterPasswordModal } from '../../../../modals';
@@ -17,16 +17,16 @@ const AvailableDxtradeAccountsList: React.FC = () => {
                 </div>
             )}
             trailing={() => (
-                <SecondaryActionButton onClick={() => show(<DxtradeEnterPasswordModal />)}>
-                    <WalletText color='error' size='s' weight='bold'>
+                <WalletButton color='primary-light' onClick={() => show(<DxtradeEnterPasswordModal />)}>
+                    <WalletText align='center' color='error' size='sm' weight='bold'>
                         Get
                     </WalletText>
-                </SecondaryActionButton>
+                </WalletButton>
             )}
         >
             <div className='wallets-available-dxtrade__details'>
                 <p className='wallets-available-dxtrade__details-title'>
-                    <WalletText size='s' weight='bold'>
+                    <WalletText size='sm' weight='bold'>
                         Deriv X
                     </WalletText>
                 </p>
diff --git a/packages/wallets/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx b/packages/wallets/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx
index e5f5d4340a46..7b5741108875 100644
--- a/packages/wallets/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ModalStepWrapper, PrimaryActionButton } from '../../../../components/Base';
+import { ModalStepWrapper, WalletButton, WalletText } from '../../../../components/Base';
 import { JurisdictionModal } from '../../../../components/JurisdictionModal';
 import { useModal } from '../../../../components/ModalProvider';
 import { MT5AccountType } from '../../screens';
@@ -13,7 +13,7 @@ const MT5AccountTypeModal = () => {
     return (
         <ModalStepWrapper
             renderFooter={() => (
-                <PrimaryActionButton
+                <WalletButton
                     disabled={!selectedMarketType}
                     onClick={() => {
                         setModalState({
@@ -22,8 +22,10 @@ const MT5AccountTypeModal = () => {
                         show(<JurisdictionModal />);
                     }}
                 >
-                    <p className='wallets-get-more-mt5-accounts-text'>Next</p>
-                </PrimaryActionButton>
+                    <WalletText align='center' color='white' size='sm' weight='bold'>
+                        Get
+                    </WalletText>
+                </WalletButton>
             )}
             title='Select Deriv MT5’s account type'
         >