From 9177d928c0dd7c211ec55c862b57ce175c504012 Mon Sep 17 00:00:00 2001 From: George Usynin <103181646+heorhi-deriv@users.noreply.github.com> Date: Fri, 27 Oct 2023 14:42:45 +0300 Subject: [PATCH] [Wallet] george / WALL-2247 / cashier header improvements (#10961) * feat: :sparkles: refactor cashier header, add watermark, add tabs icon, add autoscroll to active tab * style: :lipstick: refactor classnames * style: :lipstick: fix watermark background * fix: :ambulance: styles fix, fix icons * fix: :ambulance: sonarcloud issue * refactor: :lipstick: replace elements with modifiers, replace icons (deposit and withdraw) * fix: :fire: removed unused icon * refactor: :recycle: rename icon name --- .../Base/WalletText/WalletText.scss | 1 + .../WalletGradientBackground.scss | 31 ++-- .../WalletsAccordion/WalletsAccordion.scss | 3 +- packages/wallets/src/components/index.ts | 1 + .../WalletCashierHeader.scss | 160 +++++++++-------- .../WalletCashierHeader.tsx | 166 +++++++++++++----- .../wallets/src/public/images/plus-thin.svg | 1 + .../public/images/wallet-demo-desktop-bg.svg | 8 +- 8 files changed, 223 insertions(+), 148 deletions(-) create mode 100644 packages/wallets/src/public/images/plus-thin.svg diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.scss b/packages/wallets/src/components/Base/WalletText/WalletText.scss index aa67b13feb74..9b4e820cb052 100644 --- a/packages/wallets/src/components/Base/WalletText/WalletText.scss +++ b/packages/wallets/src/components/Base/WalletText/WalletText.scss @@ -9,6 +9,7 @@ $color-map: ( less-prominent: #999999, red: #ff444f, blue: #377cfc, + system-dark-2-general-text: #c2c2c2, ); $desktop-font-size-map: ( diff --git a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss index fc83d308780a..473b3431d354 100644 --- a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss +++ b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss @@ -1142,20 +1142,6 @@ ) #212329; border-radius: 0.8rem; - &:before { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-image: url('../../public/images/wallet-demo-bg-light.svg'); - background-repeat: repeat; - background-size: 7rem; - mix-blend-mode: overlay; - opacity: 0.24; - } } &-dark { background: radial-gradient( @@ -1189,5 +1175,22 @@ } } } + &-desktop-header-light, + &-mobile-header-light, + &-mobile-card-light { + &:before { + content: ''; + display: block; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + background-image: url('../../public/images/wallet-demo-bg-light.svg'); + background-repeat: repeat; + background-size: 7rem; + mix-blend-mode: overlay; + opacity: 0.24; + } + } } } diff --git a/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.scss b/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.scss index 265ce4fc693f..52f1c1cdae10 100644 --- a/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.scss +++ b/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.scss @@ -22,8 +22,7 @@ content: ''; display: block; position: absolute; - left: 0; - top: 0; + inset: 0; width: 100%; height: 100%; border-radius: 1.6rem; diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts index 302ca8bc1150..8a50725007ff 100644 --- a/packages/wallets/src/components/index.ts +++ b/packages/wallets/src/components/index.ts @@ -9,6 +9,7 @@ export * from './TradingAccountCard'; export * from './WalletCard'; export * from './WalletCardIcon'; export * from './WalletError'; +export * from './WalletGradientBackground'; export * from './WalletListCard'; export * from './WalletListCardActions'; export * from './WalletListCardBadge'; diff --git a/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss b/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss index a62d9e44365c..e8cb11683a07 100644 --- a/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss +++ b/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss @@ -1,5 +1,8 @@ .wallets-cashier-header { + width: 100%; + max-width: 128rem; height: 16rem; + margin: 0 auto; padding-top: 2.4rem; position: relative; overflow: hidden; @@ -9,75 +12,75 @@ gap: 1.6rem; @include mobile { - padding-top: 0rem; + padding-top: 0; height: fit-content; } - &__close-button { - all: unset; - cursor: pointer; - } - &__info { display: flex; justify-content: space-between; align-items: center; - padding-inline: 2.4rem; + padding-inline: 4rem; @include mobile { padding: 1.6rem 1.6rem 0rem; } + } - &__top-left { - display: flex; - flex-direction: column; - gap: 0.6rem; - - &__details { - display: flex; - gap: 2.4rem; - align-items: center; - - @include mobile { - opacity: 1; - max-height: 2rem; - transition: opacity 0.25s ease, max-height 0.25s ease; - gap: 0.8rem; - } - - &__title { - font-size: 1.6rem; - - @include mobile { - font-size: 1.4rem; - } - } - } + &__top-left-info { + display: flex; + flex-direction: column; + gap: 0.6rem; + } + + &__details { + display: flex; + gap: 2.4rem; + align-items: center; - &__balance { - font-size: 3.2rem; - font-weight: 700; + @include mobile { + opacity: 1; + max-height: 2rem; + transition: opacity 0.25s ease, max-height 0.25s ease; + gap: 0.8rem; - @include mobile { - font-size: 1.8rem; - } + &--hide-details { + max-height: 0; + opacity: 0; } } + } + + &__top-right-info { + display: flex; + gap: 1.6rem; + align-items: start; + + @include mobile { + gap: 0.8rem; + } + } - &__top-right { - display: flex; - gap: 1.6rem; - align-items: start; + &__currency-icon { + @include mobile { + & > :first-child { + max-height: 4.8rem; + transition: opacity 0.2s ease, max-height 0.2s ease; + } - @include mobile { - gap: 0.8rem; + &--hide-currency-icon > :first-child { + max-height: 0; + opacity: 0; } + } + } - &__icon > :first-child { - @include mobile { - max-height: 4.8rem; - transition: opacity 0.2s ease, max-height 0.2s ease; - } + &__close-icon { + cursor: pointer; + + &--white { + path { + fill: var(--light-8-primary-background, #fff); } } } @@ -85,7 +88,7 @@ &__tabs { display: flex; overflow-x: scroll; - padding-inline: 2.4rem; + padding-inline: 4rem; -ms-overflow-style: none; scrollbar-width: none; @@ -96,42 +99,37 @@ @include mobile { padding-inline: 1.6rem; } + } - &__tab { - all: unset; - display: flex; - width: 14.4rem; - height: 4.8rem; - padding: 0rem 1.6rem; - justify-content: center; - align-items: center; - gap: 0.8rem; - flex-shrink: 0; - font-size: 1.8rem; - text-transform: capitalize; - cursor: pointer; - - @include mobile { - height: 4rem; - font-size: 1.2rem; - width: 8rem; - } + &__tab { + all: unset; + display: flex; + min-width: 11.2rem; + height: 4.8rem; + padding-inline: 1.6rem; + justify-content: center; + align-items: center; + gap: 0.8rem; + flex-shrink: 0; + cursor: pointer; - &--active { - border-radius: 1.6rem 1.6rem 0rem 0rem; - background-color: #ffffff; - font-weight: 700; - } + @include mobile { + height: 4rem; + min-width: 7.2rem; + padding-inline: 2.4rem; } - } - &__hide-details { - max-height: 0; - opacity: 0; + &--active { + border-radius: 1.6rem 1.6rem 0rem 0rem; + background: var(--light-8-primary-background, #fff); + } } - &__hide-currency-icon > :first-child { - max-height: 0; - opacity: 0; + &__tab-icon { + &--system-dark-2-general-text { + path { + fill: var(--system-dark-2-general-text, #c2c2c2); + } + } } } diff --git a/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx b/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx index fd7ea1d9474c..a696002ab708 100644 --- a/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx +++ b/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx @@ -1,84 +1,162 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import classNames from 'classnames'; import { useHistory, useLocation } from 'react-router-dom'; import { useActiveWalletAccount } from '@deriv/api'; -import { WalletCardIcon } from '../../../../components/WalletCardIcon'; -import { WalletGradientBackground } from '../../../../components/WalletGradientBackground'; +import { WalletCardIcon, WalletGradientBackground, WalletText } from '../../../../components'; import { WalletListCardBadge } from '../../../../components/WalletListCardBadge'; import useDevice from '../../../../hooks/useDevice'; import CloseIcon from '../../../../public/images/close-icon.svg'; +import IcCashierDeposit 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 ResetBalance from '../../../../public/images/plus-thin.svg'; import './WalletCashierHeader.scss'; -const realAccountTabs = ['deposit', 'withdraw', 'transfer', 'transactions']; -const virtualAccountTabs = ['withdraw', 'transfer', 'transactions', 'reset-balance']; +type TProps = { + hideWalletDetails: boolean; +}; + +const realAccountTabs = [ + { + icon: , + path: 'deposit', + text: 'Deposit', + }, + { + icon: , + path: 'withdraw', + text: 'Withdraw', + }, + { + icon: , + path: 'transfer', + text: 'Transfer', + }, + { + icon: , + path: 'transactions', + text: 'Transactions', + }, +] as const; -const WalletCashierHeader = ({ hideWalletDetails }: { hideWalletDetails: boolean }) => { - const { data } = useActiveWalletAccount(); +const virtualAccountTabs = [ + { + icon: , + path: 'transfer', + text: 'Transfer', + }, + { + icon: , + path: 'transactions', + text: 'Transactions', + }, + { + icon: , + path: 'reset-balance', + text: 'Reset balance', + }, +] as const; + +const WalletCashierHeader: React.FC = ({ hideWalletDetails }) => { + const { data: activeWallet } = useActiveWalletAccount(); const { isMobile } = useDevice(); + const activeTabRef = useRef(null); const history = useHistory(); const location = useLocation(); + const tabs = activeWallet?.is_virtual ? virtualAccountTabs : realAccountTabs; - let tabs = realAccountTabs; - if (data?.is_virtual) { - tabs = virtualAccountTabs; - } + useEffect(() => { + if (isMobile && activeTabRef.current) { + activeTabRef.current.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'center' }); + } + }, [location.pathname, isMobile]); return (
-
+
-

- {data?.currency} Wallet -

- {data?.landing_company_name && ( - + + {activeWallet?.currency} Wallet + + {activeWallet?.landing_company_name && ( + )}
-

{data?.display_balance}

+ + {activeWallet?.display_balance} +
-
- {data?.wallet_currency_type && ( +
+ {activeWallet?.wallet_currency_type && (
- +
)} - + />
- {tabs.map(tab => ( - - ))} + {tabs.map(tab => { + const isActiveTab = location.pathname === `/wallets/cashier/${tab.path}`; + return ( + + ); + })}
diff --git a/packages/wallets/src/public/images/plus-thin.svg b/packages/wallets/src/public/images/plus-thin.svg new file mode 100644 index 000000000000..868c424b42f3 --- /dev/null +++ b/packages/wallets/src/public/images/plus-thin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/wallets/src/public/images/wallet-demo-desktop-bg.svg b/packages/wallets/src/public/images/wallet-demo-desktop-bg.svg index 7626c01c3d73..969f9983ea8e 100644 --- a/packages/wallets/src/public/images/wallet-demo-desktop-bg.svg +++ b/packages/wallets/src/public/images/wallet-demo-desktop-bg.svg @@ -1,7 +1 @@ - - - - - - - \ No newline at end of file + \ No newline at end of file