Merge pull request #59 from deriv-com/sandeep/ui-fixing-header

sandeep -- ui fixes and refactoring the header components

src/components/layout/header/SkeletonLoader/index.tsx → src/components/layout/header/account-info-loader.tsx

@@ -27,7 +27,7 @@ const LoggedInPreloader = ({ isMobile }: Pick<TAccountsInfoLoaderProps, 'isMobil
     </>
 );
 
-export const AccountsInfoLoader = ({ isMobile, speed }: TAccountsInfoLoaderProps) => (
+const AccountsInfoLoader = ({ isMobile, speed }: TAccountsInfoLoaderProps) => (
     <ContentLoader
         backgroundColor={'#f2f3f4'}
         data-testid='dt_accounts_info_loader'
@@ -39,3 +39,5 @@ export const AccountsInfoLoader = ({ isMobile, speed }: TAccountsInfoLoaderProps
         <LoggedInPreloader isMobile={isMobile} />
     </ContentLoader>
 );
+
+export default AccountsInfoLoader;

src/components/layout/header/AccountSwitcher/index.tsx → src/components/layout/header/account-switcher.tsx

@@ -85,7 +85,7 @@ const RenderAccountItems = ({ isVirtual }: Partial<TAccountSwitcherProps>) => {
     );
 };
 
-export const AccountSwitcher = ({ activeAccount }: TAccountSwitcherProps) => {
+const AccountSwitcher = ({ activeAccount }: TAccountSwitcherProps) => {
     return (
         activeAccount && (
             <UIAccountSwitcher activeAccount={activeAccount}>
@@ -99,3 +99,5 @@ export const AccountSwitcher = ({ activeAccount }: TAccountSwitcherProps) => {
         )
     );
 };
+
+export default AccountSwitcher;

src/components/layout/header/Notifications/index.tsx → src/components/layout/header/custom-notifications/custom-notifications.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import clsx from 'clsx';
 import { LegacyNotificationIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { Notifications as UINotifications, Tooltip, useDevice } from '@deriv-com/ui';
-import './notifications.scss';
+import { Notifications, Tooltip, useDevice } from '@deriv-com/ui';
+import './custom-notifications.scss';
 
-export const Notifications = () => {
+const CustomNotifications = () => {
     const [isOpen, setIsOpen] = useState(false);
     const { localize } = useTranslations();
     const { isMobile } = useDevice();
@@ -20,7 +20,7 @@ export const Notifications = () => {
             >
                 <LegacyNotificationIcon iconSize='sm' />
             </Tooltip>
-            <UINotifications
+            <Notifications
                 className={clsx('', {
                     'notifications__wrapper--mobile': isMobile,
                     'notifications__wrapper--desktop': !isMobile,
@@ -41,3 +41,5 @@ export const Notifications = () => {
         </div>
     );
 };
+
+export default CustomNotifications;

src/components/layout/header/custom-notifications/index.ts

@@ -0,0 +1,3 @@
+import CustomNotifications from './custom-notifications';
+
+export default CustomNotifications;

src/components/layout/header/HeaderConfig.tsx → src/components/layout/header/header-config.tsx

@@ -73,13 +73,14 @@ export const platformsConfig: PlatformsConfig[] = [
     },
 ];
 
+export const TRADERS_HUB_LINK_CONFIG = {
+    as: 'a',
+    href: 'https://app.deriv.com/appstore/traders-hub',
+    icon: <TradershubLogo iconSize='xs' />,
+    label: "Trader's Hub",
+};
+
 export const MenuItems: MenuItemsConfig[] = [
-    {
-        as: 'a',
-        href: 'https://app.deriv.com/appstore/traders-hub',
-        icon: <TradershubLogo iconSize='xs' />,
-        label: "Trader's Hub",
-    },
     {
         as: 'a',
         href: 'https://app.deriv.com/appstore/reports',

src/components/layout/header/header.scss

@@ -102,3 +102,14 @@
         color: var(--text-prominent) !important;
     }
 }
+
+.auth-actions {
+    button {
+        font-weight: 400;
+        margin-right: 1.6rem;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}

src/components/layout/header/index.tsx → src/components/layout/header/header.tsx

@@ -1,37 +1,36 @@
 import clsx from 'clsx';
-import Button from '@/components/shared_ui/button';
-import Text from '@/components/shared_ui/text';
 import useActiveAccount from '@/hooks/api/account/useActiveAccount';
 import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons';
 import { useAuthData } from '@deriv-com/api-hooks';
-import { useTranslations } from '@deriv-com/translations';
-import { Header, useDevice, Wrapper } from '@deriv-com/ui';
+import { Localize, useTranslations } from '@deriv-com/translations';
+import { Button, Header, Text, useDevice, Wrapper } from '@deriv-com/ui';
 import { Tooltip } from '@deriv-com/ui';
 import { URLUtils } from '@deriv-com/utils';
 import { AppLogo } from '../app-logo';
-import { AccountSwitcher } from './AccountSwitcher';
-import { MenuItems } from './MenuItems';
-import { MobileMenu } from './MobileMenu';
-import { Notifications } from './Notifications';
-import { PlatformSwitcher } from './PlatformSwitcher';
-import { AccountsInfoLoader } from './SkeletonLoader';
+import AccountsInfoLoader from './account-info-loader';
+import AccountSwitcher from './account-switcher';
+import CustomNotifications from './custom-notifications';
+import MenuItems from './menu-items';
+import MobileMenu from './mobile-menu';
+import PlatformSwitcher from './platform-switcher';
 import './header.scss';
 
+const { getOauthURL } = URLUtils;
+
 const AppHeader = () => {
     const { isDesktop } = useDevice();
     const { activeLoginid, isAuthorizing } = useAuthData();
     const { data: activeAccount } = useActiveAccount();
 
     const { localize } = useTranslations();
-    const { getOauthURL } = URLUtils;
 
     const renderAccountSection = () => {
         if (isAuthorizing) {
             return <AccountsInfoLoader isLoggedIn isMobile={!isDesktop} speed={3} />;
         } else if (activeLoginid) {
             return (
                 <>
-                    <Notifications />
+                    <CustomNotifications />
                     {isDesktop && (
                         <Tooltip
                             as='a'
@@ -59,16 +58,26 @@ const AppHeader = () => {
             );
         } else {
             return (
-                <Button
-                    size='sm'
-                    variant='outlined'
-                    color='primary-light'
-                    onClick={() => {
-                        window.location.assign(getOauthURL());
-                    }}
-                >
-                    {localize('Login')}
-                </Button>
+                <div className='auth-actions'>
+                    <Button
+                        borderWidth='sm'
+                        color='primary-light'
+                        variant='ghost'
+                        onClick={() => {
+                            window.location.assign(getOauthURL());
+                        }}
+                    >
+                        <Localize i18n_default_text='Log in' />
+                    </Button>
+                    <Button
+                        size='md'
+                        onClick={() => {
+                            window.location.assign(getOauthURL());
+                        }}
+                    >
+                        <Localize i18n_default_text='Sign up' />
+                    </Button>
+                </div>
             );
         }
     };
@@ -83,6 +92,7 @@ const AppHeader = () => {
             <Wrapper variant='left'>
                 <AppLogo />
                 <MobileMenu />
+                {isDesktop && <MenuItems.TradershubLink />}
                 {isDesktop && <PlatformSwitcher />}
                 {isDesktop && <MenuItems />}
             </Wrapper>

src/components/layout/header/index.ts

@@ -0,0 +1,3 @@
+import Header from './header';
+
+export default Header;

src/components/layout/header/menu-items/index.ts

@@ -0,0 +1,3 @@
+import MenuItems from './menu-items';
+
+export default MenuItems;

src/components/layout/header/MenuItems/index.tsx → src/components/layout/header/menu-items/menu-items.tsx

@@ -1,7 +1,7 @@
 import { useTranslations } from '@deriv-com/translations';
 import { MenuItem, Text, useDevice } from '@deriv-com/ui';
-import { MenuItems as items } from '../HeaderConfig';
-import './MenuItems.scss';
+import { MenuItems as items, TRADERS_HUB_LINK_CONFIG } from '../header-config';
+import './menu-items.scss';
 
 export const MenuItems = () => {
     const { localize } = useTranslations();
@@ -29,3 +29,18 @@ export const MenuItems = () => {
         </>
     );
 };
+
+export const TradershubLink = () => (
+    <MenuItem
+        as='a'
+        className='app-header__menu'
+        href={TRADERS_HUB_LINK_CONFIG.href}
+        key={TRADERS_HUB_LINK_CONFIG.label}
+        leftComponent={TRADERS_HUB_LINK_CONFIG.icon}
+    >
+        <Text>{TRADERS_HUB_LINK_CONFIG.label}</Text>
+    </MenuItem>
+);
+
+MenuItems.TradershubLink = TradershubLink;
+export default MenuItems;

src/components/layout/header/MobileMenu/__tests__/BackButton.spec.tsx → src/components/layout/header/mobile-menu/__tests__/back-button.spec.tsx

@@ -1,7 +1,7 @@
 import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { BackButton } from '../BackButton';
+import BackButton from '../back-button';
 
 const mockOnClick = jest.fn();
 

src/components/layout/header/mobile-menu/__tests__/menu-content.spec.tsx

@@ -0,0 +1,56 @@
+import { BrowserRouter } from 'react-router-dom';
+import { mockStore, StoreProvider } from '@/hooks/useStore';
+import { mock_ws } from '@/utils/mock';
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import MenuContent from '../menu-content';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isDesktop: false })),
+}));
+
+jest.mock('@deriv-com/api-hooks', () => ({
+    useAuthData: jest.fn().mockReturnValue({
+        isAuthorized: true,
+    }),
+}));
+
+jest.mock('../../platform-switcher', () => jest.fn(() => <div>Mock Platform Switcher</div>));
+
+describe('MenuContent Component', () => {
+    const mock_store = mockStore(mock_ws as any);
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <BrowserRouter>
+            <StoreProvider mockStore={mock_store}>{children}</StoreProvider>
+        </BrowserRouter>
+    );
+
+    beforeEach(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            value: jest.fn(),
+            writable: true,
+        });
+    });
+
+    it('renders PlatformSwitcher and MenuItem components correctly', () => {
+        render(<MenuContent />, { wrapper });
+        expect(screen.getByText(/Mock Platform Switcher/)).toBeInTheDocument();
+        expect(screen.getByText(/Trader's Hub/)).toBeInTheDocument();
+        expect(screen.getByText(/Deriv.com/)).toBeInTheDocument();
+    });
+
+    it('adjusts text size for mobile devices', () => {
+        render(<MenuContent />, { wrapper });
+        const text = screen.getByText(/Trader's Hub/);
+        expect(text).toHaveClass('derivs-text__size--md');
+    });
+
+    it('adjusts text size for desktop devices', () => {
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
+        render(<MenuContent />, { wrapper });
+        const text = screen.getByText(/Trader's Hub/);
+        expect(text).toHaveClass('derivs-text__size--sm');
+    });
+});