[42069] Aizad: Creating Base Button for Wallets

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: 8px;
+    cursor: pointer;
+    &:disabled {
+        opacity: 0.32;
+        cursor: not-allowed;
+    }
+    &-size-sm {
+        padding: 3px 8px;
+        font-size: 12px;
+        line-height: 18px;
+    }
+    &-size-md {
+        height: 32px;
+        padding: 6px 16px;
+        flex-shrink: 0;
+        font-size: 14px;
+    }
+    &-size-lg {
+        height: 40px;
+        padding: 10px 16px;
+        flex-shrink: 0;
+        font-size: 14px;
+    }
+    &-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: 4px;
+    }
+    &-rounded-full {
+        border-radius: 64px;
+    }
+    &-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);
+        }
+    }
+}

packages/wallets/src/components/Base/WalletButton/WalletButton.tsx

@@ -0,0 +1,39 @@
+import React, { ComponentProps, CSSProperties } from 'react';
+import classNames from 'classnames';
+import styles from './WalletButton.module.css';
+
+interface WalletButtonProps extends ComponentProps<'button'> {
+    children: React.ReactNode;
+    // eslint-disable-next-line @typescript-eslint/sort-type-constituents
+    color?: CSSProperties['color'] | 'primary' | 'primary-light';
+    isRounded?: boolean;
+    // eslint-disable-next-line @typescript-eslint/sort-type-constituents
+    size?: 'sm' | 'md' | 'lg';
+    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;

packages/wallets/src/components/Base/WalletButton/index.ts

@@ -0,0 +1 @@
+export { default as WalletButton } from './WalletButton';

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 {

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(

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';

packages/wallets/src/components/ExternalTradingPlatforms/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;

packages/wallets/src/components/ExternalTradingPlatforms/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDxtradeAccountsList } from '@deriv/api';
 import DerivX from '../../../public/images/derivx.svg';
-import { PrimaryActionButton } from '../../Base';
+import { WalletButton, WalletText } from '../../Base';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './AddedDxtradeAccountsList.scss';
 
@@ -17,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>
             )}
         >

packages/wallets/src/components/ExternalTradingPlatforms/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;

packages/wallets/src/components/ExternalTradingPlatforms/AddedMT5AccountsList/AddedMT5AccountsList.tsx

@@ -3,7 +3,7 @@ import { useMT5AccountsList } from '@deriv/api';
 import DerivedMT5 from '../../../public/images/mt5-derived.svg';
 import FinancialMT5 from '../../../public/images/mt5-financial.svg';
 import SwapFreeMT5 from '../../../public/images/mt5-swap-free.svg';
-import { PrimaryActionButton } from '../../Base';
+import { WalletButton, WalletText } from '../../Base';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './AddedMT5AccountsList.scss';
 
@@ -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>
             )}
         >