diff --git a/frontend/src/Context/Theme/helpers/getMuiCustomTheme.ts b/frontend/src/Context/Theme/helpers/getMuiCustomTheme.ts index 3e6461091..d853a5cd0 100644 --- a/frontend/src/Context/Theme/helpers/getMuiCustomTheme.ts +++ b/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'), diff --git a/frontend/src/components/Banner/Banner.spec.tsx b/frontend/src/components/Banner/Banner.spec.tsx index f484997cc..7e34590df 100644 --- a/frontend/src/components/Banner/Banner.spec.tsx +++ b/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( - - - - ); - - const bannerDataTime = screen.getByTestId('dateAndTime'); - expect(bannerDataTime).toBeInTheDocument(); - }); - - it('renders the banner links', () => { - render( - - - - ); - - const bannerLinks = screen.getByTestId('banner-links'); - expect(bannerLinks).toBeInTheDocument(); - }); }); diff --git a/frontend/src/components/Banner/Banner.tsx b/frontend/src/components/Banner/Banner.tsx index 6d051dcd8..1de09712f 100644 --- a/frontend/src/components/Banner/Banner.tsx +++ b/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 ( - - - - - +
+ + + - - - - - - - - - + + + + + +
); }; diff --git a/frontend/src/components/BannerDateTime/BannerDateTime.spec.tsx b/frontend/src/components/BannerDateTime/BannerDateTime.spec.tsx deleted file mode 100644 index ff31edbfb..000000000 --- a/frontend/src/components/BannerDateTime/BannerDateTime.spec.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { describe, expect, it, vi } from 'vitest'; -import { render, screen } from '@testing-library/react'; -import BannerDateTime from './BannerDateTime'; - -describe('BannerDateTime', () => { - it('renders the banner date and time', () => { - const rawDate = new Date('June 27, 2024 21:12:00'); - vi.setSystemTime(rawDate); - render(); - - const bannerTime = screen.getByTestId('current-time'); - expect(bannerTime.textContent).toBe('9:12 PM'); - - const bannerDate = screen.getByTestId('current-date'); - expect(bannerDate.textContent).toBe('Thu, Jun 27'); - }); -}); diff --git a/frontend/src/components/BannerDateTime/BannerDateTime.tsx b/frontend/src/components/BannerDateTime/BannerDateTime.tsx deleted file mode 100644 index 7896c1b41..000000000 --- a/frontend/src/components/BannerDateTime/BannerDateTime.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ReactElement } from 'react'; -import useDateTime from '../../hooks/useDateTime'; - -/** - * BannerDateTime Component - * - * This component returns a UI that includes current time and date. - * @returns {ReactElement} - the banner with a date and time component - */ -const BannerDateTime = (): ReactElement => { - const { date, time } = useDateTime(); - - return ( -
- - {time} - - • - - {date} - -
- ); -}; - -export default BannerDateTime; diff --git a/frontend/src/components/BannerDateTime/index.tsx b/frontend/src/components/BannerDateTime/index.tsx deleted file mode 100644 index b02695fd0..000000000 --- a/frontend/src/components/BannerDateTime/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import BannerDateTime from './BannerDateTime'; - -export default BannerDateTime; diff --git a/frontend/src/components/BannerLanguage/BannerLanguage.tsx b/frontend/src/components/BannerLanguage/BannerLanguage.tsx index b77dedd6a..300d6f17a 100644 --- a/frontend/src/components/BannerLanguage/BannerLanguage.tsx +++ b/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 ( -
+ -
+ ); }; diff --git a/frontend/src/components/BannerLinks/BannerLinks.spec.tsx b/frontend/src/components/BannerLinks/BannerLinks.spec.tsx deleted file mode 100644 index 8f0dd9279..000000000 --- a/frontend/src/components/BannerLinks/BannerLinks.spec.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { describe, expect, it } from 'vitest'; -import { render, screen } from '@testing-library/react'; -import { MemoryRouter } from 'react-router-dom'; -import BannerLinks from './BannerLinks'; - -describe('BannerLinks', () => { - it('renders the banner links component', () => { - render( - - - - ); - - const bannerLinks = screen.getByTestId('banner-links'); - expect(bannerLinks).toBeInTheDocument(); - }); -}); diff --git a/frontend/src/components/BannerLinks/BannerLinks.tsx b/frontend/src/components/BannerLinks/BannerLinks.tsx deleted file mode 100644 index 20a04aa4a..000000000 --- a/frontend/src/components/BannerLinks/BannerLinks.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ReactElement } from 'react'; -import GHRepoButton from '../GHRepoButton'; - -/** - * BannerLinks Component - * - * Component holding different icon-buttons. - * @returns {ReactElement} The BannerLinks component. - */ -const BannerLinks = (): ReactElement => { - return ( -
- -
- ); -}; - -export default BannerLinks; diff --git a/frontend/src/components/BannerLinks/index.tsx b/frontend/src/components/BannerLinks/index.tsx deleted file mode 100644 index 6adbefe2d..000000000 --- a/frontend/src/components/BannerLinks/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import BannerLinks from './BannerLinks'; - -export default BannerLinks; diff --git a/frontend/src/components/BannerLogo/BannerLogo.spec.tsx b/frontend/src/components/BannerLogo/BannerLogo.spec.tsx index 0197f52ce..a880ae4a8 100644 --- a/frontend/src/components/BannerLogo/BannerLogo.spec.tsx +++ b/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( ); - const vonageLogo = screen.getByAltText('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( - - - - ); - - const link = screen.getByRole('link'); - expect(link).toHaveAttribute('href', '/'); + const logo = screen.getByTestId('banner-logo-image'); + expect(logo).toBeInTheDocument(); + expect(logo).toHaveStyle({ cursor: 'pointer' }); }); }); diff --git a/frontend/src/components/BannerLogo/BannerLogo.tsx b/frontend/src/components/BannerLogo/BannerLogo.tsx index 51bc69c7f..b081a16fa 100644 --- a/frontend/src/components/BannerLogo/BannerLogo.tsx +++ b/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 => ( - -
- { + const isTablet = useIsTabletViewport(); + const navigate = useNavigate(); + const handleClick = () => { + navigate('..'); + }; + + return ( + + { + 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" - /> - Vonage-mobile-logo -
- -); + + ); +}; export default BannerLogo; diff --git a/frontend/src/components/Footer/Footer.spec.tsx b/frontend/src/components/Footer/Footer.spec.tsx new file mode 100644 index 000000000..f4f40a85f --- /dev/null +++ b/frontend/src/components/Footer/Footer.spec.tsx @@ -0,0 +1,17 @@ +import { describe, expect, it } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import { MemoryRouter } from 'react-router-dom'; +import Footer from './Footer'; + +describe('Footer', () => { + it('renders the footer content', () => { + render( + +