thisyahlen/chore: code cleanup and change to WalletText (#10744)

* chore: code cleanup and change to WalletText * chore: update type to CSSProperties
binary-com · Oct 17, 2023 · c949695 · c949695 · vercel · Oct 17, 2023
1 parent 6db2163
commit c949695
Show file tree

Hide file tree

Showing 23 changed files with 163 additions and 214 deletions.
diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
@@ -19,9 +19,6 @@
     &__header {
         padding: 2rem;
         border-bottom: 2px solid #f2f3f4;
-        font-size: 16px;
-        font-weight: 700;
-        line-height: 24px; /* 150% */
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -32,7 +29,6 @@
 
         @include mobile {
             background-color: #ffffff;
-            font-size: 14px;
             position: relative;
             z-index: 99;
             width: 100%;

diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx
@@ -1,7 +1,9 @@
 import React, { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
+import useDevice from '../../../hooks/useDevice';
 import CloseIcon from '../../../public/images/close-icon.svg';
 import { useModal } from '../../ModalProvider';
+import { WalletText } from '../WalletText';
 import './ModalStepWrapper.scss';
 
 type TModalStepWrapperProps = {
@@ -17,6 +19,7 @@ const ModalStepWrapper: FC<PropsWithChildren<TModalStepWrapperProps>> = ({
     title,
 }) => {
     const { hide } = useModal();
+    const { isMobile } = useDevice();
 
     return (
         <div
@@ -25,7 +28,9 @@ const ModalStepWrapper: FC<PropsWithChildren<TModalStepWrapperProps>> = ({
             })}
         >
             <div className='wallets-modal-step-wrapper__header'>
-                {title}
+                <WalletText size={isMobile ? 'sm' : 'md'} weight='bold'>
+                    {title}
+                </WalletText>
                 <CloseIcon className='wallets-modal-step-wrapper__header-close-icon' onClick={hide} />
             </div>
             <div className='wallets-modal-step-wrapper__body'>

diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.module.css b/packages/wallets/src/components/Base/WalletText/WalletText.module.css
@@ -59,6 +59,54 @@
         text-align: right;
     }
 
+    &-line-height-3xs {
+        line-height: 1.2rem;
+    }
+
+    &-line-height-2xs {
+        line-height: 1.4rem;
+    }
+
+    &-line-height-xs {
+        line-height: 1.6rem;
+    }
+
+    &-line-height-sm {
+        line-height: 1.8rem;
+    }
+
+    &-line-height-md {
+        line-height: 2rem;
+    }
+
+    &-line-height-lg {
+        line-height: 2.2rem;
+    }
+
+    &-line-height-xl {
+        line-height: 2.4rem;
+    }
+
+    &-line-height-2xl {
+        line-height: 2.6rem;
+    }
+
+    &-line-height-3xl {
+        line-height: 2.8rem;
+    }
+
+    &-line-height-4xl {
+        line-height: 3rem;
+    }
+
+    &-line-height-5xl {
+        line-height: 3.2rem;
+    }
+
+    &-line-height-6xl {
+        line-height: 3.6rem;
+    }
+
     &-color-general {
         color: #333333;
     }
@@ -86,4 +134,8 @@
     &-color-black {
         color: #000000;
     }
+
+    &-color-blue {
+        color: #377cfc;
+    }
 }
diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.tsx b/packages/wallets/src/components/Base/WalletText/WalletText.tsx
@@ -1,31 +1,39 @@
-import React from 'react';
+import React, { ComponentProps, CSSProperties, ReactNode } from 'react';
 import classNames from 'classnames';
 import styles from './WalletText.module.css';
 
-interface WalletTextProps {
-    align?: 'center' | 'left' | 'right';
-    children: React.ReactNode;
-    color?: 'black' | 'error' | 'general' | 'primary' | 'success' | 'warning' | 'white';
+interface WalletTextProps extends ComponentProps<'span'> {
+    align?: CSSProperties['textAlign'];
+    children: ReactNode;
+    color?: CSSProperties['color'] | 'error' | 'general' | 'primary' | 'success' | 'warning';
+    lineHeight?: '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | '5xl' | '6xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
     size?: '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
-    weight?: 'bold' | 'normal';
+    weight?: CSSProperties['fontWeight'];
 }
 
 const WalletText: React.FC<WalletTextProps> = ({
     align = 'left',
     children,
     color = 'general',
+    lineHeight = 'md',
     size = 'md',
     weight = 'normal',
+    ...rest
 }) => {
     const textClassNames = classNames(
         styles.wallets,
         styles[`wallets-text-size-${size}`],
         styles[`wallets-text-weight-${weight}`],
         styles[`wallets-text-align-${align}`],
-        styles[`wallets-text-color-${color}`]
+        styles[`wallets-text-color-${color}`],
+        styles[`wallets-text-line-height-${lineHeight}`]
     );
 
-    return <span className={textClassNames}>{children}</span>;
+    return (
+        <span className={textClassNames} {...rest}>
+            {children}
+        </span>
+    );
 };
 
 export default WalletText;
diff --git a/...ges/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.scss b/...ges/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.scss
@@ -21,14 +21,6 @@
             margin: auto 1.8rem;
         }
 
-        &-title {
-            font-weight: bold;
-            font-size: 24px;
-            line-height: 36px;
-            display: flex;
-            align-items: center;
-        }
-
         &-subtitle {
             font-size: 16px;
             line-height: 24px;
@@ -50,34 +42,10 @@
             grid-template-columns: auto;
         }
 
-        &__text {
-            color: #fff;
-            text-align: center;
-
-            /* desktop/paragraph/P2 - bold */
-            font-size: 14px;
-            font-style: normal;
-            font-weight: 700;
-            line-height: 20px; /* 142.857% */
-        }
-
         &__details {
             flex-grow: 1;
-            &-title {
-                font-weight: bold;
-                font-size: 1.4rem;
-                line-height: 20px;
-            }
-
-            &-description {
-                font-size: 1.2rem;
-                line-height: 14px;
-
-                @include mobile {
-                    font-size: 1.4rem;
-                    line-height: 20px;
-                }
-            }
+            display: flex;
+            flex-direction: column;
         }
     }
 }
diff --git a/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
@@ -44,13 +44,11 @@ const OptionsAndMultipliersListing = () => {
         <div className='wallets-options-and-multipliers-listing'>
             <section className='wallets-options-and-multipliers-listing__header'>
                 {!isMobile && (
-                    <div className='wallets-options-and-multipliers-listing__header-title'>
-                        {/* TODO: Localization needed*/}
-                        <h1>Options & Multipliers</h1>
-                    </div>
+                    <WalletText align='center' lineHeight='6xl' size='3xl' weight='bold'>
+                        Options & Multipliers
+                    </WalletText>
                 )}
                 <div className='wallets-options-and-multipliers-listing__header-subtitle'>
-                    {/* TODO: Localization needed*/}
                     <h1>
                         Earn a range of payouts by correctly predicting market price movements with{' '}
                         <a className='wallets-options-and-multipliers-listing__header-subtitle__link' href='#' key={0}>
@@ -80,12 +78,13 @@ const OptionsAndMultipliersListing = () => {
                         )}
                     >
                         <div className='wallets-options-and-multipliers-listing__content__details'>
-                            <p className='wallets-options-and-multipliers-listing__content__details-title'>
+                            <WalletText size='sm' weight='bold'>
                                 {account.title}
-                            </p>
-                            <p className='wallets-options-and-multipliers-listing__content__details-description'>
+                            </WalletText>
+
+                            <WalletText lineHeight={isMobile ? 'md' : '2xs'} size={isMobile ? 'sm' : 'xs'}>
                                 {account.description}
-                            </p>
+                            </WalletText>
                         </div>
                     </TradingAccountCard>
                 ))}

diff --git a/packages/wallets/src/components/TradingAccountCard/TradingAccountCard.scss b/packages/wallets/src/components/TradingAccountCard/TradingAccountCard.scss
@@ -30,40 +30,4 @@
         height: 100%;
         border-bottom: 1px solid var(--system-light-6-hover-background, #e6e9e9);
     }
-
-    &__icon {
-        width: 48px;
-        height: 48px;
-    }
-
-    &__details {
-        flex-grow: 1;
-
-        &-title {
-            font-weight: bold;
-            font-size: 1.4rem;
-            line-height: 20px;
-        }
-
-        &-description {
-            font-size: 1.2rem;
-            line-height: 14px;
-
-            @include mobile {
-                font-size: 1.4rem;
-                line-height: 20px;
-            }
-        }
-    }
-
-    &__action {
-        outline: none;
-        border: none;
-        color: var(--system-dark-1-prominent-text, #fff);
-        font-weight: bold;
-        padding: 6px 16px;
-        border-radius: 4px;
-        background: var(--button-primary-default, #ff444f);
-        cursor: pointer;
-    }
 }
diff --git a/packages/wallets/src/components/WalletCard/WalletCard.scss b/packages/wallets/src/components/WalletCard/WalletCard.scss
@@ -24,20 +24,6 @@
             flex-direction: column;
             align-items: flex-start;
             gap: 0.4rem;
-
-            &--virtual {
-                color: #ffffff;
-            }
-
-            &__curency {
-                font-size: 8px;
-            }
-
-            &__balance {
-                font-size: 12px;
-                font-weight: 700;
-                line-height: 18px;
-            }
         }
 
         &-landing_company {

diff --git a/packages/wallets/src/components/WalletCard/WalletCard.tsx b/packages/wallets/src/components/WalletCard/WalletCard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useWalletAccountsList } from '@deriv/api';
+import { WalletText } from '../Base';
 import { WalletCardIcon } from '../WalletCardIcon';
 import { WalletGradientBackground } from '../WalletGradientBackground';
 import { WalletListCardBadge } from '../WalletListCardBadge';
@@ -31,9 +32,20 @@ const WalletCard: React.FC<TProps> = ({ account }) => {
                             )}
                         </div>
                     </div>
-                    <div className={`wallets-card__details__bottom${account?.is_virtual ? '--virtual' : ''}`}>
-                        <p className='wallets-card__details__bottom__currency'>{account?.currency} Wallet</p>
-                        <p className='wallets-card__details__bottom__balance'>{account?.display_balance}</p>
+                    <div className='wallets-card__details__bottom'>
+                        <WalletText color={account?.is_virtual ? 'white' : 'black'} lineHeight='xs' size='xs'>
+                            {account?.currency} Wallet
+                        </WalletText>
+                        <p className='wallets-card__details__bottom__balance'>
+                            <WalletText
+                                color={account?.is_virtual ? 'white' : 'black'}
+                                lineHeight='xs'
+                                size='xs'
+                                weight='bold'
+                            >
+                                {account?.display_balance}
+                            </WalletText>
+                        </p>
                     </div>
                 </div>
             </WalletGradientBackground>

diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.scss b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.scss
@@ -77,16 +77,5 @@
             border-radius: 16px;
             border: 1px solid var(--system-light-5-active-background, #d6dadb);
         }
-
-        &-text {
-            color: var(--system-light-1-prominent-text, #333);
-            text-align: center;
-
-            /* mobile/extra small/XS - regular */
-            font-size: 1rem;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 1.2rem; /* 150% */
-        }
     }
 }
diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
@@ -6,7 +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 { WalletButton, WalletText } from '../Base';
 import './WalletListCardActions.scss';
 
 const getWalletHeaderButtons = (isDemo: boolean, handleAction?: () => void) => {
@@ -68,7 +68,9 @@ const WalletListCardActions: React.FC<TProps> = ({ isActive, isDemo, loginid })
                             >
                                 {button.icon}
                             </button>
-                            <div className='wallets-mobile-actions-content-text'>{button.text}</div>
+                            <WalletText lineHeight='3xs' size='2xs'>
+                                {button.text}
+                            </WalletText>
                         </div>
                     ))}
                 </div>