VIDSOL-217: Use global variables to change fontFamily and colors

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import './css/App.css';
 import './css/index.css';
+import { CssBaseline, ThemeProvider } from '@mui/material';
 import Room from './pages/MeetingRoom/index';
 import GoodBye from './pages/GoodBye/index';
 import WaitingRoom from './pages/WaitingRoom';
@@ -11,38 +12,42 @@ import { PublisherProvider } from './Context/PublisherProvider';
 import RedirectToWaitingRoom from './components/RedirectToWaitingRoom';
 import UnsupportedBrowserPage from './pages/UnsupportedBrowserPage';
 import RoomContext from './Context/RoomContext';
+import customTheme from './utils/customTheme/customTheme';
 
 const App = () => {
   return (
-    <Router>
-      <Routes>
-        <Route element={<RoomContext />}>
-          <Route
-            path="/waiting-room/:roomName"
-            element={
-              <PreviewPublisherProvider>
-                <WaitingRoom />
-              </PreviewPublisherProvider>
-            }
-          />
-          <Route
-            path="/room/:roomName"
-            element={
-              <SessionProvider>
-                <RedirectToWaitingRoom>
-                  <PublisherProvider>
-                    <Room />
-                  </PublisherProvider>
-                </RedirectToWaitingRoom>
-              </SessionProvider>
-            }
-          />
-        </Route>
-        <Route path="/goodbye" element={<GoodBye />} />
-        <Route path="*" element={<LandingPage />} />
-        <Route path="/unsupported-browser" element={<UnsupportedBrowserPage />} />
-      </Routes>
-    </Router>
+    <ThemeProvider theme={customTheme}>
+      <CssBaseline />
+      <Router>
+        <Routes>
+          <Route element={<RoomContext />}>
+            <Route
+              path="/waiting-room/:roomName"
+              element={
+                <PreviewPublisherProvider>
+                  <WaitingRoom />
+                </PreviewPublisherProvider>
+              }
+            />
+            <Route
+              path="/room/:roomName"
+              element={
+                <SessionProvider>
+                  <RedirectToWaitingRoom>
+                    <PublisherProvider>
+                      <Room />
+                    </PublisherProvider>
+                  </RedirectToWaitingRoom>
+                </SessionProvider>
+              }
+            />
+          </Route>
+          <Route path="/goodbye" element={<GoodBye />} />
+          <Route path="*" element={<LandingPage />} />
+          <Route path="/unsupported-browser" element={<UnsupportedBrowserPage />} />
+        </Routes>
+      </Router>
+    </ThemeProvider>
   );
 };
 

frontend/src/components/BackgroundEffects/SelectableOption/SelectableOption.spec.tsx

@@ -19,7 +19,13 @@ describe('SelectableOption', () => {
 
   it('renders with image when image is provided', () => {
     render(
-      <SelectableOption isSelected={false} onClick={() => {}} id="img-option" image="/test.jpg" />
+      <SelectableOption
+        isSelected={false}
+        onClick={() => {}}
+        title="background"
+        id="img-option"
+        image="/test.jpg"
+      />
     );
     expect(screen.getByTestId('background-img-option')).toBeInTheDocument();
     expect(screen.getByAltText('background')).toHaveAttribute('src', '/test.jpg');

frontend/src/components/BackgroundEffects/SelectableOption/SelectableOption.tsx

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 import { Box, Paper, Tooltip } from '@mui/material';
 import { DEFAULT_SELECTABLE_OPTION_WIDTH } from '../../../utils/constants';
+import { colors } from '../../../utils/customTheme/customTheme';
 
 export type SelectableOptionProps = {
   isSelected: boolean;
@@ -63,13 +64,13 @@ const SelectableOption = ({
           height: size,
           overflow: 'hidden',
           borderRadius: '16px',
-          border: isSelected ? '2px solid #1976d2' : '',
+          border: isSelected ? `2px solid ${colors.primary}` : '',
           cursor: isDisabled ? 'not-allowed' : 'pointer',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           transition: 'all 0.1s ease-in-out',
-          backgroundColor: isDisabled ? '#f5f5f5' : '#fff',
+          backgroundColor: isDisabled ? colors.backgroundDisabled : colors.background,
           opacity: isDisabled ? 0.5 : 1,
         }}
         {...otherProps}
@@ -88,7 +89,7 @@ const SelectableOption = ({
               <img
                 src={image}
                 title={title}
-                alt="background"
+                alt={title}
                 style={{ width: '100%', height: '100%', objectFit: 'cover' }}
               />
             ) : (

frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx

@@ -13,6 +13,7 @@ import DeviceSettingsMenu from '../DeviceSettingsMenu';
 import useBackgroundPublisherContext from '../../../hooks/useBackgroundPublisherContext';
 import useConfigContext from '../../../hooks/useConfigContext';
 import getControlButtonTooltip from '../../../utils/getControlButtonTooltip';
+import { colors } from '../../../utils/customTheme/customTheme';
 
 export type DeviceControlButtonProps = {
   deviceType: 'audio' | 'video';
@@ -115,7 +116,7 @@ const DeviceControlButton = ({
           data-testid={isAudio ? 'audio-dropdown-button' : 'video-dropdown-button'}
         >
           {open ? (
-            <ArrowDropDown sx={{ color: 'rgb(138, 180, 248)' }} />
+            <ArrowDropDown sx={{ color: colors.primaryLight }} />
           ) : (
             <ArrowDropUp className="text-gray-400" />
           )}

frontend/src/components/MeetingRoom/DeviceSettingsMenu/DeviceSettingsMenu.tsx

@@ -14,6 +14,7 @@ import VideoDevices from '../VideoDevices';
 import DropdownSeparator from '../DropdownSeparator';
 import VideoDevicesOptions from '../VideoDevicesOptions';
 import useConfigContext from '../../../hooks/useConfigContext';
+import { colors } from '../../../utils/customTheme/customTheme';
 
 export type DeviceSettingsMenuProps = {
   deviceType: 'audio' | 'video';
@@ -55,7 +56,6 @@ const DeviceSettingsMenu = ({
   const config = useConfigContext();
   const isAudio = deviceType === 'audio';
   const theme = useTheme();
-  const customLightBlueColor = 'rgb(138, 180, 248)';
   const { allowBackgroundEffects } = config.videoSettings;
   const shouldDisplayBackgroundEffects = hasMediaProcessorSupport() && allowBackgroundEffects;
 
@@ -70,16 +70,16 @@ const DeviceSettingsMenu = ({
     if (isAudio) {
       return (
         <>
-          <InputDevices handleToggle={handleToggle} customLightBlueColor={customLightBlueColor} />
-          <OutputDevices handleToggle={handleToggle} customLightBlueColor={customLightBlueColor} />
-          <ReduceNoiseTestSpeakers customLightBlueColor={customLightBlueColor} />
+          <InputDevices handleToggle={handleToggle} />
+          <OutputDevices handleToggle={handleToggle} />
+          <ReduceNoiseTestSpeakers />
         </>
       );
     }
 
     return (
       <>
-        <VideoDevices handleToggle={handleToggle} customLightBlueColor={customLightBlueColor} />
+        <VideoDevices handleToggle={handleToggle} />
         {shouldDisplayBackgroundEffects && (
           <>
             <DropdownSeparator />
@@ -110,14 +110,14 @@ const DeviceSettingsMenu = ({
             <ClickAwayListener onClickAway={handleClose}>
               <Paper
                 sx={{
-                  backgroundColor: 'rgb(32, 33, 36)',
-                  color: '#fff',
-                  padding: { xs: 1, sm: 2 }, // responsive padding
+                  backgroundColor: colors.darkGrey,
+                  color: colors.onPrimary,
+                  padding: { xs: 1, sm: 2 },
                   borderRadius: 2,
                   zIndex: 1,
                   transform: isAudio
                     ? 'translateY(-2%) translateX(5%)'
-                    : 'translateY(-5%) translateX(-15%)', // default transform
+                    : 'translateY(-5%) translateX(-15%)',
                   [theme.breakpoints.down(741)]: {
                     transform: isAudio
                       ? 'translateY(-2%) translateX(-10%)'
@@ -128,9 +128,9 @@ const DeviceSettingsMenu = ({
                       ? 'translateY(-2%) translateX(-5%)'
                       : 'translateY(-5%) translateX(-5%)',
                   },
-                  width: { xs: '90vw', sm: '100%' }, // responsive width
-                  maxWidth: 400, // max width for larger screens
-                  position: 'relative', // ensures the transform is applied correctly
+                  width: { xs: '90vw', sm: '100%' },
+                  maxWidth: 400,
+                  position: 'relative',
                 }}
               >
                 {renderSettingsMenu()}

frontend/src/components/MeetingRoom/EmojiGrid/EmojiGridDesktop.tsx

@@ -3,6 +3,7 @@ import { ReactElement, RefObject, useEffect, useState } from 'react';
 import { PopperChildrenProps } from '@mui/base';
 import SendEmojiButton from '../SendEmojiButton';
 import emojiMap from '../../../utils/emojis';
+import { colors } from '../../../utils/customTheme/customTheme';
 
 export type EmojiGridDesktopProps = {
   handleClickAway: (event: MouseEvent | TouchEvent) => void;
@@ -57,8 +58,8 @@ const EmojiGridDesktop = ({
                   className="flex items-center justify-center"
                   data-testid="emoji-grid"
                   sx={{
-                    backgroundColor: 'rgb(32, 33, 36)',
-                    color: '#fff',
+                    backgroundColor: colors.darkGrey,
+                    color: colors.onPrimary,
                     padding: { xs: 1 },
                     borderRadius: 2,
                     zIndex: 1,

frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import ToolbarButton from '../ToolbarButton';
 import EmojiGrid from '../EmojiGrid/EmojiGrid';
 import useConfigContext from '../../../hooks/useConfigContext';
+import { colors } from '../../../utils/customTheme/customTheme';
 
 export type EmojiGridProps = {
   isEmojiGridOpen: boolean;
@@ -46,7 +47,7 @@ const EmojiGridButton = ({
             onClick={handleToggle}
             icon={
               <EmojiEmotions
-                style={{ color: `${!isEmojiGridOpen ? 'white' : 'rgb(138, 180, 248)'}` }}
+                style={{ color: `${!isEmojiGridOpen ? 'white' : colors.primaryLight}` }}
               />
             }
             ref={anchorRef}

frontend/src/components/MeetingRoom/InputDevices/InputDevices.spec.tsx

@@ -74,7 +74,7 @@ describe('InputDevices Component', () => {
   });
 
   it('renders all available audio input devices', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} customLightBlueColor="#00f" />);
+    render(<InputDevices handleToggle={mockHandleToggle} />);
 
     expect(screen.getByText('Microphone')).toBeInTheDocument();
 
@@ -85,7 +85,7 @@ describe('InputDevices Component', () => {
   });
 
   it('changes audio input device on menu item click', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} customLightBlueColor="#00f" />);
+    render(<InputDevices handleToggle={mockHandleToggle} />);
 
     const micItem = screen.getByText('MacBook Pro Microphone (Built-in)');
     fireEvent.click(micItem);
@@ -97,7 +97,7 @@ describe('InputDevices Component', () => {
   });
 
   it('does not call setAudioSource if selected device is not found', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} customLightBlueColor="#00f" />);
+    render(<InputDevices handleToggle={mockHandleToggle} />);
 
     const bogusItem = document.createElement('li');
     bogusItem.textContent = 'Nonexistent Microphone';
@@ -110,7 +110,7 @@ describe('InputDevices Component', () => {
     publisherContext.publisher = null;
     mockUsePublisherContext.mockReturnValue(publisherContext);
 
-    render(<InputDevices handleToggle={mockHandleToggle} customLightBlueColor="#00f" />);
+    render(<InputDevices handleToggle={mockHandleToggle} />);
 
     const micItem = screen.getByText('MacBook Pro Microphone (Built-in)');
     fireEvent.click(micItem);
@@ -120,7 +120,7 @@ describe('InputDevices Component', () => {
   });
 
   it('shows check icon for selected device', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} customLightBlueColor="#00f" />);
+    render(<InputDevices handleToggle={mockHandleToggle} />);
 
     // The default audio device should be selected
     const checkIcon = screen.getByTestId('CheckIcon');
@@ -131,13 +131,13 @@ describe('InputDevices Component', () => {
     mockConfigContext.meetingRoomSettings.allowDeviceSelection = false;
     mockUseConfigContext.mockReturnValue(mockConfigContext);
 
-    render(<InputDevices handleToggle={mockHandleToggle} customLightBlueColor="#00f" />);
+    render(<InputDevices handleToggle={mockHandleToggle} />);
 
     expect(screen.queryByText('Microphone')).not.toBeInTheDocument();
   });
 
   it('handles click event when audioDeviceId is found', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} customLightBlueColor="#00f" />);
+    render(<InputDevices handleToggle={mockHandleToggle} />);
 
     const micItem = screen.getByText('Soundcore Life A2 NC (Bluetooth)');
     fireEvent.click(micItem);

frontend/src/components/MeetingRoom/InputDevices/InputDevices.tsx

@@ -9,10 +9,10 @@ import usePublisherContext from '../../../hooks/usePublisherContext';
 import { setStorageItem, STORAGE_KEYS } from '../../../utils/storage';
 import useConfigContext from '../../../hooks/useConfigContext';
 import cleanAndDedupeDeviceLabels from '../../../utils/cleanAndDedupeDeviceLabels';
+import { colors } from '../../../utils/customTheme/customTheme';
 
 export type InputDevicesProps = {
   handleToggle: () => void;
-  customLightBlueColor: string;
 };
 
 /**
@@ -21,13 +21,9 @@ export type InputDevicesProps = {
  * Displays the audio input devices for a user. Handles switching audio input devices.
  * @param {InputDevicesProps} props - The props for the component.
  *  @property {Function} handleToggle - The click handler to handle closing the menu.
- *  @property {string} customLightBlueColor - The custom color used for the toggled icon.
  * @returns {ReactElement | false} - The InputDevices component.
  */
-const InputDevices = ({
-  handleToggle,
-  customLightBlueColor,
-}: InputDevicesProps): ReactElement | false => {
+const InputDevices = ({ handleToggle }: InputDevicesProps): ReactElement | false => {
   const { t } = useTranslation();
   const { publisher } = usePublisherContext();
   const { meetingRoomSettings } = useConfigContext();
@@ -83,22 +79,23 @@ const InputDevices = ({
                   backgroundColor: 'transparent',
                   '&.Mui-selected': {
                     backgroundColor: 'transparent',
-                    color: customLightBlueColor,
+                    color: colors.primaryLight,
                   },
                   '&:hover': {
-                    backgroundColor: 'rgba(25, 118, 210, 0.12)',
+                    backgroundColor: colors.primaryHover,
                   },
                 }}
               >
                 <Box
+                  key={`${option}-input-device`}
                   sx={{
                     display: 'flex',
                     mb: 0.5,
                     overflow: 'hidden',
                   }}
                 >
                   {isSelected ? (
-                    <CheckIcon sx={{ color: customLightBlueColor, fontSize: 24, mr: 2 }} />
+                    <CheckIcon sx={{ color: colors.primaryLight, fontSize: 24, mr: 2 }} />
                   ) : (
                     <Box sx={{ width: 40 }} /> // Placeholder when CheckIcon is not displayed
                   )}