VIDSOL-240: Landing page UI/UX refactor #255
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
OscarFava
requested review from
behei-vonage,
Copilot and
johnny-quesada-developer
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the landing page UI/UX according to the design team's proposal, transitioning from Tailwind CSS to Material-UI (MUI) with custom theming. The refactor wraps MUI components into a custom UI library, creates a reusable layout system, and updates semantic tokens for consistent styling across the application.
Key Changes:
- Created a custom UI component library wrapping MUI components (Button, TextField, Typography, Stack, Box, InputAdornment)
- Introduced FlexLayout component for consistent page structure across landing, goodbye, unsupported browser, and waiting room pages
- Updated theme with new color tokens, typography settings, and component-specific style overrides
Reviewed Changes
Copilot reviewed 50 out of 58 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/ui/* | New custom UI component library wrapping MUI components with tests |
| frontend/src/utils/customTheme/customTheme.ts | Updated theme tokens including colors, typography, and component overrides |
| frontend/src/pages/* | Refactored pages to use new FlexLayout and UI components |
| frontend/src/components/* | Updated components to use custom UI library instead of direct MUI imports |
| frontend/src/locales/*.json | Updated translation strings for new UI copy |
| integration-tests/tests/goodbye.spec.ts | Updated test to match new landing page heading text |
| frontend/index.html | Added Inter font and updated root background color |
| frontend/vite.config.ts | Added @ui path alias |
| frontend/tsconfig.json | Added @ui path mapping and ui directory to includes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…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
… consistent styling
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 51 out of 64 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 51 out of 64 changed files in this pull request and generated 1 comment.
💡 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 51 out of 64 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
What is this PR doing?
This PR is modifying the UI of the landing page according to the proposal of the design team. It also includes:
How should this be manually tested?
Check Landing page is the proposed one by the design team and tokens are proper (color, font, etc.).
Check that the other main pages follow the same layout (goodbye, unsupported-browser and waiting room).
What are the relevant tickets?
A maintainer will add this ticket number.
Resolves VIDSOL-240
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?