aizad/feat: Improvements on Base Components (binary-com#10802)

* chore: updated modules css to SCSS * fix: change modules.css to scss for wallet text * fix: typo on wallet button * fix: typo on wallet button pt.2 * fix: implement responsive sizing in base and edit sizes in other components * fix: remove modules.css in wallettextfield component * fix: resolve comments added walletbutton inside of inputfield * fix: remove border radius lg in walletbutton * fix: removed classname inside of wallet text * fix: resolve conflicts * fix: resolve conflicts
likhith-deriv · Oct 25, 2023 · de10aba · de10aba
1 parent b970299
commit de10aba
Show file tree

Hide file tree

Showing 24 changed files with 385 additions and 371 deletions.
diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
@@ -543,7 +543,6 @@ export const icons =
         'IcPooSubmitted',
         'IcPooVerified',
         'IcPortfolio',
-        'IcPositionClosed',
         'IcPreviewIcon',
         'IcPreview',
         'IcProfile',
@@ -703,7 +702,6 @@ export const icons =
         'IcFlagPt',
         'IcFlagRu',
         'IcFlagTh',
-        'IcFlagTr',
         'IcFlagUk',
         'IcFlagVi',
         'IcFlagZhCn',

diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx
@@ -1,6 +1,5 @@
 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';
@@ -19,7 +18,6 @@ const ModalStepWrapper: FC<PropsWithChildren<TModalStepWrapperProps>> = ({
     title,
 }) => {
     const { hide } = useModal();
-    const { isMobile } = useDevice();
 
     return (
         <div
@@ -28,7 +26,7 @@ const ModalStepWrapper: FC<PropsWithChildren<TModalStepWrapperProps>> = ({
             })}
         >
             <div className='wallets-modal-step-wrapper__header'>
-                <WalletText size={isMobile ? 'sm' : 'md'} weight='bold'>
+                <WalletText size='md' weight='bold'>
                     {title}
                 </WalletText>
                 <CloseIcon className='wallets-modal-step-wrapper__header-close-icon' onClick={hide} />

diff --git a/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx b/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx
@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-import useDevice from '../../../hooks/useDevice';
 import ErrorCircleCrossmark from '../../../public/images/error-circle-crossmark.svg';
 import InfoCircleDots from '../../../public/images/info-circle-dots.svg';
 import SuccessCircleCheckmark from '../../../public/images/success-circle-checkmark.svg';
@@ -28,8 +27,6 @@ type TProps = {
 };
 
 const WalletAlertMessage: React.FC<TProps> = ({ children, message, type }) => {
-    const { isMobile } = useDevice();
-
     const Icon = typeMapper[type].icon;
     const color = typeMapper[type].color;
 
@@ -42,7 +39,7 @@ const WalletAlertMessage: React.FC<TProps> = ({ children, message, type }) => {
                 </div>
             </div>
             <div className='wallets-alert-message__message-container'>
-                <WalletText color={color} size={isMobile ? '2xs' : 'xs'}>
+                <WalletText color={color} size='xs'>
                     {message}
                 </WalletText>
             </div>

diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css b/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css
diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.scss b/packages/wallets/src/components/Base/WalletButton/WalletButton.scss
@@ -0,0 +1,95 @@
+$color-map: (
+    'primary': (
+        backgroundcolor: #ff444f,
+        hover: #eb3e48,
+    ),
+    'primary-light': (
+        backgroundcolor: #ff444f29,
+        hover: #ff444f3d,
+        color: #ff444f,
+    ),
+    'white': (
+        backgroundcolor: #fff,
+        hover: #d6dadb,
+    ),
+    'black': (
+        backgroundcolor: #0e0e0e,
+        hover: #323738,
+    ),
+);
+
+$size-map: (
+    'sm': (
+        height: auto,
+        padding: 0.3rem 0.8rem,
+    ),
+    'md': (
+        height: 3.2rem,
+        padding: 0.6rem 1.6rem,
+    ),
+);
+
+.wallets-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.8rem;
+    cursor: pointer;
+
+    &:disabled {
+        opacity: 0.32;
+        cursor: not-allowed;
+    }
+
+    @each $size, $values in $size-map {
+        &__size--#{$size} {
+            padding: map-get($values, padding);
+            height: map-get($values, height);
+        }
+    }
+
+    @each $color, $values in $color-map {
+        &__color--#{$color} {
+            background-color: map-get($values, backgroundcolor);
+            &:hover {
+                background-color: map-get($values, hover);
+            }
+        }
+    }
+
+    &__variant {
+        &--contained {
+            border: none;
+        }
+        &--outlined {
+            border: 1px solid var(--system-light-3-less-prominent-text, #999);
+            background: none;
+            &:hover {
+                background: #00000014;
+            }
+        }
+        &--ghost {
+            background: none;
+            border: none;
+            &:hover {
+                background: #ff444f14;
+            }
+        }
+    }
+
+    &__rounded {
+        &--sm {
+            border-radius: 0.4rem;
+        }
+        &--md {
+            border-radius: 6.4rem;
+        }
+        &--lg {
+            border-radius: 100%;
+        }
+    }
+
+    &__full-width {
+        width: 100%;
+    }
+}
diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx b/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx
@@ -1,28 +1,33 @@
-import React, { ButtonHTMLAttributes, ReactElement } from 'react';
+import React, { ComponentProps, CSSProperties, ReactElement } from 'react';
 import classNames from 'classnames';
 import { TGenericSizes } from '../types';
 import { WalletText } from '../WalletText';
-import styles from './WalletButton.module.css';
+import './WalletButton.scss';
 
-interface WalletButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    color?: 'black' | 'primary-light' | 'primary' | 'white';
+type TVariant = 'contained' | 'ghost' | 'outlined';
+
+interface WalletButtonProps {
+    color?: CSSProperties['color'] | 'primary-light' | 'primary';
+    disabled?: ComponentProps<'button'>['disabled'];
     icon?: ReactElement;
     isFullWidth?: boolean;
-    isRounded?: boolean;
+    onClick?: ComponentProps<'button'>['onClick'];
+    rounded?: Extract<TGenericSizes, 'md' | 'sm'>;
     size?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
     text?: React.ReactNode;
-    variant?: 'contained' | 'ghost' | 'outlined';
+    variant?: TVariant;
 }
 
 const WalletButton: React.FC<WalletButtonProps> = ({
     color = 'primary',
+    disabled = false,
     icon,
     isFullWidth = false,
-    isRounded = false,
+    onClick,
+    rounded = 'sm',
     size = 'md',
     text,
     variant = 'contained',
-    ...rest
 }) => {
     const isContained = variant === 'contained';
     const isOutlined = variant === 'outlined';
@@ -31,12 +36,12 @@ const WalletButton: React.FC<WalletButtonProps> = ({
     const hasText = !!text;
 
     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'],
-        isFullWidth && styles['wallets-button-full-width']
+        'wallets-button',
+        `wallets-button__size--${size}`,
+        `wallets-button__variant--${variant}`,
+        `wallets-button__rounded--${rounded}`,
+        isContained && `wallets-button__color--${color}`,
+        isFullWidth && 'wallets-button__full-width'
     );
 
     const buttonFontColor = () => {
@@ -60,14 +65,14 @@ const WalletButton: React.FC<WalletButtonProps> = ({
         }
     };
 
-    const buttonFontSizeMapper: Record<Extract<TGenericSizes, 'lg' | 'md' | 'sm'>, TGenericSizes> = {
+    const buttonFontSizeMapper = {
         lg: 'sm',
         md: 'sm',
-        sm: 'xs' as const,
-    };
+        sm: 'xs',
+    } as const;
 
     return (
-        <button className={buttonClassNames} {...rest}>
+        <button className={buttonClassNames} disabled={disabled} onClick={onClick}>
             {hasIcon && icon}
             {hasText && (
                 <WalletText