VIDSOL-291: UI/UX: Header and Language selector #268
Conversation
…e titles in localization files
…e subtitles in localization files
…rs in UI + Adapt UI/UX of Join/Start meeting
…lexLayout component with tests
…c.ts-snapshots/Landing-page-UI-test-1-Electron-linux.png
…c.ts-snapshots/Landing-page-UI-test-1-Google-Chrome-Fake-Devices-linux.png
…c.ts-snapshots/Landing-page-UI-test-1-Microsoft-Edge-linux.png
…c.ts-snapshots/Landing-page-UI-test-1-Mobile-Chrome-linux.png
…c.ts-snapshots/Landing-page-UI-test-1-Opera-linux.png
…rol, IconButton, Link, MenuItem, Select, and Tooltip components with tests
… consistent styling
There was a problem hiding this comment.
Pull Request Overview
This PR updates the UI/UX of the Header and Language selector components by migrating from direct MUI usage to wrapped UI components. The changes include creating a custom UI library that wraps Material-UI components, replacing Tailwind CSS with MUI's styling system, implementing semantic tokens for theming, and establishing a consistent layout structure.
Key Changes:
- Created wrapper components for MUI elements (Tooltip, Select, MenuItem, Link, IconButton, FormControl, Header, Box) in the
frontend/uidirectory - Migrated component styling from Tailwind CSS to MUI's sx prop and theme system
- Updated BannerLogo to use navigation hooks instead of Link component with improved responsive behavior
Reviewed Changes
Copilot reviewed 35 out of 42 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/ui/Tooltip/* | New wrapper component for MUI Tooltip with comprehensive test coverage |
| frontend/ui/Select/* | New wrapper component for MUI Select with test coverage for various states |
| frontend/ui/MenuItem/* | New wrapper component for MUI MenuItem with basic interaction tests |
| frontend/ui/Link/* | New wrapper component for MUI Link with tests for external links and click handling |
| frontend/ui/IconButton/* | New wrapper component for MUI IconButton with size variation tests |
| frontend/ui/Header/* | New composite wrapper combining AppBar and Toolbar with configurable props |
| frontend/ui/FormControl/* | New wrapper component for MUI FormControl with child component tests |
| frontend/ui/Box/Box.tsx | Enhanced Box component with generic type support for custom element types |
| frontend/ui/SelectChangeEvent.tsx | Type export for Select change events |
| frontend/src/utils/customTheme/customTheme.ts | Added new text.light color token and Select component styling |
| frontend/src/components/LanguageSelector/* | Migrated to wrapped UI components, removed className prop, extracted types to separate file |
| frontend/src/components/GHRepoButton/* | Replaced MUI GitHub icon with VividIcon and migrated to wrapped components |
| frontend/src/components/BannerLogo/* | Replaced Link with onClick handler, added responsive logo switching, migrated to MUI sx styling |
| frontend/src/components/BannerLinks/BannerLinks.tsx | Replaced div with Box component |
| frontend/src/components/BannerLanguage/BannerLanguage.tsx | Replaced div with Box component |
| frontend/src/components/BannerDateTime/BannerDateTime.tsx | Added tablet viewport hiding, migrated to Typography and Box with semantic token colors |
| frontend/src/components/Banner/Banner.tsx | Replaced AppBar/Toolbar with Header wrapper component |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 35 out of 42 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…deo-react-app into ofava/vidsol-291-header
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 35 out of 42 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
…inability; streamline Box component type definitions
…n package.json for improved command execution
fixing ui coverage setup
…e viewport settings are explicitly defined
…ance color tokens with additional shades for better design flexibility
|
What is this PR doing?
This PR is modifying the UI of the Header and Language selector. according to the proposal of the design team. It also includes:
Wrap MUI components into our own library (UI). Wrap all, not only Header.
Modify tailwind to MUI.
Create a basic layout to all pages to use the same structure.
Use the semantic tokens.
How should this be manually tested?
Check visual changes in the header and language selector. Vonage Icon can be clicked to return to the landing page.
What are the relevant tickets?
A maintainer will add this ticket number.
Resolves VIDSOL-291
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?