VIDSOL-288: UI/UX - Goodbye/UnsupportedBrowser page #280
Conversation
…tton, SupportedBrowserListItem, and SupportedBrowsers components to use custom UI components
OscarFava
changed the title
There was a problem hiding this comment.
Pull request overview
This PR updates the Goodbye and Unsupported Browser pages to align with new design specifications by migrating from Tailwind CSS to MUI (Material-UI) components with semantic tokens. The changes wrap MUI components into a custom UI library and apply consistent theming across these pages.
Key Changes:
- Migration from Tailwind CSS classes to MUI's
sxprop for styling - Introduction of custom UI component wrappers (Box, Typography, Button, etc.) from
@ui/* - Integration of theme-based semantic color tokens via
useCustomTheme()
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| UnsupportedBrowserMessage.tsx | Converted Tailwind classes to MUI Box/Typography components with theme colors |
| SupportedBrowsers.tsx | Replaced Tailwind styling with MUI components and added responsive media query handling |
| SupportedBrowserListItem.tsx | Updated to use wrapped UI components instead of direct MUI imports |
| ReenterRoomButton.tsx | Simplified button styling by removing redundant sx properties and Tailwind classes |
| GoodbyeMessage.tsx | Migrated all Tailwind classes to MUI Box/Typography with theme integration |
| GoodbyeMessage.spec.tsx | Updated test assertions from Tailwind class checks to inline style checks |
| GoToLandingPageButton.tsx | Removed custom styling in favor of default MUI button styles |
| ArchiveList.tsx | Converted Tailwind utility classes to MUI components with consistent theming |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| width: '40px', | ||
| height: '40px', | ||
| padding: '8px', | ||
| padding: 1, |
There was a problem hiding this comment.
[nitpick] Inconsistent padding unit usage. Line 44 uses spacing unit 1 while line 60 uses shorthand p: 1. For consistency and maintainability, use the same pattern throughout the file. Consider using the longhand padding property on both lines or the shorthand p on both lines.
| padding: 1, | |
| p: 1, |
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> | ||
| <WarningOutlinedIcon color="warning" /> | ||
| <h3 className="text-lg text-slate-500">{t('archiveList.error.text')}</h3> | ||
| </> | ||
| <Typography variant="h6" sx={{ color: theme.colors.textTertiary }}> | ||
| {t('archiveList.error.text')} | ||
| </Typography> | ||
| </Box> |
There was a problem hiding this comment.
The error message combining an icon and text lacks semantic structure for screen readers. Consider wrapping this in an element with role=\"alert\" or using an aria-label on the Box to ensure assistive technologies properly announce this as an error state to users.
…goodbye-unsupported-page
…ividIcon for improved consistency and styling
|
What is this PR doing?
This PR is modifying the UI of the Goodbye Page & Unsupported browser page according to the proposal of the design team. It also includes:
Wrap MUI components into our own library (UI).
Modify tailwind to MUI.
Use the semantic tokens.
How should this be manually tested?
Check visual changes in the Goodbye Page & Unsupported browser page.
Resolves VIDSOL-288
Checklist
[X] Branch is based on
develop(notmain).[ ] Resolves a
Known Issue.[ ] If yes, did you remove the item from the
docs/KNOWN_ISSUES.md?[ ] Resolves an item reported in
Issues.If yes, which issue? Issue Number?