From d3f0f64349a30da36df2240f8784b31db6e7503f Mon Sep 17 00:00:00 2001 From: ofava Date: Tue, 25 Nov 2025 13:08:33 +0100 Subject: [PATCH 1/6] Refactor imports in ArchiveList, GoToLandingPageButton, ReenterRoomButton, SupportedBrowserListItem, and SupportedBrowsers components to use custom UI components --- .../GoodBye/ArchiveList/ArchiveList.tsx | 16 +++++++--------- .../GoToLandingPageButton.tsx | 2 +- .../ReenterRoomButton/ReenterRoomButton.tsx | 2 +- .../SupportedBrowserListItem.tsx | 7 ++++++- .../SupportedBrowsers/SupportedBrowsers.tsx | 2 +- 5 files changed, 16 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx b/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx index 52f9072ed..3a2ac18b4 100644 --- a/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx +++ b/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx @@ -1,16 +1,14 @@ import WarningOutlinedIcon from '@mui/icons-material/WarningOutlined'; import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; -import { - CircularProgress, - IconButton, - Link, - List, - ListItem, - ListItemText, - Tooltip, -} from '@mui/material'; import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; +import Link from '@ui/Link'; +import Tooltip from '@ui/Tooltip'; +import IconButton from '@ui/IconButton'; +import List from '@ui/List'; +import ListItem from '@ui/ListItem'; +import CircularProgress from '@ui/CircularProgress'; +import ListItemText from '@ui/ListItemText'; import { Archive, ArchiveStatus } from '../../../api/archiving/model'; const ArchiveDownloadButton = ({ url, id }: { id: string; url: string | undefined }) => { diff --git a/frontend/src/components/GoodBye/GoToLandingPageButton/GoToLandingPageButton.tsx b/frontend/src/components/GoodBye/GoToLandingPageButton/GoToLandingPageButton.tsx index 40d43730d..c29a2f0c7 100644 --- a/frontend/src/components/GoodBye/GoToLandingPageButton/GoToLandingPageButton.tsx +++ b/frontend/src/components/GoodBye/GoToLandingPageButton/GoToLandingPageButton.tsx @@ -1,4 +1,4 @@ -import { Button } from '@mui/material'; +import Button from '@ui/Button'; import { MouseEvent, ReactElement, TouchEvent } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/frontend/src/components/GoodBye/ReenterRoomButton/ReenterRoomButton.tsx b/frontend/src/components/GoodBye/ReenterRoomButton/ReenterRoomButton.tsx index d656e40a7..a01cac5a3 100644 --- a/frontend/src/components/GoodBye/ReenterRoomButton/ReenterRoomButton.tsx +++ b/frontend/src/components/GoodBye/ReenterRoomButton/ReenterRoomButton.tsx @@ -1,4 +1,4 @@ -import { Button } from '@mui/material'; +import Button from '@ui/Button'; import { MouseEvent, ReactElement, TouchEvent } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/frontend/src/components/UnsupportedBrowser/SupportedBrowserListItem/SupportedBrowserListItem.tsx b/frontend/src/components/UnsupportedBrowser/SupportedBrowserListItem/SupportedBrowserListItem.tsx index 51da5ab26..c44bb8b88 100644 --- a/frontend/src/components/UnsupportedBrowser/SupportedBrowserListItem/SupportedBrowserListItem.tsx +++ b/frontend/src/components/UnsupportedBrowser/SupportedBrowserListItem/SupportedBrowserListItem.tsx @@ -1,7 +1,12 @@ -import { IconButton, Link, ListItem, ListItemIcon, ListItemText, Tooltip } from '@mui/material'; import { ReactElement } from 'react'; import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined'; import { useTranslation } from 'react-i18next'; +import ListItem from '@ui/ListItem'; +import ListItemIcon from '@ui/ListItemIcon'; +import Link from '@ui/Link'; +import Tooltip from '@ui/Tooltip'; +import IconButton from '@ui/IconButton'; +import ListItemText from '@ui/ListItemText'; export type SupportedBrowserListItemProps = { url: string; diff --git a/frontend/src/components/UnsupportedBrowser/SupportedBrowsers/SupportedBrowsers.tsx b/frontend/src/components/UnsupportedBrowser/SupportedBrowsers/SupportedBrowsers.tsx index 3ca4ca21c..ee41933c4 100644 --- a/frontend/src/components/UnsupportedBrowser/SupportedBrowsers/SupportedBrowsers.tsx +++ b/frontend/src/components/UnsupportedBrowser/SupportedBrowsers/SupportedBrowsers.tsx @@ -1,6 +1,6 @@ import { ReactElement } from 'react'; -import { List } from '@mui/material'; import { useTranslation } from 'react-i18next'; +import List from '@ui/List'; import { SUPPORTED_BROWSERS } from '../../../utils/constants'; import SupportedBrowserListItem from '../SupportedBrowserListItem'; From b9ab000d6e311dd085261006e3a788b3befcd079 Mon Sep 17 00:00:00 2001 From: ofava Date: Tue, 25 Nov 2025 15:59:31 +0100 Subject: [PATCH 2/6] Refactor Goodbye components to use Box and Typography for improved layout and styling --- .../GoodBye/ArchiveList/ArchiveList.tsx | 33 +++++++++--- .../GoToLandingPageButton.tsx | 8 +-- .../GoodbyeMessage/GoodbyeMessage.spec.tsx | 6 +-- .../GoodBye/GoodbyeMessage/GoodbyeMessage.tsx | 53 +++++++++++++++---- .../ReenterRoomButton/ReenterRoomButton.tsx | 13 +---- .../SupportedBrowsers/SupportedBrowsers.tsx | 41 ++++++++++++-- .../UnsupportedBrowserMessage.tsx | 34 ++++++++++-- 7 files changed, 139 insertions(+), 49 deletions(-) diff --git a/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx b/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx index 3a2ac18b4..fef97a29d 100644 --- a/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx +++ b/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx @@ -9,6 +9,10 @@ import List from '@ui/List'; import ListItem from '@ui/ListItem'; import CircularProgress from '@ui/CircularProgress'; import ListItemText from '@ui/ListItemText'; +import Box from '@ui/Box'; +import Typography from '@ui/Typography'; +import useMediaQuery from '@ui/useMediaQuery'; +import useCustomTheme from '@Context/Theme'; import { Archive, ArchiveStatus } from '../../../api/archiving/model'; const ArchiveDownloadButton = ({ url, id }: { id: string; url: string | undefined }) => { @@ -37,7 +41,7 @@ const ArchiveErrorIcon = () => { display: 'flex', width: '40px', height: '40px', - padding: '8px', + padding: 1, justifyContent: 'center', }} data-testid="archive-error-icon" @@ -53,7 +57,7 @@ const ArchivingLoadingIcon = () => { @@ -92,20 +96,33 @@ export type ArchiveListProps = { */ const ArchiveList = ({ archives }: ArchiveListProps): ReactElement => { const { t } = useTranslation(); + const isMdUp = useMediaQuery('(min-width:768px)'); + const theme = useCustomTheme(); if (archives === 'error') { return ( - <> + -

{t('archiveList.error.text')}

- + + {t('archiveList.error.text')} + + ); } if (!archives.length) { - return

{t('archiveList.empty')}

; + return ( + + {t('archiveList.empty')} + + ); } return ( -
+ {archives.map((archive, index) => { return ( @@ -126,7 +143,7 @@ const ArchiveList = ({ archives }: ArchiveListProps): ReactElement => { ); })} -
+ ); }; diff --git a/frontend/src/components/GoodBye/GoToLandingPageButton/GoToLandingPageButton.tsx b/frontend/src/components/GoodBye/GoToLandingPageButton/GoToLandingPageButton.tsx index c29a2f0c7..e6bae9fc5 100644 --- a/frontend/src/components/GoodBye/GoToLandingPageButton/GoToLandingPageButton.tsx +++ b/frontend/src/components/GoodBye/GoToLandingPageButton/GoToLandingPageButton.tsx @@ -18,13 +18,7 @@ const GoToLandingPageButton = ({ handleLanding }: GoToLandingPageButtonProps): R const { t } = useTranslation(); return ( - ); diff --git a/frontend/src/components/GoodBye/GoodbyeMessage/GoodbyeMessage.spec.tsx b/frontend/src/components/GoodBye/GoodbyeMessage/GoodbyeMessage.spec.tsx index 287cb9a80..2b66bfc90 100644 --- a/frontend/src/components/GoodBye/GoodbyeMessage/GoodbyeMessage.spec.tsx +++ b/frontend/src/components/GoodBye/GoodbyeMessage/GoodbyeMessage.spec.tsx @@ -83,8 +83,7 @@ describe('GoodbyeMessage', () => { ); expect(screen.getByTestId('goodbye-message')).toBeInTheDocument(); - expect(screen.getByTestId('goodbye-message')).toHaveClass('w-full'); - expect(screen.getByTestId('goodbye-message')).not.toHaveClass('w-[400px]'); + expect(screen.getByTestId('goodbye-message')).toHaveStyle({ width: '100%' }); }); it('renders correctly on screen greater than SMALL_VIEWPORT', () => { @@ -101,7 +100,6 @@ describe('GoodbyeMessage', () => { ); expect(screen.getByTestId('goodbye-message')).toBeInTheDocument(); - expect(screen.getByTestId('goodbye-message')).toHaveClass('w-[400px]'); - expect(screen.getByTestId('goodbye-message')).not.toHaveClass('w-full'); + expect(screen.getByTestId('goodbye-message')).toHaveStyle({ width: '400px' }); }); }); diff --git a/frontend/src/components/GoodBye/GoodbyeMessage/GoodbyeMessage.tsx b/frontend/src/components/GoodBye/GoodbyeMessage/GoodbyeMessage.tsx index f16d6b827..babf703cc 100644 --- a/frontend/src/components/GoodBye/GoodbyeMessage/GoodbyeMessage.tsx +++ b/frontend/src/components/GoodBye/GoodbyeMessage/GoodbyeMessage.tsx @@ -1,5 +1,8 @@ import { useNavigate } from 'react-router-dom'; import { ReactElement } from 'react'; +import Box from '@ui/Box'; +import Typography from '@ui/Typography'; +import useCustomTheme from '@Context/Theme'; import GoToLandingPageButton from '../GoToLandingPageButton'; import ReenterRoomButton from '../ReenterRoomButton'; import useIsSmallViewport from '../../../hooks/useIsSmallViewport'; @@ -19,6 +22,7 @@ export type GoodByeMessageProps = { const GoodByeMessage = ({ header, message, roomName }: GoodByeMessageProps): ReactElement => { const isSmallViewport = useIsSmallViewport(); const navigate = useNavigate(); + const theme = useCustomTheme(); const handleLanding = () => { navigate('/'); }; @@ -27,22 +31,53 @@ const GoodByeMessage = ({ header, message, roomName }: GoodByeMessageProps): Rea navigate(`/waiting-room/${roomName}`); }; return ( -
-

+ + {header} -

-

+ {message} -

-
+ + -
-
+ + ); }; diff --git a/frontend/src/components/GoodBye/ReenterRoomButton/ReenterRoomButton.tsx b/frontend/src/components/GoodBye/ReenterRoomButton/ReenterRoomButton.tsx index a01cac5a3..b2675e2df 100644 --- a/frontend/src/components/GoodBye/ReenterRoomButton/ReenterRoomButton.tsx +++ b/frontend/src/components/GoodBye/ReenterRoomButton/ReenterRoomButton.tsx @@ -24,18 +24,7 @@ const ReenterRoomButton = ({ return ( roomName && ( - ) diff --git a/frontend/src/components/UnsupportedBrowser/SupportedBrowsers/SupportedBrowsers.tsx b/frontend/src/components/UnsupportedBrowser/SupportedBrowsers/SupportedBrowsers.tsx index ee41933c4..11065c9f0 100644 --- a/frontend/src/components/UnsupportedBrowser/SupportedBrowsers/SupportedBrowsers.tsx +++ b/frontend/src/components/UnsupportedBrowser/SupportedBrowsers/SupportedBrowsers.tsx @@ -1,6 +1,10 @@ import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; import List from '@ui/List'; +import Box from '@ui/Box'; +import Typography from '@ui/Typography'; +import useMediaQuery from '@ui/useMediaQuery'; +import useCustomTheme from '@Context/Theme'; import { SUPPORTED_BROWSERS } from '../../../utils/constants'; import SupportedBrowserListItem from '../SupportedBrowserListItem'; @@ -12,18 +16,45 @@ import SupportedBrowserListItem from '../SupportedBrowserListItem'; */ const SupportedBrowsers = (): ReactElement => { const { t } = useTranslation(); + const isMdUp = useMediaQuery('(min-width:768px)'); + const theme = useCustomTheme(); + return ( -
-

{t('unsupportedBrowser.supported.title')}

+ + + {t('unsupportedBrowser.supported.title')} + -
+ {SUPPORTED_BROWSERS.map(({ browser, link }) => { return ; })} -
-
+ + ); }; diff --git a/frontend/src/components/UnsupportedBrowser/UnsupportedBrowserMessage/UnsupportedBrowserMessage.tsx b/frontend/src/components/UnsupportedBrowser/UnsupportedBrowserMessage/UnsupportedBrowserMessage.tsx index 921a31ce8..1423492f0 100644 --- a/frontend/src/components/UnsupportedBrowser/UnsupportedBrowserMessage/UnsupportedBrowserMessage.tsx +++ b/frontend/src/components/UnsupportedBrowser/UnsupportedBrowserMessage/UnsupportedBrowserMessage.tsx @@ -1,5 +1,8 @@ import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; +import Box from '@ui/Box'; +import Typography from '@ui/Typography'; +import useCustomTheme from '@Context/Theme'; /** * UnsupportedBrowserMessage Component @@ -9,11 +12,34 @@ import { useTranslation } from 'react-i18next'; */ const UnsupportedBrowserMessage = (): ReactElement => { const { t } = useTranslation(); + const theme = useCustomTheme(); + return ( -
-

{t('unsupportedBrowser.header')}

-

{t('unsupportedBrowser.message')}

-
+ + + {t('unsupportedBrowser.header')} + + + {t('unsupportedBrowser.message')} + + ); }; From e01dc99f30099a0db3295659c67a8714e28d9c01 Mon Sep 17 00:00:00 2001 From: OscarFava Date: Tue, 2 Dec 2025 11:27:21 +0100 Subject: [PATCH 3/6] Refactor ArchiveList and SupportedBrowserListItem components to use VividIcon for improved consistency and styling --- .../GoodBye/ArchiveList/ArchiveList.tsx | 22 ++++++++++----- .../SupportedBrowserListItem.tsx | 4 +-- frontend/src/pages/GoodBye/GoodBye.tsx | 28 +++++++++++++++++-- 3 files changed, 42 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx b/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx index fef97a29d..c2941ee0a 100644 --- a/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx +++ b/frontend/src/components/GoodBye/ArchiveList/ArchiveList.tsx @@ -1,5 +1,3 @@ -import WarningOutlinedIcon from '@mui/icons-material/WarningOutlined'; -import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; import Link from '@ui/Link'; @@ -13,16 +11,23 @@ import Box from '@ui/Box'; import Typography from '@ui/Typography'; import useMediaQuery from '@ui/useMediaQuery'; import useCustomTheme from '@Context/Theme'; +import VividIcon from '@components/VividIcon'; import { Archive, ArchiveStatus } from '../../../api/archiving/model'; const ArchiveDownloadButton = ({ url, id }: { id: string; url: string | undefined }) => { const { t } = useTranslation(); + const theme = useCustomTheme(); return ( - + @@ -31,12 +36,16 @@ const ArchiveDownloadButton = ({ url, id }: { id: string; url: string | undefine const ArchiveErrorIcon = () => { const { t } = useTranslation(); + const theme = useCustomTheme(); return ( - { padding: 1, justifyContent: 'center', }} - data-testid="archive-error-icon" /> ); @@ -102,7 +110,7 @@ const ArchiveList = ({ archives }: ArchiveListProps): ReactElement => { if (archives === 'error') { return ( - + {t('archiveList.error.text')} diff --git a/frontend/src/components/UnsupportedBrowser/SupportedBrowserListItem/SupportedBrowserListItem.tsx b/frontend/src/components/UnsupportedBrowser/SupportedBrowserListItem/SupportedBrowserListItem.tsx index c44bb8b88..9a0f3fdc3 100644 --- a/frontend/src/components/UnsupportedBrowser/SupportedBrowserListItem/SupportedBrowserListItem.tsx +++ b/frontend/src/components/UnsupportedBrowser/SupportedBrowserListItem/SupportedBrowserListItem.tsx @@ -1,5 +1,4 @@ import { ReactElement } from 'react'; -import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined'; import { useTranslation } from 'react-i18next'; import ListItem from '@ui/ListItem'; import ListItemIcon from '@ui/ListItemIcon'; @@ -7,6 +6,7 @@ import Link from '@ui/Link'; import Tooltip from '@ui/Tooltip'; import IconButton from '@ui/IconButton'; import ListItemText from '@ui/ListItemText'; +import VividIcon from '@components/VividIcon'; export type SupportedBrowserListItemProps = { url: string; @@ -29,7 +29,7 @@ const SupportedBrowserListItem = ({ - + diff --git a/frontend/src/pages/GoodBye/GoodBye.tsx b/frontend/src/pages/GoodBye/GoodBye.tsx index f5d7314d6..b83a056b9 100644 --- a/frontend/src/pages/GoodBye/GoodBye.tsx +++ b/frontend/src/pages/GoodBye/GoodBye.tsx @@ -4,6 +4,9 @@ import { useTranslation } from 'react-i18next'; import FlexLayout from '@ui/FlexLayout'; import Banner from '@components/Banner'; import Footer from '@components/Footer/Footer'; +import Box from '@ui/Box'; +import Typography from '@ui/Typography'; +import useCustomTheme from '@Context/Theme'; import useArchives from '../../hooks/useArchives'; import ArchiveList from '../../components/GoodBye/ArchiveList'; import GoodByeMessage from '../../components/GoodBye/GoodbyeMessage'; @@ -20,6 +23,7 @@ import useRoomName from '../../hooks/useRoomName'; */ const GoodBye = (): ReactElement => { const { t } = useTranslation(); + const theme = useCustomTheme(); const location = useLocation(); const roomName = useRoomName({ useLocationState: true, @@ -37,10 +41,28 @@ const GoodBye = (): ReactElement => { -
-

{t('archiveList.label')}

+ + + {t('archiveList.label')} + -
+