From de10abaa9fbd117a9119b76195d7c53b9b158fa0 Mon Sep 17 00:00:00 2001 From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com> Date: Tue, 24 Oct 2023 14:32:21 +0800 Subject: [PATCH] aizad/feat: Improvements on Base Components (#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 --- packages/components/stories/icon/icons.js | 2 - .../ModalStepWrapper/ModalStepWrapper.tsx | 4 +- .../WalletAlertMessage/WalletAlertMessage.tsx | 5 +- .../Base/WalletButton/WalletButton.module.css | 79 -------- .../Base/WalletButton/WalletButton.scss | 95 ++++++++++ .../Base/WalletButton/WalletButton.tsx | 41 +++-- .../Base/WalletText/WalletText.module.css | 149 --------------- .../Base/WalletText/WalletText.scss | 170 ++++++++++++++++++ .../components/Base/WalletText/WalletText.tsx | 33 ++-- ...Field.modules.css => WalletTextField.scss} | 32 ++-- .../Base/WalletTextField/WalletTextField.tsx | 37 ++-- packages/wallets/src/components/Base/types.ts | 15 +- .../OptionsAndMultipliersListing.tsx | 6 +- .../src/components/WalletCard/WalletCard.tsx | 9 +- .../WalletListCardActions.tsx | 6 +- .../WalletListCardBadge.tsx | 9 +- .../WalletListCardIBalance.tsx | 4 +- .../WalletListCardTitle.tsx | 2 +- .../WalletTourGuideSettings.tsx | 24 +-- .../WalletsActionScreen.tsx | 7 +- .../WalletsAddMoreCardBanner.tsx | 9 +- .../WalletsAddMoreCardContent.tsx | 8 +- .../WalletsAddMoreCarousel.tsx | 2 +- .../features/cfd/screens/Success/Success.tsx | 8 +- 24 files changed, 385 insertions(+), 371 deletions(-) delete mode 100644 packages/wallets/src/components/Base/WalletButton/WalletButton.module.css create mode 100644 packages/wallets/src/components/Base/WalletButton/WalletButton.scss delete mode 100644 packages/wallets/src/components/Base/WalletText/WalletText.module.css create mode 100644 packages/wallets/src/components/Base/WalletText/WalletText.scss rename packages/wallets/src/components/Base/WalletTextField/{WalletTextField.modules.css => WalletTextField.scss} (94%) diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index 35022298fac7..a43aa8d1437e 100644 --- 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 index 0106362d30ca..89d1829fffde 100644 --- 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> = ({ title, }) => { const { hide } = useModal(); - const { isMobile } = useDevice(); return (
> = ({ })} >
- + {title} diff --git a/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx b/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx index ed2e94a38ef9..c416064df72c 100644 --- 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 = ({ children, message, type }) => { - const { isMobile } = useDevice(); - const Icon = typeMapper[type].icon; const color = typeMapper[type].color; @@ -42,7 +39,7 @@ const WalletAlertMessage: React.FC = ({ children, message, type }) => {
- + {message}
diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css b/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css deleted file mode 100644 index fedcbc00e36b..000000000000 --- a/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css +++ /dev/null @@ -1,79 +0,0 @@ -.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 { - height: 2.4rem; - 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-ghost { - 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); - } - } - &-full-width { - width: 100%; - } -} diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.scss b/packages/wallets/src/components/Base/WalletButton/WalletButton.scss new file mode 100644 index 000000000000..69e3528c7028 --- /dev/null +++ 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 index b0c61fb2b0e9..4a3fa294e15e 100644 --- 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 { - 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; size?: Extract; text?: React.ReactNode; - variant?: 'contained' | 'ghost' | 'outlined'; + variant?: TVariant; } const WalletButton: React.FC = ({ 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 = ({ 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 = ({ } }; - const buttonFontSizeMapper: Record, TGenericSizes> = { + const buttonFontSizeMapper = { lg: 'sm', md: 'sm', - sm: 'xs' as const, - }; + sm: 'xs', + } as const; return ( - - - {button.text} - + {button.text} ))} @@ -82,12 +80,12 @@ const WalletListCardActions: React.FC = ({ isActive, isDemo, loginid }) {getWalletHeaderButtons(isDemo).map(button => ( { switchAccount(loginid); history.push(`/wallets/cashier/${button.name}`); }} + rounded='md' text={isActive ? button.text : undefined} variant='outlined' /> diff --git a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx index a4b00ce3ce32..6ea32f0d3aae 100644 --- a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx +++ b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import useDevice from '../../hooks/useDevice'; import { WalletText } from '../Base'; import './WalletListCardBadge.scss'; @@ -9,7 +8,6 @@ type TProps = { }; const WalletListCardBadge: React.FC = ({ isDemo, label }) => { - const { isMobile } = useDevice(); const className = isDemo ? 'wallets-list-card__badge--demo' : 'wallets-list-card__badge'; const formattedLabel = label === 'virtual' ? 'Demo' : label?.toUpperCase() || 'SVG'; @@ -17,12 +15,7 @@ const WalletListCardBadge: React.FC = ({ isDemo, label }) => { return (
- + {formattedLabel}
diff --git a/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx index fbfbd187a4b6..0f7725c6cf0b 100644 --- a/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx +++ b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx @@ -8,11 +8,11 @@ type TProps = { const WalletListCardIBalance: React.FC = ({ balance }) => (
- + Wallet balance - + {balance}
diff --git a/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx b/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx index a527defbe8af..a3650eb2fd08 100644 --- a/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx +++ b/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx @@ -8,7 +8,7 @@ type TProps = { const WalletListCardTitle: React.FC = ({ title }) => { return ( - + {title} Wallet ); diff --git a/packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx b/packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx index 5cdfbd9d737a..9fbd4a0d4fc3 100644 --- a/packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx +++ b/packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx @@ -48,27 +48,9 @@ export const TooltipComponent = ({
{step?.title as React.ReactNode}
{
{step.content as React.ReactNode}
}
- {index > 0 && ( - - - Back - - - )} - {continuous && ( - - - {`${isLastStep ? 'Close' : 'Next'}`} - - - )} - {!continuous && ( - - - Close - - - )} + {index > 0 && } + {continuous && } + {!continuous && }
); diff --git a/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.tsx b/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.tsx index e54425ddc8ee..0ea53e686e91 100644 --- a/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.tsx +++ b/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.tsx @@ -1,6 +1,5 @@ import React, { ComponentProps, PropsWithChildren, ReactNode } from 'react'; import classNames from 'classnames'; -import useDevice from '../../hooks/useDevice'; import WalletButton from '../Base/WalletButton/WalletButton'; import WalletText from '../Base/WalletText/WalletText'; import './WalletsActionScreen.scss'; @@ -36,8 +35,6 @@ const WalletsActionScreen: React.FC> = ({ title, type = 'page', }) => { - const { isMobile } = useDevice(); - return (
> = ({ {icon}
{title && ( - + {title} )} - + {description}
diff --git a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx index a9a45c226fe3..7a2253509acd 100644 --- a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx +++ b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx @@ -1,6 +1,5 @@ import React from 'react'; import type { useAvailableWallets } from '@deriv/api'; -import useDevice from '../../hooks/useDevice'; import CheckIcon from '../../public/images/check.svg'; import PlusIcon from '../../public/images/plus.svg'; import { WalletText } from '../Base'; @@ -13,7 +12,6 @@ const WalletsAddMoreCardBanner = ({ is_added: isAdded, landing_company_name: landingCompanyName, }: TWalletsAddMoreCardBannerProps) => { - const { isMobile } = useDevice(); return (
@@ -21,12 +19,7 @@ const WalletsAddMoreCardBanner = ({
- + {landingCompanyName}
diff --git a/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx b/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx index e8f03925f938..a6c737667952 100644 --- a/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx +++ b/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import useDevice from '../../hooks/useDevice'; import { WalletText } from '../Base'; type TWalletDescriptionMapper = { @@ -21,14 +20,9 @@ const walletDescriptionMapper: TWalletDescriptionMapper = { }; const WalletsAddMoreCardContent = ({ currency }: { currency: string }) => { - const { isMobile } = useDevice(); return (
- + {currency} Wallet diff --git a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx index 13468438b587..65ade84d4424 100644 --- a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx +++ b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx @@ -27,7 +27,7 @@ const WalletsAddMoreCarousel = () => { return (
- + Add more Wallets
diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx index 5d9958a32633..cd1cce2ee232 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -3,9 +3,9 @@ import { useActiveWalletAccount } from '@deriv/api'; import { WalletText } from '../../../../components'; import { WalletGradientBackground } from '../../../../components/WalletGradientBackground'; import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon'; -import './Success.scss'; import { TDisplayBalance, TMarketTypes, TPlatforms } from '../../../../types'; import { MarketTypeToTitleMapper, PlatformToTitleMapper } from '../../constants'; +import './Success.scss'; type TSuccessProps = { description: string; @@ -52,13 +52,13 @@ const Success: React.FC = ({ marketType={marketType} platform={platform} /> - + {marketTypeTitle} {!isDemo && `(${landingCompanyName})`} - + {data?.currency} Wallet - + {displayBalance}