chore: fix header footer and sidebar styles

deriv-com · Jul 29, 2024 · 3ea49ee · 3ea49ee
1 parent 41266e8
commit 3ea49ee
Show file tree

Hide file tree

Showing 30 changed files with 2,288 additions and 419 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,8 @@
     "scripts": {
         "start": "rsbuild dev",
         "build": "rsbuild build",
+        "watch": "rsbuild build --watch",
+        "serve": "live-server --port=8443 --host=localhost dist",
         "start:webpack": "webpack serve --open --config webpack.config.js",
         "build:webpack": "webpack --config webpack.config.js",
         "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
@@ -116,6 +118,7 @@
         "jest-environment-jsdom": "^29.7.0",
         "jest-transform-stub": "^2.0.0",
         "lint-staged": "^10.4.0",
+        "live-server": "^1.2.2",
         "mini-css-extract-plugin": "^2.9.0",
         "postcss": "^8.4.38",
         "prettier": "^3.1.0",

diff --git a/src/components/layout/app-logo/app-logo.scss b/src/components/layout/app-logo/app-logo.scss
@@ -1,8 +1,10 @@
-.app-header__logo {
-    padding-left: 1.2rem;
-    padding-right: 2rem;
-    border-right: 1px solid #f2f3f4;
-    height: 32px;
-    display: flex;
-    align-items: center;
+.app-header {
+    &__logo {
+        padding-inline-start: 1.2rem;
+        padding-inline-end: 2rem;
+        border-inline-end: 1px solid var(--general-section-1);
+        height: 32px;
+        display: flex;
+        align-items: center;
+    }
 }
diff --git a/src/components/layout/footer/FullScreen.tsx b/src/components/layout/footer/FullScreen.tsx
@@ -0,0 +1,22 @@
+import useFullScreen from '@/hooks/useFullScreen';
+import { LegacyFullscreen1pxIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { Tooltip } from '@deriv-com/ui';
+
+const FullScreen = () => {
+    const { toggleFullScreenMode } = useFullScreen();
+    const { localize } = useTranslations();
+
+    return (
+        <Tooltip
+            as='button'
+            className='app-footer__icon'
+            onClick={toggleFullScreenMode}
+            tooltipContent={localize('Full screen')}
+        >
+            <LegacyFullscreen1pxIcon iconSize='xs' />
+        </Tooltip>
+    );
+};
+
+export default FullScreen;
diff --git a/src/components/layout/footer/NetworkStatus.tsx b/src/components/layout/footer/NetworkStatus.tsx
@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import useNetworkStatus from '@/hooks/useNetworkStatus';
+import { localize } from '@/utils/tmp/dummy';
+import { Tooltip } from '@deriv-com/ui';
 // import { useTranslations } from '@deriv-com/translations';
 
 const statusConfigs = {
     blinking: {
         className: 'app-footer__network-status-online app-footer__network-status-blinking',
-        tooltip: 'Connecting to server',
+        tooltip: localize('Connecting to server'),
     },
     offline: { className: 'app-footer__network-status-offline', tooltip: 'Offline' },
     online: { className: 'app-footer__network-status-online', tooltip: 'Online' },
@@ -16,21 +18,17 @@ const NetworkStatus = () => {
     // TODO complete the logic by adding the socket connctions status
     const status = useNetworkStatus();
     // const { localize } = useTranslations();
-    const {
-        className,
-        // tooltip
-    } = useMemo(() => statusConfigs[status], [status]);
+    const { className, tooltip } = useMemo(() => statusConfigs[status], [status]);
 
     return (
-        // <TooltipMenuIcon
-        //     as='div'
-        //     className='app-footer__icon'
-        //     data-testid='dt_network_status'
-        //     disableHover
-        //     tooltipContent={localize('Network status: {{status}}', { status: tooltip })}
-        // >
-        <div className={clsx('app-footer__network-status', className)} data-testid='dt_circle' />
-        // </TooltipMenuIcon>
+        <Tooltip
+            as='div'
+            className='app-footer__icon'
+            data-testid='dt_network_status'
+            tooltipContent={localize('Network status: {{status}}', { status: tooltip })}
+        >
+            <div className={clsx('app-footer__network-status', className)} data-testid='dt_circle' />
+        </Tooltip>
     );
 };
 

diff --git a/src/components/layout/footer/ServerTime.tsx b/src/components/layout/footer/ServerTime.tsx
@@ -1,30 +1,18 @@
-// import { DATE_TIME_FORMAT_WITH_GMT, DATE_TIME_FORMAT_WITH_OFFSET } from '@/constants';
 import useSyncedTime from '@/hooks/useSyncedTime';
-import {
-    DATE_TIME_FORMAT_WITH_GMT,
-    // DATE_TIME_FORMAT_WITH_OFFSET,
-    // epochToLocal,
-    epochToUTC,
-} from '@/utils/time';
+import { DATE_TIME_FORMAT_WITH_GMT, DATE_TIME_FORMAT_WITH_OFFSET, epochToLocal, epochToUTC } from '@/utils/time';
+import { Tooltip } from '@deriv-com/ui';
 import { Text, useDevice } from '@deriv-com/ui';
 
 const ServerTime = () => {
     const time = useSyncedTime();
     const UTCFormat = epochToUTC(time, DATE_TIME_FORMAT_WITH_GMT);
-    // const localFormat = epochToLocal(time, DATE_TIME_FORMAT_WITH_OFFSET);
+    const localFormat = epochToLocal(time, DATE_TIME_FORMAT_WITH_OFFSET);
     const { isDesktop } = useDevice();
 
     return (
-        // TODO: fix
-        // <TooltipMenuIcon
-        //     as='div'
-        //     className='app-footer__icon'
-        //     data-testid='dt_server_time'
-        //     disableHover
-        //     tooltipContent={localFormat}
-        // >
-        <Text size={isDesktop ? 'xs' : 'sm'}>{UTCFormat}</Text>
-        // </TooltipMenuIcon>
+        <Tooltip as='div' className='app-footer__icon' data-testid='dt_server_time' tooltipContent={localFormat}>
+            <Text size={isDesktop ? 'xs' : 'sm'}>{UTCFormat}</Text>
+        </Tooltip>
     );
 };
 

diff --git a/src/components/layout/footer/WhatsApp.tsx b/src/components/layout/footer/WhatsApp.tsx
@@ -1,21 +1,21 @@
-import { TooltipMenuIcon } from '@/components/tooltip-menu-icon';
 import { LegacyWhatsappIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
+import { Tooltip } from '@deriv-com/ui';
 import { URLConstants } from '@deriv-com/utils';
 
 const WhatsApp = () => {
     const { localize } = useTranslations();
 
     return (
-        <TooltipMenuIcon
+        <Tooltip
             as='a'
             className='app-footer__icon'
             href={URLConstants.whatsApp}
             target='_blank'
             tooltipContent={localize('WhatsApp')}
         >
             <LegacyWhatsappIcon iconSize='xs' />
-        </TooltipMenuIcon>
+        </Tooltip>
     );
 };
 

diff --git a/src/components/layout/footer/footer.scss b/src/components/layout/footer/footer.scss
@@ -1,3 +1,4 @@
+@use 'components/shared/styles/constants' as *;
 @use 'components/shared/styles/mixins' as *;
 
 .app-footer {
@@ -10,9 +11,9 @@
     bottom: 0;
     right: 0;
     left: 0;
-    border-top: 1px solid #f2f3f4;
-    box-shadow: 0 1px 0 0 #f2f3f4 inset;
-    background: #fff;
+    border-top: 1px solid var(--general-section-1);
+    box-shadow: 0 1px 0 0 var(--general-section-1) inset;
+    background: var(--general-main-1);
 
     &__icon {
         padding: 0.8rem;
@@ -25,7 +26,7 @@
     &__vertical-line {
         width: 0.1rem;
         height: 1.6rem;
-        background-color: #f2f3f4;
+        background-color: var(--general-section-1);
         margin: 0 0.8rem;
     }
 
@@ -35,7 +36,7 @@
         padding: 0.8rem;
 
         & span {
-            margin-left: 0.4rem;
+            margin-inline-start: 0.4rem;
         }
     }
 
@@ -45,27 +46,27 @@
         border-radius: 100%;
 
         &-online {
-            background-color: #4bb4b3;
+            background-color: $color-green-1;
         }
 
         &-offline {
-            background-color: #ff444f;
+            background-color: $color-red;
         }
 
         &-blinking {
             animation: blink 1s infinite alternate;
         }
 
         @include mobile-or-tablet-screen {
-            margin-left: 1.2rem;
+            margin-inline-start: 1.2rem;
         }
     }
 
     &__endpoint {
-        margin-right: 2rem;
+        margin-inline-end: 2rem;
 
         &-text {
-            color: #377cfc;
+            color: $color-blue;
             text-decoration: underline;
         }
     }

diff --git a/src/components/layout/footer/index.tsx b/src/components/layout/footer/index.tsx
@@ -2,11 +2,11 @@ import useModalManager from '@/hooks/useModalManager';
 import { LANGUAGES } from '@/utils/languages';
 import { useTranslations } from '@deriv-com/translations';
 import { DesktopLanguagesModal } from '@deriv-com/ui';
+import FullScreen from './FullScreen';
 // import AccountLimits from './AccountLimits';
 // import ChangeTheme from './ChangeTheme';
 // import Deriv from './Deriv';
 // import Endpoint from './Endpoint';
-// import FullScreen from './FullScreen';
 // import HelpCentre from './HelpCentre';
 // import LanguageSettings from './LanguageSettings';
 // import Livechat from './Livechat';
@@ -28,7 +28,7 @@ const Footer = () => {
 
     return (
         <footer className='app-footer'>
-            {/* <FullScreen /> */}
+            <FullScreen />
             {/* <LanguageSettings openLanguageSettingModal={openLanguageSettingModal} /> */}
             {/* <HelpCentre /> */}
             <div className='app-footer__vertical-line' />

diff --git a/src/components/layout/header/AccountSwitcher/index.tsx b/src/components/layout/header/AccountSwitcher/index.tsx
@@ -0,0 +1,22 @@
+import { useActiveAccount } from '@/hooks/api/account';
+import { CurrencyUsdIcon } from '@deriv/quill-icons';
+import { AccountSwitcher as UIAccountSwitcher } from '@deriv-com/ui';
+import { FormatUtils } from '@deriv-com/utils';
+
+type TActiveAccount = NonNullable<ReturnType<typeof useActiveAccount>['data']>;
+type TAccountSwitcherProps = {
+    account: TActiveAccount;
+};
+
+export const AccountSwitcher = ({ account }: TAccountSwitcherProps) => {
+    const activeAccount = {
+        balance: FormatUtils.formatMoney(account?.balance ?? 0),
+        currency: account?.currency || 'USD',
+        currencyLabel: account?.currency || 'US Dollar',
+        icon: <CurrencyUsdIcon iconSize='sm' />,
+        isActive: true,
+        isVirtual: Boolean(account?.is_virtual),
+        loginid: account?.loginid || '',
+    };
+    return account && <UIAccountSwitcher activeAccount={activeAccount} buttonClassName='mr-4' isDisabled />;
+};
diff --git a/src/components/layout/header/MobileMenu/MenuContent.tsx b/src/components/layout/header/MobileMenu/MenuContent.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { MenuItem, Text, useDevice } from '@deriv-com/ui';
 import { PlatformSwitcher } from '../PlatformSwitcher';
 import { MobileMenuConfig } from './MobileMenuConfig';
@@ -7,18 +8,20 @@ export const MenuContent = () => {
     const textSize = isDesktop ? 'sm' : 'md';
 
     return (
-        <div className='flex flex-col h-full'>
-            <div className='flex items-center justify-center h-28 border-b border-[#f2f3f4]'>
+        <div className='mobile-menu__content'>
+            <div className='mobile-menu__content__platform'>
                 <PlatformSwitcher />
             </div>
 
-            <div className='relative h-full pt-4'>
+            <div className='mobile-menu__content__items'>
                 {MobileMenuConfig().map((item, index) => {
                     const removeBorderBottom = item.find(({ removeBorderBottom }) => removeBorderBottom);
 
                     return (
                         <div
-                            className={!removeBorderBottom ? 'border-b border-[#f2f3f4]' : ''}
+                            className={clsx('mobile-menu__content__items--padding', {
+                                'mobile-menu__content__items--bottom-border': !removeBorderBottom,
+                            })}
                             data-testid='dt_menu_item'
                             key={index}
                         >
@@ -27,12 +30,16 @@ export const MenuContent = () => {
                                     return (
                                         <MenuItem
                                             as='a'
-                                            className='h-[5.6rem]'
+                                            className='mobile-menu__content__items__item'
                                             disableHover
                                             href={href}
                                             key={label}
                                             leftComponent={
-                                                <LeftComponent className='mr-[1.6rem]' height={16} width={16} />
+                                                <LeftComponent
+                                                    className='mobile-menu__content__items--right-margin'
+                                                    height={16}
+                                                    width={16}
+                                                />
                                             }
                                             target={target}
                                         >
@@ -43,16 +50,19 @@ export const MenuContent = () => {
                                 return (
                                     <MenuItem
                                         as='button'
-                                        className='w-full h-[5.6rem]'
+                                        className='mobile-menu__content__items__item'
                                         disableHover
                                         key={label}
-                                        leftComponent={<LeftComponent className='mr-[1.6rem]' iconSize='xs' />}
+                                        leftComponent={
+                                            <LeftComponent
+                                                className='mobile-menu__content__items--right-margin'
+                                                iconSize='xs'
+                                            />
+                                        }
                                         onClick={onClick}
                                         rightComponent={RightComponent}
                                     >
-                                        <Text className='mr-auto' size={textSize}>
-                                            {label}
-                                        </Text>
+                                        <Text size={textSize}>{label}</Text>
                                     </MenuItem>
                                 );
                             })}

diff --git a/src/components/layout/header/MobileMenu/MenuHeader.tsx b/src/components/layout/header/MobileMenu/MenuHeader.tsx
@@ -18,13 +18,13 @@ export const MenuHeader = ({ hideLanguageSetting, openLanguageSetting }: TMenuHe
     );
 
     return (
-        <div className='flex items-center justify-between w-full pr-[1.6rem] pl-[0.4rem]'>
+        <div className='mobile-menu__header'>
             <Text size={isDesktop ? 'md' : 'lg'} weight='bold'>
                 {localize('Menu')}
             </Text>
 
             {!hideLanguageSetting && (
-                <button className='flex items-center' onClick={openLanguageSetting}>
+                <button className='mobile-menu__header__language items-center' onClick={openLanguageSetting}>
                     {countryIcon}
                     <Text className='ml-[0.4rem]' size={isDesktop ? 'xs' : 'sm'} weight='bold'>
                         {currentLang}