VIDSOL-291: UI/UX: Header and Language selector

.github/ISSUE_TEMPLATE/1-bug-report.yml

@@ -46,7 +46,6 @@ body:
         - Chrome
         - Firefox
         - Microsoft Edge
-        - Opera
         - Safari
         - Electron
 

.github/workflows/run-tests.yml

@@ -74,17 +74,6 @@ jobs:
           /opt/firefox/firefox --version
           echo "Firefox latest downloaded and installed"
 
-      - name: Install opera latest
-        run: |
-          sudo mkdir -p /etc/apt/keyrings
-          curl -fsSL https://deb.opera.com/archive.key | gpg --dearmor | sudo tee /etc/apt/keyrings/opera.gpg > /dev/null
-          echo "deb [signed-by=/etc/apt/keyrings/opera.gpg] https://deb.opera.com/opera-stable/ stable non-free" | \
-            sudo tee /etc/apt/sources.list.d/opera-stable.list > /dev/null
-          sudo apt-get update
-          sudo apt-get install opera-stable -y
-          echo "Check opera version"
-          /usr/bin/opera --version
-
       - name: Setup node
         if: steps.check-skip-ci.outputs.result == 'false'
         uses: actions/setup-node@v4

.github/workflows/update-screenshots.yml

@@ -72,16 +72,6 @@ jobs:
           echo "Check firefox version"
           /opt/firefox/firefox --version
           echo "Firefox latest downloaded and installed"
-      - name: install opera latest
-        if: steps.check-update-screenshots.outputs.result == 'true'
-        run: |
-          sudo add-apt-repository 'deb https://deb.opera.com/opera-stable/ stable non-free'
-          wget -qO- https://deb.opera.com/archive.key | sudo apt-key add -
-          sudo apt-get update
-          sudo apt-get install opera-stable -y
-          echo "Check opera version"
-          /usr/bin/opera --version
-          echo "Opera latest downloaded and installed"
 
       - name: Checkout
         if: steps.check-update-screenshots.outputs.result == 'true'

eslint.config.mjs

@@ -258,6 +258,16 @@ export default [
     rules: {
       // unit test usually need to mock before importing to make the mocking work
       'import/first': 'off',
+      'no-restricted-properties': [
+        'warn',
+        { object: 'it', property: 'only', message: 'Remove .only from tests before committing!' },
+        {
+          object: 'describe',
+          property: 'only',
+          message: 'Remove .only from tests before committing!',
+        },
+        { object: 'test', property: 'only', message: 'Remove .only from tests before committing!' },
+      ],
     },
   },
 ];

frontend/src/Context/Theme/helpers/getMuiCustomTheme.ts

@@ -154,6 +154,16 @@ const getMuiCustomTheme = ({ tokens }: { tokens: ThemeTokens }) => {
           },
         },
       },
+      MuiList: {
+        styleOverrides: {
+          root: {
+            backgroundColor: colors.onSecondary,
+            color: colors.textSecondary,
+            fontSize: tokens.typography.typeScale.desktop['body-base'].fontSize.value,
+            lineHeight: tokens.typography.typeScale.desktop['body-base'].lineHeight.value,
+          },
+        },
+      },
       MuiTypography: {
         styleOverrides: {
           h1: createResponsiveTypography(tokens, 'headline', 'headline'),

frontend/src/components/Banner/Banner.spec.tsx

@@ -14,26 +14,4 @@ describe('Banner', () => {
     const bannerLogo = screen.getByTestId('banner-logo');
     expect(bannerLogo).toBeInTheDocument();
   });
-
-  it('renders the banner date and time', () => {
-    render(
-      <MemoryRouter>
-        <Banner />
-      </MemoryRouter>
-    );
-
-    const bannerDataTime = screen.getByTestId('dateAndTime');
-    expect(bannerDataTime).toBeInTheDocument();
-  });
-
-  it('renders the banner links', () => {
-    render(
-      <MemoryRouter>
-        <Banner />
-      </MemoryRouter>
-    );
-
-    const bannerLinks = screen.getByTestId('banner-links');
-    expect(bannerLinks).toBeInTheDocument();
-  });
 });

frontend/src/components/Banner/Banner.tsx

@@ -1,10 +1,8 @@
 import { ReactElement } from 'react';
-import { AppBar, Toolbar } from '@mui/material';
 import Box from '@ui/Box';
 import Stack from '@ui/Stack';
 import useCustomTheme from '@Context/Theme';
-import BannerDateTime from '../BannerDateTime';
-import BannerLinks from '../BannerLinks';
+import Header from '@ui/Header';
 import BannerLogo from '../BannerLogo';
 import BannerLanguage from '../BannerLanguage';
 
@@ -18,30 +16,27 @@ const Banner = (): ReactElement => {
   const theme = useCustomTheme();
 
   return (
-    <AppBar position="static">
-      <Toolbar sx={{ alignItems: 'stretch' }}>
-        <Box sx={{ flex: 1, bgcolor: theme.colors.surface }}>
-          <BannerLogo />
-        </Box>
+    <Header appBarProps={{ position: 'static' }} toolbarProps={{ sx: { alignItems: 'stretch' } }}>
+      <Box sx={{ flex: 1, bgcolor: theme.colors.surface }}>
+        <BannerLogo />
+      </Box>
 
-        <Box sx={{ flex: 1, bgcolor: { xs: theme.colors.surface, md: theme.colors.background } }}>
-          <Stack
-            direction="row"
-            spacing={2}
-            alignItems="center"
-            justifyContent="flex-end"
-            sx={{
-              height: '100%',
-              bgcolor: { xs: theme.colors.surface, md: theme.colors.background },
-            }}
-          >
-            <BannerDateTime />
-            <BannerLanguage />
-            <BannerLinks />
-          </Stack>
-        </Box>
-      </Toolbar>
-    </AppBar>
+      <Box sx={{ flex: 1, bgcolor: { xs: theme.colors.surface, md: theme.colors.background } }}>
+        <Stack
+          direction="row"
+          spacing={2}
+          alignItems="center"
+          justifyContent="flex-end"
+          sx={{
+            height: '100%',
+            bgcolor: { xs: theme.colors.surface, md: theme.colors.background },
+            mr: 4,
+          }}
+        >
+          <BannerLanguage />
+        </Stack>
+      </Box>
+    </Header>
   );
 };
 

frontend/src/components/BannerLanguage/BannerLanguage.tsx

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import Box from '@ui/Box';
 import LanguageSelector from '../LanguageSelector';
 
 /**
@@ -9,9 +10,9 @@ import LanguageSelector from '../LanguageSelector';
  */
 const BannerLanguage = (): ReactElement => {
   return (
-    <div className="flex items-center" data-testid="banner-language">
+    <Box display="flex" alignItems="center" data-testid="banner-language">
       <LanguageSelector />
-    </div>
+    </Box>
   );
 };
 

frontend/src/components/BannerLogo/BannerLogo.spec.tsx

@@ -16,26 +16,15 @@ describe('BannerLogo', () => {
     expect(vonageLogo.src).toContain('/images/vonage-logo-desktop.svg');
   });
 
-  it('renders the vonage mobile logo', () => {
+  it('renders clickable logo with cursor pointer', () => {
     render(
       <MemoryRouter>
         <BannerLogo />
       </MemoryRouter>
     );
 
-    const vonageLogo = screen.getByAltText<HTMLImageElement>('Vonage-mobile-logo');
-    expect(vonageLogo).toBeInTheDocument();
-    expect(vonageLogo.src).toContain('/images/vonage-logo-mobile.svg');
-  });
-
-  it('wraps logos in a Link pointing to the landing page', () => {
-    render(
-      <MemoryRouter>
-        <BannerLogo />
-      </MemoryRouter>
-    );
-
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', '/');
+    const logo = screen.getByTestId('banner-logo-image');
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveStyle({ cursor: 'pointer' });
   });
 });

frontend/src/components/BannerLogo/BannerLogo.tsx

@@ -1,31 +1,52 @@
 import { ReactElement } from 'react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import Box from '@ui/Box';
+import useIsTabletViewport from '@hooks/useIsTabletViewport';
 
 /**
  * BannerLogo Component
  *
- * This component returns the logo that redirects to the landing page when clicked.
- * @returns {ReactElement} - the banner logo component
+ * This component returns a logo for the banner that navigates to the parent route when clicked.
+ * @returns {ReactElement} - the banner logo component.
  */
-const BannerLogo = (): ReactElement => (
-  <Link to="..">
-    <div className="box-border" data-testid="banner-logo">
-      <img
-        style={{
-          marginLeft: '16px',
-          marginTop: '12px',
+const BannerLogo = (): ReactElement => {
+  const isTablet = useIsTabletViewport();
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate('..');
+  };
+
+  return (
+    <Box
+      data-testid="banner-logo"
+      sx={{
+        boxSizing: 'border-box',
+        ml: { xs: 1, md: 3 },
+        mt: { xs: 2, md: 2 },
+        px: { xs: 2, md: 0 },
+      }}
+    >
+      <Box
+        data-testid="banner-logo-image"
+        component="img"
+        src={isTablet ? '/images/vonage-logo-mobile.svg' : '/images/vonage-logo-desktop.svg'}
+        alt={isTablet ? 'Vonage-mobile-logo' : 'Vonage-desktop-logo'}
+        onClick={handleClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            handleClick();
+          }
+        }}
+        role="button"
+        tabIndex={0}
+        sx={{
+          height: { xs: 40, md: 72 },
+          display: 'block',
+          cursor: 'pointer',
         }}
-        className="hidden h-[72px] pl-4 pr-8 md:flex"
-        src="/images/vonage-logo-desktop.svg"
-        alt="Vonage-desktop-logo"
-      />
-      <img
-        className="my-4 h-10 px-8 md:hidden"
-        src="/images/vonage-logo-mobile.svg"
-        alt="Vonage-mobile-logo"
       />
-    </div>
-  </Link>
-);
+    </Box>
+  );
+};
 
 export default BannerLogo;