VIDSOL-271: UI/UX - Waiting Room - General Layout #277
Conversation
…nd UserNameInput components
…dsol-271-waiting-room-general
…pdate translations and add error messages for user input
…sername validation with tests, refactor ControlPanel and MenuMoreOptions for improved layout, introduce ButtonBase component for consistent styling, and update FlexLayout to support responsive padding.
There was a problem hiding this comment.
Pull Request Overview
This PR updates the Waiting Room UI according to the design team's proposal by migrating from Tailwind CSS to Material-UI (MUI) components, wrapping MUI components in a custom UI library, and implementing semantic tokens. The changes create a consistent layout structure across pages using a new Card component.
Key Changes:
- Created a new Card component that wraps MUI Box with standardized styling for layout consistency
- Replaced Tailwind CSS classes with MUI's sx prop styling system in the waiting room components
- Updated localization strings to reflect new UI copy and structure across all supported languages
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/ui/Card/Card.tsx | New Card component wrapper around Box with theme-aware styling |
| frontend/ui/Card/Card.spec.tsx | Test coverage for the new Card component |
| frontend/ui/Card/index.ts | Export barrel for Card component |
| frontend/ui/Box/Box.tsx | Exported BoxProps type to support Card implementation |
| frontend/src/components/WaitingRoom/UserNameInput/UserNameInput.tsx | Refactored to use Card and MUI components instead of Tailwind CSS |
| frontend/src/components/RoomJoinContainer/RoomJoinContainer.tsx | Replaced custom Box styling with Card component |
| frontend/src/components/JoinExistingRoom/JoinExistingRoom.tsx | Removed form-related props from Stack component |
| frontend/src/locales/en.json | Updated waiting room label strings |
| frontend/src/locales/es.json | Updated waiting room label strings (Spanish) |
| frontend/src/locales/es-MX.json | Updated waiting room label strings (Mexican Spanish) |
| frontend/src/locales/it.json | Updated waiting room label strings (Italian) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…o WaitingRoom and VideoContainer components
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 32 out of 34 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ut and join button
… in landing tests
|
What is this PR doing?
This PR is modifying the UI of the Waiting room (exclude video preview & back replacement). 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 waiting room (exclude video preview).
What are the relevant tickets?
A maintainer will add this ticket number.
Resolves VIDSOL-271
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?