VIDSOL-271: UI/UX - Waiting Room - General Layout

frontend/src/Context/BackgroundEffectsDialog/BackgroundEffectsDialogContext.tsx

@@ -0,0 +1,62 @@
+import React, { createContext, useState, useContext, ReactNode, useMemo } from 'react';
+
+interface BackgroundEffectsDialogContextType {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+}
+
+const BackgroundEffectsDialogContext = createContext<
+  BackgroundEffectsDialogContextType | undefined
+>(undefined);
+
+interface BackgroundEffectsDialogProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * BackgroundEffectsDialogProvider
+ *
+ * Provides context for managing the BackgroundEffectsDialog state across components.
+ * This allows any child component to open or close the background effects dialog.
+ * @param {BackgroundEffectsDialogProviderProps} props - The props for the component.
+ * @property {ReactNode} children - The child components.
+ * @returns {React.ReactElement} - The BackgroundEffectsDialogProvider component
+ */
+export const BackgroundEffectsDialogProvider: React.FC<BackgroundEffectsDialogProviderProps> = ({
+  children,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const value = useMemo(
+    () => ({
+      isOpen,
+      open: () => setIsOpen(true),
+      close: () => setIsOpen(false),
+    }),
+    [isOpen]
+  );
+
+  return (
+    <BackgroundEffectsDialogContext.Provider value={value}>
+      {children}
+    </BackgroundEffectsDialogContext.Provider>
+  );
+};
+
+/**
+ * useBackgroundEffectsDialog
+ *
+ * Custom hook to access the BackgroundEffectsDialog context.
+ * @returns {BackgroundEffectsDialogContextType} The context value with isOpen, open, and close functions.
+ * @throws {Error} If used outside of BackgroundEffectsDialogProvider.
+ */
+export const useBackgroundEffectsDialog = (): BackgroundEffectsDialogContextType => {
+  const context = useContext(BackgroundEffectsDialogContext);
+  if (!context) {
+    throw new Error(
+      'useBackgroundEffectsDialog must be used within a BackgroundEffectsDialogProvider'
+    );
+  }
+  return context;
+};

frontend/src/Context/BackgroundEffectsDialog/index.ts

@@ -0,0 +1,4 @@
+export {
+  BackgroundEffectsDialogProvider,
+  useBackgroundEffectsDialog,
+} from './BackgroundEffectsDialogContext';

frontend/src/Context/Theme/helpers/getMuiCustomTheme.ts

@@ -159,6 +159,13 @@ const getMuiCustomTheme = ({ tokens }: { tokens: ThemeTokens }) => {
           root: {
             backgroundColor: colors.onSecondary,
             color: colors.textSecondary,
+          },
+        },
+      },
+      MuiMenuItem: {
+        styleOverrides: {
+          root: {
+            color: colors.textSecondary,
             fontSize: tokens.typography.typeScale.desktop['body-base'].fontSize.value,
             lineHeight: tokens.typography.typeScale.desktop['body-base'].lineHeight.value,
           },

frontend/src/components/JoinExistingRoom/JoinExistingRoom.tsx

@@ -14,13 +14,7 @@ const JoinExistingRoom = (): ReactElement => {
   const [hasError, setHasError] = useState(false);
 
   return (
-    <Stack
-      direction="column"
-      component="form"
-      data-testid="JoinExistingRoom"
-      spacing={3}
-      sx={{ mb: 6, width: '100%' }}
-    >
+    <Stack direction="column" data-testid="JoinExistingRoom" spacing={3} sx={{ width: '100%' }}>
       <RoomNameInput
         setRoomName={setRoomName}
         roomName={roomName}

frontend/src/components/LanguageSelector/LanguageSelector.tsx

@@ -6,6 +6,7 @@ import FormControl from '@ui/FormControl';
 import Select from '@ui/Select';
 import { SelectChangeEvent } from '@ui/SelectChangeEvent';
 import useCustomTheme from '@Context/Theme';
+import { SvgIconProps } from '@mui/material';
 import { LanguageOption, LanguageSelectorProps } from './LanguageSelector.types';
 import useIsSmallViewport from '../../hooks/useIsSmallViewport';
 import VividIcon from '../VividIcon/VividIcon';
@@ -19,6 +20,10 @@ const languageOptions: LanguageOption[] = [
   { code: 'es-MX', name: 'Español (México)', flag: 'flag-mexico' },
 ];
 
+const ChevronDownIcon = (props: SvgIconProps) => (
+  <VividIcon name="chevron-down-line" customSize={-5} {...props} sx={{ color: 'black' }} />
+);
+
 /**
  * LanguageSelector Component
  * A dropdown component that allows users to select their preferred language.
@@ -48,6 +53,7 @@ const LanguageSelector = ({ showFlag = true }: LanguageSelectorProps): ReactElem
       <Select
         value={currentLanguage}
         onChange={handleLanguageChange}
+        IconComponent={ChevronDownIcon}
         displayEmpty
         sx={{
           '& .MuiOutlinedInput-notchedOutline': {

frontend/src/components/RoomJoinContainer/RoomJoinContainer.tsx

@@ -1,9 +1,8 @@
 import { useNavigate } from 'react-router-dom';
 import { ReactElement } from 'react';
-import Box from '@ui/Box';
 import Typography from '@ui/Typography';
 import { useTranslation } from 'react-i18next';
-import useCustomTheme from '@Context/Theme';
+import Card from '@ui/Card';
 import generateRoomName from '../../utils/generateRoomName';
 import NewRoomButton from '../NewRoomButton';
 import JoinContainerSeparator from '../JoinContainerSeparator';
@@ -19,31 +18,19 @@ const RoomJoinContainer = (): ReactElement => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const randomRoom = generateRoomName();
-  const theme = useCustomTheme();
 
   const handleNewRoom = () => {
     navigate(`/waiting-room/${randomRoom}`);
   };
 
   return (
-    <Box
-      sx={{
-        maxWidth: { xs: '100%', md: '500px' },
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'start',
-        bgcolor: 'background.paper',
-        padding: { xs: '0px 0px 0px 0px', md: '40px 40px 0px 40px' },
-        borderRadius: theme.shapes.borderRadiusMedium,
-      }}
-    >
+    <Card component="form">
       <Typography sx={{ mb: 2, typography: 'h6' }}>{t('button.startNewRoom')}</Typography>
       <NewRoomButton handleNewRoom={handleNewRoom} />
       <JoinContainerSeparator />
       <Typography sx={{ mb: 2, typography: 'h6' }}>{t('button.joinExistingMeeting')}</Typography>
       <JoinExistingRoom />
-    </Box>
+    </Card>
   );
 };
 

frontend/src/components/SoundTest/SoundTest.tsx

@@ -1,6 +1,7 @@
-import { MenuItem, Typography, ClickAwayListener } from '@mui/material';
 import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import ClickAwayListener from '@ui/ClickAwayListener';
+import MenuItem from '@ui/MenuItem';
 import useAudioOutputContext from '../../hooks/useAudioOutputContext';
 
 export type SoundTestProps = {
@@ -48,9 +49,7 @@ const SoundTest = ({ children }: SoundTestProps): ReactElement => {
     <ClickAwayListener onClickAway={() => stopAudio()}>
       <MenuItem onClick={handlePlayAudio} data-testid="soundTest">
         {children}
-        <Typography noWrap>
-          {!audioIsPlaying ? t('soundTest.start') : t('soundTest.stop')}
-        </Typography>
+        {!audioIsPlaying ? t('soundTest.start') : t('soundTest.stop')}
       </MenuItem>
     </ClickAwayListener>
   );

frontend/src/components/VividIcon/VividIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface VividIconProps {
+interface VividIconProps extends Record<string, unknown> {
   name: string;
   customSize: -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
 }
@@ -13,9 +13,9 @@ interface VividIconProps {
  * @property {number} customSize - The size of the icon, ranging from -6 to 5. -6 is the smallest and 5 is the largest.
  * @returns {React.ReactElement} The rendered VividIcon component.
  */
-const VividIcon: React.FC<VividIconProps> = ({ name, customSize }) => {
+const VividIcon: React.FC<VividIconProps> = ({ name, customSize, ...props }) => {
   // @ts-expect-error custom element
-  return <vwc-icon size={customSize} name={name} data-testid={`vivid-icon-${name}`} />;
+  return <vwc-icon size={customSize} name={name} data-testid={`vivid-icon-${name}`} {...props} />;
 };
 
 export default VividIcon;

frontend/src/components/WaitingRoom/ControlPanel/ControlPanel.spec.tsx

@@ -1,10 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
 import { cleanup, screen, render as renderBase } from '@testing-library/react';
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import useDevices from '@hooks/useDevices';
 import { AllMediaDevices } from '@app-types/room';
 import { allMediaDevices } from '@utils/mockData/device';
 import { AppConfigProviderWrapperOptions, makeAppConfigProviderWrapper } from '@test/providers';
+import { BackgroundEffectsDialogProvider } from '@Context/BackgroundEffectsDialog/BackgroundEffectsDialogContext';
 import ControlPanel from '.';
 
 vi.mock('@hooks/useDevices.tsx');
@@ -169,5 +170,11 @@ function render(
 ) {
   const { AppConfigWrapper } = makeAppConfigProviderWrapper(options?.appConfigOptions);
 
-  return renderBase(ui, { ...options, wrapper: AppConfigWrapper });
+  const AllProviders = ({ children }: { children: React.ReactNode }) => (
+    <AppConfigWrapper>
+      <BackgroundEffectsDialogProvider>{children}</BackgroundEffectsDialogProvider>
+    </AppConfigWrapper>
+  );
+
+  return renderBase(ui, { ...options, wrapper: AllProviders });
 }