[DTRA-V2] Henry/dtra 1809/fix darkmode dtrader v2 (#16782)

* fix: trade types list dark mode * fix: handle dark mode for market selector * fix: bottom nav icon and colors * fix: trader params background color and bottom nav border * fix: trader params background color and bottom nav border * fix: scrolling inside miniminsed parameters * fix: darkmode for onboarding guide * fix: test and css * fix: handle trade params darkmode * fix: border radius issues * fix: remove unused import * fix: test failure * fix: dark mode animation fix * fix: positions page dark mode * fix: contract details dark mode * fix: test failure * fix: test cases * fix: test case * fix: change to semantic tokens for the remaining * fix: logo swap on switching * fix: change icon * fix: final fixes * fix: padding issue for input * fix: positioning and spelling * fix: test case * fix: resolve comments * chore: bump quill-ui * fix: upgrade quill version
binary-com · Sep 23, 2024 · 5490a4d · 5490a4d
1 parent 975321f
commit 5490a4d
Show file tree

Hide file tree

Showing 73 changed files with 458 additions and 238 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/account/package.json b/packages/account/package.json
@@ -35,7 +35,7 @@
         "@deriv-com/utils": "^0.0.25",
         "@deriv-com/ui": "1.35.0",
         "@deriv/api": "^1.0.0",
-        "@deriv-com/quill-ui": "1.16.9",
+        "@deriv-com/quill-ui": "1.16.17",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
         "@deriv/integration": "1.0.0",

diff --git a/packages/components/src/components/loading/loading.scss b/packages/components/src/components/loading/loading.scss
@@ -68,7 +68,7 @@
         height: 100%;
     }
     &__trade {
-        background-color: var(--core-color-opacity-black-75);
+        background-color: var(--semantic-color-slate-solid-surface-frame-mid);
         padding: 0 var(--core-spacing-400);
         gap: var(--semantic-spacing-general-sm);
         position: relative;
@@ -123,7 +123,7 @@
     }
     &__positions {
         width: 100%;
-        background-color: var(--core-color-solid-slate-75);
+        background-color: var(--semantic-color-slate-solid-surface-frame-mid);
 
         .skeleton-box {
             &__filters,
@@ -153,7 +153,7 @@
         }
     }
     &__contract-details {
-        background-color: var(--core-color-solid-slate-75);
+        background-color: var(--semantic-color-slate-solid-surface-frame-mid);
         padding: var(--core-spacing-400);
         gap: var(--semantic-spacing-general-sm);
 

diff --git a/packages/components/src/components/skeleton/skeleton.scss b/packages/components/src/components/skeleton/skeleton.scss
@@ -1,15 +1,15 @@
 .skeleton {
     width: 100%;
     height: 100%;
-    background-color: var(--core-color-opacity-black-75);
+    background-color: var(--semantic-color-monochrome-surface-normal-lowest);
     border-radius: var(--semantic-borderRadius-md);
 
     &.animated {
         animation: var(--motion-duration-moderate) ease-out alternate infinite pulsate;
 
         @keyframes pulsate {
             to {
-                background-color: var(--core-color-opacity-black-100);
+                background-color: var(--semantic-color-monochrome-surface-normal-low);
             }
         }
     }

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -98,7 +98,7 @@
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.14.0",
         "@deriv-com/quill-tokens": "^2.0.4",
-        "@deriv-com/quill-ui": "1.16.9",
+        "@deriv-com/quill-ui": "1.16.17",
         "@deriv-com/translations": "1.3.9",
         "@deriv-com/ui": "1.35.0",
         "@deriv-com/utils": "^0.0.25",

diff --git a/.../core/src/App/Containers/Layout/header/__tests__/dtrader-contract-details-header.spec.tsx b/.../core/src/App/Containers/Layout/header/__tests__/dtrader-contract-details-header.spec.tsx
@@ -7,6 +7,9 @@ import { StoreProvider, mockStore } from '@deriv/stores';
 
 jest.mock('@deriv-com/quill-ui', () => ({
     Text: () => <div>Contract Details</div>,
+    IconButton: ({ icon, onClick }: { icon: React.ReactNode; onClick: () => void }) => (
+        <button onClick={onClick}>{icon}</button>
+    ),
 }));
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
@@ -37,7 +40,6 @@ describe('DTraderV2Header', () => {
         );
 
         expect(screen.getByText('Contract Details')).toBeInTheDocument();
-
         const icon = screen.getByTestId('arrow');
         expect(icon).toBeInTheDocument();
     });

diff --git a/packages/core/src/App/Containers/Layout/header/dtrader-v2-contract-detail-header.tsx b/packages/core/src/App/Containers/Layout/header/dtrader-v2-contract-detail-header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer, useStore } from '@deriv/stores';
-import { Text } from '@deriv-com/quill-ui';
+import { Text, IconButton } from '@deriv-com/quill-ui';
 import { LabelPairedArrowLeftSmBoldIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv/translations';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -22,14 +22,14 @@ const DTraderContractDetailsHeader = observer(() => {
     return (
         <header className='header contract-details-header-v2'>
             <React.Suspense fallback={<div />}>
-                <LabelPairedArrowLeftSmBoldIcon
-                    height='22px'
-                    width='13px'
+                <IconButton
+                    variant='tertiary'
+                    icon={<LabelPairedArrowLeftSmBoldIcon height='22px' width='13px' data-testid='arrow' />}
                     className='arrow'
-                    data-testid='arrow'
+                    color='black-white'
                     onClick={handleBack}
                 />
-                <Text size='md' bold>
+                <Text size='md' bold color='quill-typography__color--prominent'>
                     <Localize i18n_default_text='Contract Details' />
                 </Text>
             </React.Suspense>

diff --git a/packages/trader/package.json b/packages/trader/package.json
@@ -90,7 +90,7 @@
     "dependencies": {
         "@deriv-com/analytics": "1.14.0",
         "@deriv-com/quill-tokens": "^2.0.4",
-        "@deriv-com/quill-ui": "1.16.9",
+        "@deriv-com/quill-ui": "1.16.17",
         "@deriv-com/utils": "^0.0.25",
         "@deriv-com/ui": "1.35.0",
         "@deriv/api-types": "1.0.172",

diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-description.tsx b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-description.tsx
@@ -11,7 +11,7 @@ const AccumulatorStatsDescription = ({ onActionSheetClose }: { onActionSheetClos
                 <StreamIframe src={UNIFIED_MODE_VIDEO_ID.accumulator_stats} title='accumulator_stats' />
                 <div className='stats-description__content'>
                     <div className='stats-description__content__title'>
-                        <Text size='lg' bold>
+                        <Text size='lg' bold color='quill-typography__color--prominent'>
                             <Localize i18n_default_text='Stats' />
                         </Text>
                     </div>

diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-modal.tsx b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-modal.tsx
@@ -16,7 +16,7 @@ const AccumulatorStatsModal = ({
         <ActionSheet.Portal shouldCloseOnDrag>
             <div className='stats-sheet'>
                 <div className='stats-sheet__title'>
-                    <Text size='lg' bold>
+                    <Text size='lg' bold color='quill-typography__color--prominent'>
                         <Localize i18n_default_text='Stats' />
                     </Text>
                 </div>
@@ -25,7 +25,6 @@ const AccumulatorStatsModal = ({
                         <Localize i18n_default_text='History of tick counts' />
                     </Text>
                 </div>
-
                 <div className='stats-sheet__stats'>
                     <StatsRow
                         rows={rows[0]}

diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-row.tsx b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-row.tsx
@@ -26,8 +26,9 @@ const StatsRow = ({
                     size='sm'
                     bold
                     className={animation_class}
-                    key={animationKey}
                     data-testid='accumulator-first-stat'
+                    color='quill-typography__color--prominent'
+                    key={animationKey}
                 >
                     {rows[0]}
                 </Text>

diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.scss b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.scss
@@ -35,23 +35,23 @@
 }
 
 .accumulators-stats {
-    background: var(--general-main-1);
+    background: var(--semantic-color-slate-solid-surface-frame-low);
     padding: var(--core-spacing-400);
     margin-top: calc(var(--core-spacing-600) * -1);
-    border-bottom-left-radius: var(--core-borderWidth-300);
-    border-bottom-right-radius: var(--core-borderWidth-300);
+    border-bottom-left-radius: var(--core-borderRadius-400);
+    border-bottom-right-radius: var(--core-borderRadius-400);
     &__container {
         display: flex;
         justify-content: space-between;
         &__heading {
             margin: var(--core-spacing-300) var(--core-spacing-400);
             background: transparent;
             border: none;
-            border-bottom: var(--core-spacing-75) dashed;
+            border-bottom: var(--core-spacing-75) dashed var(--component-textIcon-normal-default);
             padding: var(--core-spacing-50);
         }
         &__divider {
-            border-right: var(--core-spacing-75) solid var(--core-color-opacity-black-100);
+            border-right: var(--core-spacing-75) solid var(--semantic-color-monochrome-surface-normal-low);
             margin: var(--core-spacing-50) var(--core-spacing-400);
         }
         .slide-right {
@@ -129,7 +129,7 @@
             margin-bottom: var(--core-spacing-1200);
         }
         &__caption {
-            margin-bottom: var(--core-spacing-400);
+            margin-bottom: var(--core-spacing-1200);
         }
         &__moving {
             display: flex;
@@ -139,8 +139,8 @@
         &__stats {
             display: flex;
             padding: var(--core-spacing-600) var(--core-spacing-75);
+            border-bottom: var(--core-spacing-75) solid var(--semantic-color-monochrome-border-normal-mid);
             justify-content: space-between;
-            border-bottom: var(--core-spacing-75) solid var(--core-color-opacity-black-100);
             &__moving {
                 display: flex;
                 align-items: center;

diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.tsx b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.tsx
@@ -92,7 +92,10 @@ const AccumulatorStats = observer(() => {
                         />
                     </div>
                     <button className='accumulators-stats__container__expand' onClick={() => setIsOpen(true)}>
-                        <LabelPairedChevronUpSmBoldIcon data-testid='expand-stats-icon' />
+                        <LabelPairedChevronUpSmBoldIcon
+                            data-testid='expand-stats-icon'
+                            fill='var(--semantic-color-monochrome-textIcon-normal-high)'
+                        />
                     </button>
                 </div>
             </div>

diff --git a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.scss b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.scss
@@ -4,10 +4,11 @@ $BOTTOM_NAV_HEIGHT: var(--core-spacing-2800);
     display: flex;
     flex-direction: column;
     height: 100%;
+
     &-container {
         padding: var(--core-spacing-200);
         width: 100%;
-        border-top: 1px solid var(--core-color-opacity-black-100);
+        border-top: 1px solid var(--component-navigationBar-border-color);
         height: $BOTTOM_NAV_HEIGHT;
         z-index: 30;
     }
@@ -19,16 +20,25 @@ $BOTTOM_NAV_HEIGHT: var(--core-spacing-2800);
     }
     &-item {
         font-size: var(--core-fontSize-50);
+
+        .quill-navigation-bottom-bar__action-label {
+            color: var(--component-navigationBar-label-color-default);
+        }
+
+        svg {
+            fill: var(--component-navigationBar-icon-default);
+        }
+
         &__position-badge {
             z-index: 1;
         }
         &--active {
             .quill-navigation-bottom-bar__action-label {
-                color: var(--core-color-opacity-coral-600);
+                color: var(--component-navigationBar-label-color-selected);
             }
 
             svg {
-                fill: var(--core-color-opacity-coral-600);
+                fill: var(--component-navigationBar-icon-selected);
             }
         }
         &--positions {

diff --git a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx
@@ -4,7 +4,12 @@ import clsx from 'clsx';
 import { observer } from 'mobx-react';
 import { Localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
-import { StandaloneChartCandlestickRegularIcon, StandaloneClockThreeRegularIcon } from '@deriv/quill-icons';
+import {
+    StandaloneChartAreaFillIcon,
+    StandaloneChartAreaRegularIcon,
+    StandaloneClockThreeFillIcon,
+    StandaloneClockThreeRegularIcon,
+} from '@deriv/quill-icons';
 import { Badge, Navigation } from '@deriv-com/quill-ui';
 import { useStore } from '@deriv/stores';
 import { useHistory, useLocation } from 'react-router';
@@ -24,12 +29,8 @@ const BottomNav = observer(({ children, className, onScroll }: BottomNavProps) =
 
     const bottomNavItems = [
         {
-            icon: (
-                <StandaloneChartCandlestickRegularIcon
-                    iconSize='sm'
-                    fill='var(--semantic-color-monochrome-textIcon-normal-high)'
-                />
-            ),
+            icon: <StandaloneChartAreaRegularIcon iconSize='sm' />,
+            activeIcon: <StandaloneChartAreaFillIcon iconSize='sm' />,
             label: <Localize i18n_default_text='Trade' />,
             path: routes.trade,
         },
@@ -45,16 +46,26 @@ const BottomNav = observer(({ children, className, onScroll }: BottomNavProps) =
                         contentSize='sm'
                         className='bottom-nav-item__position-badge'
                     >
-                        <StandaloneClockThreeRegularIcon
-                            iconSize='sm'
-                            fill='var(--semantic-color-monochrome-textIcon-normal-high)'
-                        />
+                        <StandaloneClockThreeRegularIcon iconSize='sm' />
                     </Badge>
                 ) : (
-                    <StandaloneClockThreeRegularIcon
-                        iconSize='sm'
-                        fill='var(--semantic-color-monochrome-textIcon-normal-high)'
-                    />
+                    <StandaloneClockThreeRegularIcon iconSize='sm' />
+                ),
+            activeIcon:
+                active_positions_count > 0 ? (
+                    <Badge
+                        variant='notification'
+                        position='top-right'
+                        label={active_positions_count.toString()}
+                        color='danger'
+                        size='sm'
+                        contentSize='sm'
+                        className='bottom-nav-item__position-badge'
+                    >
+                        <StandaloneClockThreeFillIcon iconSize='sm' />
+                    </Badge>
+                ) : (
+                    <StandaloneClockThreeFillIcon iconSize='sm' />
                 ),
             label: (
                 <React.Fragment>
@@ -65,13 +76,15 @@ const BottomNav = observer(({ children, className, onScroll }: BottomNavProps) =
             path: routes.trader_positions,
         },
     ];
+
     const navIndex = bottomNavItems.findIndex(item => item.path === location.pathname);
     const [selectedIndex, setSelectedIndex] = React.useState(navIndex > -1 ? navIndex : 0);
 
     const handleSelect = (index: number) => {
         setSelectedIndex(index);
         history.push(bottomNavItems[index].path);
     };
+
     return (
         <div className={classNames('bottom-nav', className)}>
             <div className='bottom-nav-selection' onScroll={onScroll}>
@@ -83,8 +96,8 @@ const BottomNav = observer(({ children, className, onScroll }: BottomNavProps) =
                         <Navigation.BottomAction
                             key={index}
                             index={index}
-                            activeIcon={item.icon}
-                            icon={item.icon}
+                            activeIcon={<></>}
+                            icon={index === selectedIndex ? item.activeIcon : item.icon}
                             label={item.label}
                             selected={index === selectedIndex}
                             showLabel

diff --git a/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss
@@ -1,7 +1,7 @@
 .card-wrapper {
     display: flex;
     flex-direction: column;
-    background-color: var(--core-color-solid-slate-50);
+    background-color: var(--semantic-color-slate-solid-surface-frame-low);
     padding: var(--semantic-spacing-general-md);
     border-radius: var(--core-borderRadius-500);
     gap: var(--semantic-spacing-gap-lg);

diff --git a/packages/trader/src/AppV2/Components/ClosedMarketMessage/closed-market-message.scss b/packages/trader/src/AppV2/Components/ClosedMarketMessage/closed-market-message.scss
@@ -17,7 +17,7 @@
         gap: var(--core-spacing-200);
 
         &-message {
-            color: var(--semantic-color-slate-solid-surface-normal-lowest);
+            color: var(--component-textIcon-static-prominentDark);
         }
     }
     &--loading {

diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx b/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx
@@ -48,7 +48,12 @@ export const ContractCardStatusTimer = ({
     return displayedDuration ? (
         <Tag
             className='timer'
-            icon={<LabelPairedStopwatchCaptionRegularIcon key='open-contract-card' />}
+            icon={
+                <LabelPairedStopwatchCaptionRegularIcon
+                    key='open-contract-card'
+                    fill='var(--component-tag-label-color-default)'
+                />
+            }
             label={displayedDuration}
             variant='custom'
             size='sm'