VIDSOL-284: UI/UX - Meeting Room

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

@@ -130,6 +130,14 @@ const getMuiCustomTheme = ({ tokens }: { tokens: ThemeTokens }) => {
           },
         },
       },
+      MuiDialog: {
+        styleOverrides: {
+          paper: {
+            backgroundColor: colors.surface,
+            color: colors.onSurface,
+          },
+        },
+      },
       MuiOutlinedInput: {
         styleOverrides: {
           root: {

frontend/src/components/BackgroundEffects/BackgroundGallery/BackgroundGallery.tsx

@@ -112,9 +112,7 @@ const BackgroundGallery = ({
                     cursor: isSelected ? 'default' : 'pointer',
                     backgroundColor: isSelected ? theme.colors.disabled : theme.colors.onBackground,
                     '&:hover': {
-                      backgroundColor: isSelected
-                        ? theme.colors.disabled
-                        : theme.colors.primaryHover,
+                      backgroundColor: isSelected ? theme.colors.disabled : theme.colors.background,
                     },
                   }}
                 >

frontend/src/components/DeviceAccessAlert/DeviceAccessAlert.tsx

@@ -1,8 +1,12 @@
-import { AlertTitle, Box, Dialog, Stack, Alert } from '@mui/material';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DEVICE_ACCESS_STATUS } from '../../utils/constants';
 import { isWebKit } from '../../utils/util';
+import Alert from '@ui/Alert';
+import Dialog from '@ui/Dialog';
+import Box from '@ui/Box';
+import Stack from '@ui/Stack';
+import AlertTitle from '@ui/AlertTitle';
 
 export type DeviceAccessAlertProps = {
   accessStatus: string | null;

frontend/src/components/HiddenParticipantsTile/HiddenParticipantsTile.tsx

@@ -1,11 +1,13 @@
 import { ReactElement } from 'react';
-import { AvatarGroup } from '@mui/material';
 import { Box } from 'opentok-layout-js';
 import { SubscriberWrapper } from '@app-types/session';
 import getBoxStyle from '@utils/helpers/getBoxStyle';
 import useSessionContext from '@hooks/useSessionContext';
 import useShouldShowParticipantList from '@Context/AppConfig/hooks/useShouldShowParticipantList';
 import AvatarInitials from '../AvatarInitials';
+import AvatarGroup from '@ui/AvatarGroup';
+import ButtonBase from '@ui/ButtonBase';
+import useCustomTheme from '@Context/Theme';
 
 export type HiddenParticipantsTileProps = {
   box: Box;
@@ -28,24 +30,38 @@ const HiddenParticipantsTile = ({
   const { toggleParticipantList } = useSessionContext();
 
   const showParticipantList = useShouldShowParticipantList();
+  const theme = useCustomTheme();
 
   const { height, width } = box;
   const diameter = Math.min(height, width) * 0.38;
   return (
-    <button
+    <ButtonBase
       id="hidden-participants"
       data-testid="hidden-participants"
-      className={`absolute m-1 flex items-center justify-center rounded-xl bg-notVeryGray-100 transition-colors ${
-        showParticipantList ? 'cursor-pointer hover:bg-[rgb(76,80,82)]' : 'cursor-default'
-      }`}
-      style={getBoxStyle(box)}
+      sx={{
+        position: 'absolute',
+        margin: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 3,
+        backgroundColor: theme.colors.darkGrey,
+        transition: 'background-color 150ms',
+        cursor: showParticipantList ? 'pointer' : 'default',
+        ...(showParticipantList && {
+          '&:hover': {
+            backgroundColor: theme.colors.darkGreyHover,
+          },
+        }),
+        ...getBoxStyle(box),
+      }}
       onClick={showParticipantList ? toggleParticipantList : () => {}}
       type="button"
     >
       <AvatarGroup
         total={hiddenSubscribers.length}
-        className="border-none"
         sx={{
+          border: 'none',
           '& .MuiAvatar-root': {
             transitionDuration: '150ms',
             height: `${diameter}px`,
@@ -61,7 +77,7 @@ const HiddenParticipantsTile = ({
           return <AvatarInitials key={streamId} initials={initials} username={name} sx={sx} />;
         })}
       </AvatarGroup>
-    </button>
+    </ButtonBase>
   );
 };
 

frontend/src/components/Icons/PushPinOffIcon/PushPinOffIcon.tsx

@@ -1,4 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
+import { SvgIconProps } from '@ui/SvgIconProps';
+import SvgIcon from '@ui/SvgIcon';
 import { ReactElement } from 'react';
 
 /**

frontend/src/components/MeetingRoom/ArchivingButton/ArchivingButton.tsx

@@ -1,5 +1,3 @@
-import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
-import { Tooltip } from '@mui/material';
 import { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useRoomName from '@hooks/useRoomName';
@@ -8,6 +6,9 @@ import useSessionContext from '@hooks/useSessionContext';
 import useAppConfig from '@Context/AppConfig/hooks/useAppConfig';
 import ToolbarButton from '../ToolbarButton';
 import PopupDialog, { DialogTexts } from '../PopupDialog';
+import Tooltip from '@ui/Tooltip';
+import useCustomTheme from '@Context/Theme';
+import VividIcon from '@components/VividIcon';
 
 export type ArchivingButtonProps = {
   isOverflowButton?: boolean;
@@ -31,6 +32,7 @@ const ArchivingButton = ({
 }: ArchivingButtonProps): ReactElement | false => {
   const { t } = useTranslation();
   const roomName = useRoomName();
+  const theme = useCustomTheme();
   const { archiveId } = useSessionContext();
   const allowArchiving = useAppConfig(
     ({ meetingRoomSettings }) => meetingRoomSettings.allowArchiving
@@ -94,8 +96,10 @@ const ArchivingButton = ({
             onClick={handleButtonClick}
             data-testid="archiving-button"
             icon={
-              <RadioButtonCheckedIcon
-                style={{ color: `${isRecording ? 'rgb(239 68 68)' : 'white'}` }}
+              <VividIcon
+                name="radio-checked-2-solid"
+                customSize={-5}
+                style={{ color: `${isRecording ? theme.colors.error : theme.colors.onSecondary}` }}
               />
             }
             sx={{

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

@@ -35,13 +35,13 @@ describe('AudioIndicator', () => {
 
   it('renders Mic icon when participant is unmuted but not speaking', () => {
     render(<AudioIndicator {...defaultProps} />);
-    const micIcon = screen.getByTestId('MicIcon');
+    const micIcon = screen.getByTestId('vivid-icon-microphone-2-solid');
     expect(micIcon).toBeInTheDocument();
   });
 
   it('renders Mic off icon when participant is muted', () => {
     render(<AudioIndicator {...defaultProps} hasAudio={false} />);
-    const micOffIcon = screen.getByTestId('MicOffIcon');
+    const micOffIcon = screen.getByTestId('vivid-icon-mic-mute-solid');
     expect(micOffIcon).toBeInTheDocument();
   });
 });

frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.tsx

@@ -1,16 +1,17 @@
-import { MicOff, Mic } from '@mui/icons-material';
 import { ReactElement, useState } from 'react';
 import { Stream } from '@vonage/client-sdk-video';
-import Tooltip from '@mui/material/Tooltip';
-import { IconButton } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import PopupDialog, { DialogTexts } from '../PopupDialog';
 import VoiceIndicatorIcon from '../VoiceIndicator/VoiceIndicator';
 import useSessionContext from '../../../hooks/useSessionContext';
+import IconButton from '@ui/IconButton';
+import Tooltip from '@ui/Tooltip';
+import VividIcon from '@components/VividIcon';
+import Box from '@ui/Box';
 
 export type AudioIndicatorProps = {
   hasAudio: boolean | undefined;
-  indicatorStyle?: string;
+  indicatorStyle?: React.CSSProperties;
   indicatorColor?: string;
   stream?: Stream;
   audioLevel?: number;
@@ -23,7 +24,7 @@ export type AudioIndicatorProps = {
  * This component displays an icon based on the audio status and handles muting another user.
  * @param {AudioIndicatorProps} hasAudio - Indicates whether the user has audio enabled.
  *  @property {boolean | undefined} audioLevel - (optional) Indicates the current audio level of the video tile.
- *  @property {string} indicatorStyle - (optional) The styling props for the component.
+ *  @property {React.CSSProperties} indicatorStyle - (optional) The MUI sx styling props for the component.
  *  @property {string} indicatorColor - (optional) The color of the audio indicator button.
  *  @property {Stream} stream - (optional) the stream that can be used to force mute a user.
  *  @property {string} participantName - (optional) the name of the participant that can be muted.
@@ -62,7 +63,6 @@ const AudioIndicator = ({
   };
 
   const sxProperties = {
-    fontSize: '18px',
     color: indicatorColor,
     cursor: hasAudio ? 'pointer' : 'default',
   };
@@ -72,7 +72,7 @@ const AudioIndicator = ({
   }
 
   return (
-    <div className={indicatorStyle} data-testid="audio-indicator">
+    <Box style={indicatorStyle} data-testid="audio-indicator">
       <Tooltip title={hasAudio ? t('participants.mute.tooltip', { participantName }) : ''}>
         <IconButton
           disableRipple={!hasAudio}
@@ -85,7 +85,11 @@ const AudioIndicator = ({
           }}
           onClick={hasAudio ? handleClick : undefined}
         >
-          {hasAudio ? <Mic sx={sxProperties} /> : <MicOff sx={sxProperties} />}
+          {hasAudio ? (
+            <VividIcon customSize={-6} name="microphone-2-solid" sx={sxProperties} />
+          ) : (
+            <VividIcon customSize={-6} name="mic-mute-solid" sx={sxProperties} />
+          )}
         </IconButton>
       </Tooltip>
       <PopupDialog
@@ -94,7 +98,7 @@ const AudioIndicator = ({
         handleActionClick={handleActionClick}
         actionText={muteParticipantText}
       />
-    </div>
+    </Box>
   );
 };
 

frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/CaptionsBox.tsx

@@ -1,8 +1,9 @@
 import { ReactElement } from 'react';
-import { Box } from '@mui/material';
+import Box from '@ui/Box';
 import UserCaption from './UserCaption';
 import useSessionContext from '../../../../hooks/useSessionContext';
 import useIsSmallViewport from '../../../../hooks/useIsSmallViewport';
+import useCustomTheme from '@Context/Theme';
 
 /**
  * CaptionsBox Component
@@ -13,14 +14,15 @@ import useIsSmallViewport from '../../../../hooks/useIsSmallViewport';
 const CaptionsBox = (): ReactElement => {
   const { subscriberWrappers, ownCaptions } = useSessionContext();
   const isSmallViewPort = useIsSmallViewport();
+  const theme = useCustomTheme();
 
   const sxBox = {
     position: 'absolute',
     bottom: isSmallViewPort ? 100 : 80,
     left: '50%',
     transform: 'translateX(-50%)',
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    color: 'white',
+    backgroundColor: theme.colors.darkGreyOpacity,
+    color: theme.colors.onDarkGrey,
     px: 2,
     py: isSmallViewPort ? 1 : 1.5,
     borderRadius: 2,

frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/UserCaption/UserCaption.tsx

@@ -1,9 +1,10 @@
 import { Subscriber } from '@vonage/client-sdk-video';
 import { ReactElement, useState, useRef, useEffect } from 'react';
-import { Typography } from '@mui/material';
+import Typography from '@ui/Typography';
 import { useTranslation } from 'react-i18next';
 import useReceivingCaptions from '../../../../../hooks/useReceivingCaptions';
 import { CAPTION_DISPLAY_DURATION_MS } from '../../../../../utils/constants';
+import useCustomTheme from '@Context/Theme';
 
 export type UserCaptionProps = {
   subscriber: Subscriber | null;
@@ -28,6 +29,7 @@ const UserCaption = ({
   const { caption: captionText, isReceivingCaptions } = useReceivingCaptions({
     subscriber,
   });
+  const theme = useCustomTheme();
 
   const displayCaption = caption ?? captionText;
   const isActive = Boolean(caption ?? isReceivingCaptions);
@@ -71,7 +73,7 @@ const UserCaption = ({
           wordBreak: 'break-word',
           lineHeight: 1.4,
           textAlign: 'left',
-          color: 'white',
+          color: theme.colors.onDarkGrey,
           fontSize: isSmallViewPort ? '1rem' : '1.25rem',
         }}
       >

frontend/src/components/MeetingRoom/CaptionsButton/CaptionsButton.tsx

@@ -1,12 +1,13 @@
-import { ClosedCaption, ClosedCaptionDisabled } from '@mui/icons-material';
-import { Tooltip } from '@mui/material';
 import { Dispatch, ReactElement, useState, SetStateAction } from 'react';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
 import useIsMeetingCaptionsAllowed from '@Context/AppConfig/hooks/useIsMeetingCaptionsAllowed';
 import { disableCaptions, enableCaptions } from '@api/captions';
 import useRoomName from '@hooks/useRoomName';
 import ToolbarButton from '../ToolbarButton';
+import Tooltip from '@ui/Tooltip';
+import VividIcon from '@components/VividIcon';
+import useCustomTheme from '@Context/Theme';
 
 export type CaptionsState = {
   isUserCaptionsEnabled: boolean;
@@ -43,6 +44,7 @@ const CaptionsButton = ({
   const { isUserCaptionsEnabled, setIsUserCaptionsEnabled, setCaptionsErrorResponse } =
     captionsState;
   const title = isUserCaptionsEnabled ? t('captions.disable') : t('captions.enable');
+  const theme = useCustomTheme();
 
   const handleClose = () => {
     if (isOverflowButton && handleClick) {
@@ -105,12 +107,16 @@ const CaptionsButton = ({
           data-testid="captions-button"
           icon={
             !isUserCaptionsEnabled ? (
-              <ClosedCaption style={{ color: 'white' }} />
+              <VividIcon
+                name="closed-captioning-solid"
+                customSize={-5}
+                sx={{ color: theme.colors.onSecondary }}
+              />
             ) : (
-              <ClosedCaptionDisabled
-                style={{
-                  color: 'rgb(239 68 68)',
-                }}
+              <VividIcon
+                name="closed-captioning-off-solid"
+                customSize={-5}
+                sx={{ color: theme.colors.error }}
               />
             )
           }

frontend/src/components/MeetingRoom/CaptionsError/CaptionsError.tsx

@@ -1,8 +1,9 @@
-import { Snackbar, Alert } from '@mui/material';
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CAPTION_ERROR_DISPLAY_DURATION_MS } from '../../../utils/constants';
 import useIsSmallViewport from '../../../hooks/useIsSmallViewport';
+import Snackbar from '@ui/Snackbar';
+import Alert from '@ui/Alert';
 
 export type CaptionsErrorProps = {
   captionsErrorResponse: string | null;