VIDSOL-275: UI/UX - Waiting Room - Video preview #279
Conversation
…div with Box for improved layout and responsiveness
…ith Box for improved styling, integrate custom theme, and define VIDEO_CONTAINER_HEIGHT_WR constant for consistent height management.
… into vidsol-275-waiting-room-video-preview
- Updated terminology from "Background Effects" to "Background settings" across various components and tests for consistency. - Removed unused Blur icon component and its associated tests. - Refactored SelectableOption component to remove isDisabled prop and adjusted styles. - Updated tests in DeviceSettingsMenu, EmojiGrid, and other components to reflect new terminology. - Introduced a custom useMediaQuery hook to replace MUI's useMediaQuery for better abstraction. - Adjusted styles in App.css for improved layout and responsiveness. - Enhanced BackgroundEffectsDialog with improved styling and structure.
… into vidsol-275-waiting-room-video-preview
…Button components to use custom UI components
There was a problem hiding this comment.
Pull request overview
This PR modernizes the UI/UX of the Waiting Room's video preview and background replacement features. The implementation includes wrapping MUI components into a custom UI library, migrating from Tailwind to MUI styling using semantic tokens, and refreshing the visual design of background settings.
Key changes:
- Created wrapper hooks and components for MUI (useMediaQuery, Box, IconButton, etc.) to provide a consistent UI abstraction layer
- Replaced Tailwind CSS classes with MUI's sx prop throughout the waiting room components
- Updated terminology from "Background Effects" to "Background settings" across all locales and interfaces
Reviewed changes
Copilot reviewed 62 out of 62 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/ui/useMediaQuery/* | New wrapper hook for MUI's useMediaQuery with comprehensive tests |
| frontend/src/utils/constants.tsx | Added constants for waiting room video container dimensions |
| frontend/src/test/setup.ts | Mocked scrollIntoView for jsdom test environment |
| frontend/src/pages/WaitingRoom/WaitingRoom.tsx | Replaced div/Tailwind with Box/MUI sx for layout |
| frontend/src/pages/MeetingRoom/MeetingRoom.spec.tsx | Updated imports to use wrapped useMediaQuery |
| frontend/src/main.tsx | Changed overflow from 'hidden' to 'auto' |
| frontend/src/locales/*.json | Updated terminology from "Background Effects" to "Background settings" |
| frontend/src/hooks/useIsTabletViewport.tsx | Updated to use wrapped useMediaQuery |
| frontend/src/hooks/useIsSmallViewport.tsx | Updated to use wrapped useMediaQuery |
| frontend/src/css/App.css | Removed unused CSS classes and adjusted grid heights |
| frontend/src/components/WaitingRoom/* | Converted all components to use MUI sx and semantic tokens |
| frontend/src/components/VividIcon/VividIcon.tsx | Added sx prop support for styling |
| frontend/src/components/BackgroundEffects/* | Restructured background effects UI, removed tab-based layout, simplified file upload |
| frontend/src/components/Icons/Blur/* | Removed custom Blur icon (replaced with VividIcon) |
| README.md | Updated terminology references |
💡 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 67 out of 67 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…lity for styling conversion
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 69 out of 69 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...ackgroundEffects/AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout.tsx
Show resolved
Hide resolved
frontend/src/components/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx
Show resolved
Hide resolved
…nteractions in the video preview area
|
… into vidsol-275-waiting-room-video-preview
What is this PR doing?
This PR is modifying the UI of the Waiting room Video preview & background 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.
Use the semantic tokens.
How should this be manually tested?
Check visual changes in the waiting room Video Preview and background replacement.
What are the relevant tickets?
A maintainer will add this ticket number.
Resolves VIDSOL-275
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?