Sergei / wall 680 / Desktop wallet dark theme (#9006)

* style: change text color and add bg color for demo wallet in dark mode * feat: add logo for dark theme * feat: add @deriv/hooks to package.json in appstore * chore: empty commit to restart vercel * refactor: wrap TradersHub component by observer * chore: empty commit to restart vercel * feat: change color of button border * update feature_branch with master (#9220) * fix: close account message doesn't show up (#9210) Co-authored-by: niloofar sadeghi <niloofar.sadeghi@re-work.dev> * Jim/WEBREL-667/fix-bug-revealed-during-ts-migration (#9216) * revert: revert code changes * fix: fix bug revealed during ts migration * chore: add test cases for line changed --------- Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com> Co-authored-by: niloofar sadeghi <niloofar.sadeghi@re-work.dev> Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> * feat: fix test for useWalletsList * fix: try to fix useWalletsList test * feat: add type to default_mock_useFetch_response * feat: just add @ts-expect-error * chore: change number to boolean --------- Co-authored-by: mahdiyeh-deriv <82078941+mahdiyeh-deriv@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com> Co-authored-by: niloofar sadeghi <niloofar.sadeghi@re-work.dev> Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
deriv-com · Jul 5, 2023 · 17cc1a2 · 17cc1a2
1 parent 08a9c63
commit 17cc1a2
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 30 deletions.
diff --git a/packages/appstore/src/components/wallet-content/wallet-option-multipliers-listing.tsx b/packages/appstore/src/components/wallet-content/wallet-option-multipliers-listing.tsx
@@ -26,7 +26,7 @@ const WalletOptionsAndMultipliersListing = observer(({ wallet_account }: TProps)
     const OptionsTitle = () => {
         if (wallet_account.landing_company_name === 'svg' && !is_mobile) {
             return (
-                <Text size='sm' line_height='m' weight='bold'>
+                <Text size='sm' line_height='m' weight='bold' color='prominent'>
                     {localize('Options & multipliers')}
                 </Text>
             );

diff --git a/packages/appstore/src/components/wallet-header/wallet-header-balance.tsx b/packages/appstore/src/components/wallet-header/wallet-header-balance.tsx
@@ -14,7 +14,7 @@ const WalletHeaderBalance = observer(({ balance, currency }: TWalletHeaderBalanc
     } = useStore();
 
     const balance_amount = (
-        <Text weight='bold' size='m'>
+        <Text weight='bold' size='m' color='prominent'>
             <Localize
                 i18n_default_text='{{balance}} {{currency}}'
                 values={{

diff --git a/packages/appstore/src/components/wallet-header/wallet-header-buttons.tsx b/packages/appstore/src/components/wallet-header/wallet-header-buttons.tsx
@@ -42,7 +42,7 @@ const WalletHeaderButtons = observer(({ is_disabled, is_open, btns, wallet_accou
                 >
                     <Icon
                         icon={btn.icon}
-                        custom_color={is_disabled ? 'var(--general-disabled)' : 'var(--text-general)'}
+                        custom_color={is_disabled ? 'var(--general-disabled)' : 'var(--text-prominent)'}
                     />
                     <CSSTransition
                         appear
@@ -53,7 +53,7 @@ const WalletHeaderButtons = observer(({ is_disabled, is_open, btns, wallet_accou
                     >
                         <Text
                             weight='bold'
-                            color={is_disabled ? 'disabled' : 'general'}
+                            color={is_disabled ? 'disabled' : 'prominent'}
                             size='xs'
                             className='wallet-header__description-buttons-item-text'
                         >

diff --git a/packages/appstore/src/components/wallet-header/wallet-header.scss b/packages/appstore/src/components/wallet-header/wallet-header.scss
@@ -17,12 +17,19 @@
         width: 100%;
         height: 100%;
         opacity: 0.1;
-        background-image: url('./../../public/images/wallet-header-demo-bg.svg');
         background-repeat: repeat;
         background-position: 3% 30%;
         border-radius: $BORDER_RADIUS * 4;
     }
 
+    .theme--light &__demo:before {
+        background-image: url('./../../public/images/wallet-header-demo-bg.svg');
+    }
+
+    .theme--dark &__demo:before {
+        background-image: url('./../../public/images/wallet-header-demo-bg-dark.svg');
+    }
+
     &__container {
         position: relative;
         display: flex;
@@ -64,7 +71,7 @@
                 border-radius: $BORDER_RADIUS * 4;
                 padding: 0.6rem 1.6rem;
                 margin-right: 0.8rem;
-                border: 1px solid var(--text-general);
+                border: 1px solid var(--border-hover);
                 background-color: var(--prominent);
 
                 &:hover:not(&-disabled) {

diff --git a/packages/appstore/src/modules/traders-hub/index.tsx b/packages/appstore/src/modules/traders-hub/index.tsx
@@ -8,10 +8,10 @@ import AccountWithWallets from './account-with-wallets';
 import AccountWithoutWallets from './account-without-wallets';
 import { useStore, observer } from '@deriv/stores';
 import EUDisclaimer from 'Components/eu-disclaimer';
-import './traders-hub.scss';
 import { useContentFlag } from '@deriv/hooks';
+import './traders-hub.scss';
 
-const TradersHub = () => {
+const TradersHub = observer(() => {
     const { traders_hub, client, ui } = useStore();
     const { notification_messages_ui: Notifications } = ui;
     const {
@@ -50,7 +50,7 @@ const TradersHub = () => {
         }, 100);
     }, [is_tour_open]);
 
-    const { is_low_risk_cr_eu, is_high_risk_cr } = useContentFlag();
+    const { is_low_risk_cr_eu } = useContentFlag();
 
     if (!is_logged_in) return null;
 
@@ -69,7 +69,7 @@ const TradersHub = () => {
             >
                 {can_show_notify && <Notifications />}
                 <div id='traders-hub' className='traders-hub' ref={traders_hub_ref}>
-                    {is_high_risk_cr && <AccountWithWallets />}
+                    {is_wallet_account && <AccountWithWallets />}
                     <AccountWithoutWallets />
                     <ModalManager />
                     {scrolled && <TourGuide />}
@@ -78,6 +78,6 @@ const TradersHub = () => {
             {is_low_risk_cr_eu && <EUDisclaimer />}
         </React.Fragment>
     );
-};
+});
 
-export default observer(TradersHub);
+export default TradersHub;
diff --git a/packages/appstore/src/public/images/wallet-header-demo-bg-dark.svg b/packages/appstore/src/public/images/wallet-header-demo-bg-dark.svg
diff --git a/packages/hooks/src/__tests__/useWalletsList.spec.tsx b/packages/hooks/src/__tests__/useWalletsList.spec.tsx
@@ -22,6 +22,7 @@ describe('useWalletsList', () => {
             },
         });
 
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
         mockUseFetch.mockReturnValue({
             data: {
                 authorize: {
@@ -31,21 +32,9 @@ describe('useWalletsList', () => {
                             currency: 'USD',
                             is_virtual: 0,
                             landing_company_name: 'svg',
-                            // @ts-expect-error Need to update @deriv/api-types to fix the TS error
-                            landing_company_shortcode: 'svg',
-                            is_demo: 0,
-                            is_selected: true,
-                            is_malta_wallet: false,
                         },
                     ],
                 },
-                balance: {
-                    accounts: {
-                        CRW909900: {
-                            balance: 1000,
-                        },
-                    },
-                },
             },
         });
 
@@ -65,13 +54,13 @@ describe('useWalletsList', () => {
                 gradient_card_class: 'wallet-card__usd-bg',
                 gradient_header_class: 'wallet-header__usd-bg',
                 landing_company_name: 'svg',
-                landing_company_shortcode: 'svg',
                 icon: 'IcWalletCurrencyUsd',
                 is_demo: false,
                 is_malta_wallet: false,
                 is_selected: false,
-                is_virtual: 0,
+                is_virtual: false,
                 name: 'USD Wallet',
+                is_disabled: false,
             },
         ]);
     });

diff --git a/packages/hooks/src/useWalletTransactions.ts b/packages/hooks/src/useWalletTransactions.ts
@@ -47,10 +47,10 @@ const useWalletTransactions = (
             gradient_card_class: `wallet-card__btc-bg${is_dark_mode_on ? '--dark' : ''}`,
             icon: getWalletCurrencyIcon('BTC', is_dark_mode_on),
             is_demo: !!current_wallet.is_virtual,
-            is_disabled: 0,
+            is_disabled: false,
             is_malta_wallet: false,
             is_selected: false,
-            is_virtual: current_wallet.is_virtual ? 1 : 0,
+            is_virtual: Boolean(current_wallet.is_virtual),
             landing_company_name: 'svg',
             loginid: 'CRWMOCK00042',
             name: `${current_wallet.is_virtual ? 'Demo ' : ''}BTC Wallet`,

diff --git a/packages/hooks/src/useWalletsList.ts b/packages/hooks/src/useWalletsList.ts
@@ -38,6 +38,8 @@ const useWalletsList = () => {
                 is_dark_mode_on ? '--dark' : ''
             }`,
             name: `${wallet.is_virtual ? 'Demo ' : ''}${currency} ${'Wallet'}`,
+            is_disabled: Boolean(wallet.is_disabled),
+            is_virtual: Boolean(wallet.is_virtual),
         }));
 
         // Sort the wallets alphabetically by fiat, crypto, then virtual

diff --git a/packages/shared/src/styles/constants.scss b/packages/shared/src/styles/constants.scss
@@ -223,4 +223,5 @@ $gradient-virtual-swap-free: linear-gradient(58.51deg, #061828 28.06%, #1a3c60 9
 $READY-BANNER-BG-COLOR: #e2f3f3;
 $READY-BANNER-TICK-BG-COLOR: #4ab4b3;
 $wallet-demo-bg-color: #fff8f9;
+$wallet-dark-demo-bg-color: #140506;
 $wallet-demo-divider-color: #fff0f1;
diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss
@@ -332,8 +332,8 @@
         --wallets-banner-dot-color: #{$color-grey-6};
         --wallets-banner-active-dot-color: #{$color-red};
         --wallets-card-active-gradient-background: #{$gradient-color-white-2};
-        --wallet-demo-bg-color: #{$wallet-demo-bg-color};
-        --wallet-demo-divider-color: #{$wallet-demo-divider-color};
+        --wallet-demo-bg-color: #{$wallet-dark-demo-bg-color};
+        --wallet-demo-divider-color: #{$color-black-8};
         --wallet-eu-disclaimer: #{$color-grey-4};
         // Demo view
         --demo-text-color-1: #{$color-black-1};