[42069] Aizad: Creating Base Button for Wallets (binary-com#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
kate-deriv · Oct 13, 2023 · b79c9f8 · b79c9f8
1 parent c443ed7
commit b79c9f8
Show file tree

Hide file tree

Showing 23 changed files with 180 additions and 192 deletions.
diff --git a/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.scss b/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.scss
diff --git a/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.tsx b/packages/wallets/src/components/Base/PrimaryActionButton/PrimaryActionButton.tsx
diff --git a/packages/wallets/src/components/Base/PrimaryActionButton/index.ts b/packages/wallets/src/components/Base/PrimaryActionButton/index.ts
diff --git a/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.scss b/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.scss
diff --git a/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.tsx b/packages/wallets/src/components/Base/SecondaryActionButton/SecondaryActionButton.tsx
diff --git a/packages/wallets/src/components/Base/SecondaryActionButton/index.ts b/packages/wallets/src/components/Base/SecondaryActionButton/index.ts
diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/...ages/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
@@ -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
@@ -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
@@ -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
@@ -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;