@100mslive/roomkit-react 0.1.0 → 0.1.2-alpha.0

package/src/Prebuilt/components/Preview/PreviewJoin.jsx

@@ -1,48 +1,66 @@
 import React, { Fragment, Suspense, useCallback, useEffect, useState } from 'react';
 import {
+  HMSRoomState,
   selectIsLocalVideoEnabled,
   selectLocalPeer,
+  selectRoomState,
   selectVideoTrackByID,
   useAVToggle,
   useHMSStore,
+  useParticipants,
   usePreviewJoin,
+  useRecordingStreaming,
 } from '@100mslive/react-sdk';
-import { SettingsIcon } from '@100mslive/react-icons';
+import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
 import {
   Avatar,
+  Box,
   Flex,
   flexCenter,
-  Loading,
   styled,
   StyledVideoTile,
   Text,
-  textEllipsis,
   useBorderAudioLevel,
   useTheme,
   Video,
 } from '../../../';
 import { useHMSPrebuiltContext } from '../../AppContext';
 import IconButton from '../../IconButton';
+import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { AudioVideoToggle } from '../AudioVideoToggle';
+import Chip from '../Chip';
 import TileConnection from '../Connection/TileConnection';
+import FullPageProgress from '../FullPageProgress';
+import { Logo } from '../Header/HeaderComponents';
 import SettingsModal from '../Settings/SettingsModal';
-import PreviewName from './PreviewName';
+import PreviewForm from './PreviewForm';
 import { useAuthToken, useUISettings } from '../AppData/useUISettings';
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 import { UI_SETTINGS } from '../../common/constants';
 
 const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
 
+const getParticipantChipContent = (peerCount = 0) => {
+  if (peerCount === 0) {
+    return 'You are the first to join';
+  }
+  const formatter = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });
+  const formattedNum = formatter.format(peerCount);
+  return `${formattedNum} other${parseInt(formattedNum) === 1 ? '' : 's'} in the session`;
+};
+
 const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(
     UserPreferencesKeys.PREVIEW,
     defaultPreviewPreference,
   );
+  const { isStreamingOn } = useRecordingStreaming();
   const authToken = useAuthToken();
   const [name, setName] = useState(initialName || previewPreference.name);
-  const { isLocalAudioEnabled, isLocalVideoEnabled } = useAVToggle();
+  const { isLocalAudioEnabled, isLocalVideoEnabled, toggleAudio, toggleVideo } = useAVToggle();
   const [previewError, setPreviewError] = useState(false);
   const { endPoints } = useHMSPrebuiltContext();
+  const { peerCount } = useParticipants();
   const { enableJoin, preview, join } = usePreviewJoin({
     name,
     token: authToken,
@@ -60,6 +78,8 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
     },
     asRole,
   });
+  const roomState = useHMSStore(selectRoomState);
+
   const savePreferenceAndJoin = useCallback(() => {
     setPreviewPreference({
       name,
@@ -69,6 +89,10 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
     join();
     onJoin && onJoin();
   }, [join, isLocalAudioEnabled, isLocalVideoEnabled, name, setPreviewPreference, onJoin]);
+  const roomLayout = useRoomLayout();
+
+  const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
+
   useEffect(() => {
     if (authToken) {
       if (skipPreview) {
@@ -79,27 +103,62 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [authToken, skipPreview]);
-  return (
-    <Container>
-      <Text variant="h4" css={{ wordBreak: 'break-word', textAlign: 'center' }}>
-        Get Started
-      </Text>
-      <Text css={{ c: '$textMedEmp', my: '$6', textAlign: 'center' }} variant="body1">
-        Setup your audio and video before joining
-      </Text>
-      <Flex
-        align="center"
-        justify="center"
-        css={{
-          '@sm': { width: '100%' },
-          flexDirection: 'column',
-        }}
-      >
-        <PreviewTile name={name} error={previewError} />
-        <PreviewControls enableJoin={enableJoin} savePreferenceAndJoin={savePreferenceAndJoin} />
-        <PreviewName name={name} onChange={setName} enableJoin={enableJoin} onJoin={savePreferenceAndJoin} />
+
+  return roomState === HMSRoomState.Preview ? (
+    <Container css={{ h: '100%', pt: '$10', '@md': { justifyContent: 'space-between' } }}>
+      {toggleVideo ? null : <Box />}
+      <Flex direction="column" justify="center" css={{ w: '100%', maxWidth: '360px' }}>
+        <Logo />
+        <Text variant="h4" css={{ wordBreak: 'break-word', textAlign: 'center', mt: '$14', '@md': { mt: '$8' } }}>
+          {previewHeader.title}
+        </Text>
+        <Text css={{ c: '$on_surface_medium', my: '0', textAlign: 'center' }} variant="body1">
+          {previewHeader.sub_title}
+        </Text>
+        <Flex justify="center" css={{ my: '$8', gap: '$4' }}>
+          {isStreamingOn ? (
+            <Chip
+              content="LIVE"
+              backgroundColor="$alert_error_default"
+              textColor="#FFF"
+              icon={<Box css={{ h: '$sm', w: '$sm', backgroundColor: '$on_primary_high', borderRadius: '$round' }} />}
+            />
+          ) : null}
+          <Chip content={getParticipantChipContent(peerCount)} hideIfNoContent />
+        </Flex>
       </Flex>
+
+      {toggleVideo ? (
+        <Flex
+          align="center"
+          justify="center"
+          css={{
+            '@sm': { width: '100%' },
+            flexDirection: 'column',
+          }}
+        >
+          <PreviewTile name={name} error={previewError} />
+        </Flex>
+      ) : null}
+
+      <Box css={{ w: '100%', maxWidth: '360px' }}>
+        <PreviewControls
+          enableJoin={enableJoin}
+          savePreferenceAndJoin={savePreferenceAndJoin}
+          hideSettings={!toggleVideo && !toggleAudio}
+        />
+        <PreviewForm
+          name={name}
+          onChange={setName}
+          enableJoin={enableJoin}
+          onJoin={savePreferenceAndJoin}
+          cannotPublishVideo={!toggleVideo}
+          cannotPublishAudio={!toggleAudio}
+        />
+      </Box>
     </Container>
+  ) : (
+    <FullPageProgress />
   );
 };
 
@@ -113,10 +172,12 @@ const Container = styled('div', {
 const PreviewTile = ({ name, error }) => {
   const localPeer = useHMSStore(selectLocalPeer);
   const borderAudioRef = useBorderAudioLevel(localPeer?.audioTrack);
+  const { isLocalAudioEnabled, toggleAudio } = useAVToggle();
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
   const track = useHMSStore(trackSelector);
+  const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
 
   const {
     aspectRatio: { width, height },
@@ -124,11 +185,10 @@ const PreviewTile = ({ name, error }) => {
   return (
     <StyledVideoTile.Container
       css={{
-        bg: '$surfaceDefault',
+        bg: '$surface_default',
         aspectRatio: width / height,
         width: 'unset',
         height: 'min(360px, 60vh)',
-        mt: '$12',
         '@sm': {
           height: 'unset',
           width: 'min(360px, 100%)',
@@ -148,20 +208,23 @@ const PreviewTile = ({ name, error }) => {
           {!isVideoOn ? (
             <StyledVideoTile.AvatarContainer>
               <Avatar name={name} data-testid="preview_avatar_tile" />
-              <Text css={{ ...textEllipsis('75%') }} variant="body2">
-                {name}
-              </Text>
             </StyledVideoTile.AvatarContainer>
           ) : null}
         </>
       ) : !error ? (
-        <Loading size={100} />
+        <FullPageProgress />
+      ) : null}
+      {showMuteIcon ? (
+        <StyledVideoTile.AudioIndicator size="medium">
+          <MicOffIcon />
+        </StyledVideoTile.AudioIndicator>
       ) : null}
     </StyledVideoTile.Container>
   );
 };
 
-const PreviewControls = () => {
+const PreviewControls = ({ hideSettings }) => {
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   return (
     <Flex
       justify="between"
@@ -172,20 +235,20 @@ const PreviewControls = () => {
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle compact />
-        <Suspense fallback="">
-          <VirtualBackground />
-        </Suspense>
+        <Suspense fallback="">{isVideoOn ? <VirtualBackground /> : null}</Suspense>
       </Flex>
-      <PreviewSettings />
+      {!hideSettings ? <PreviewSettings /> : null}
     </Flex>
   );
 };
 
-const PreviewSettings = React.memo(() => {
+// Bottom action sheet goes here, if isMobile
+export const PreviewSettings = React.memo(() => {
   const [open, setOpen] = useState(false);
+
   return (
     <Fragment>
-      <IconButton data-testid="preview_setting_btn" onClick={() => setOpen(value => !value)}>
+      <IconButton data-testid="preview_setting_btn" css={{ flexShrink: 0 }} onClick={() => setOpen(value => !value)}>
         <SettingsIcon />
       </IconButton>
       {open && <SettingsModal open={open} onOpenChange={setOpen} />}

package/src/Prebuilt/components/RoleChangeModal.jsx

@@ -61,7 +61,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
               css={{
                 mt: '$4',
                 mb: '$8',
-                c: '$textMedEmp',
+                c: '$on_surface_medium',
                 display: 'flex',
                 flexWrap: 'wrap',
                 columnGap: '4px',
@@ -101,8 +101,8 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
                   data-testid="open_role_selection_dropdown"
                   asChild
                   css={{
-                    border: '1px solid $borderLight',
-                    bg: '$surfaceLight',
+                    border: '1px solid $border_bright',
+                    bg: '$surface_bright',
                     r: '$1',
                     p: '$6 $9',
                   }}

package/src/Prebuilt/components/ScreenshareDisplay.jsx

@@ -21,8 +21,8 @@ export const ScreenshareDisplay = () => {
         h: '100%',
         r: '$3',
         m: '0 auto',
-        color: '$textPrimary',
-        bg: '$surfaceDefault',
+        color: '$on_surface_high',
+        bg: '$surface_default',
         textAlign: 'center',
       }}
     >

package/src/Prebuilt/components/Settings/DeviceSettings.jsx

@@ -72,6 +72,7 @@ const Settings = ({ setHide }) => {
           />
         </Fragment>
       ) : null}
+
       {audioInput?.length ? (
         <DeviceSelector
           title={shouldShowAudioOutput ? 'Microphone' : 'Audio'}
@@ -86,6 +87,7 @@ const Settings = ({ setHide }) => {
           }
         />
       ) : null}
+
       {audioOutputFiltered?.length && shouldShowAudioOutput ? (
         <DeviceSelector
           title="Speaker"
@@ -128,8 +130,8 @@ const DeviceSelector = ({ title, devices, selection, onChange, icon, children =
           css={{
             position: 'relative',
             flex: '1 1 0',
-            w: '100%',
             minWidth: 0,
+            maxWidth: '100%',
             '@md': {
               mb: children ? '$8' : 0,
             },
@@ -138,14 +140,6 @@ const DeviceSelector = ({ title, devices, selection, onChange, icon, children =
           <Dropdown.Root open={open} onOpenChange={setOpen}>
             <DialogDropdownTrigger
               ref={ref}
-              css={{
-                ...(children
-                  ? {
-                      flex: '1 1 0',
-                      minWidth: 0,
-                    }
-                  : {}),
-              }}
               icon={icon}
               title={devices.find(({ deviceId }) => deviceId === selection)?.label || 'Select device from list'}
               open={open}

package/src/Prebuilt/components/Settings/SettingsModal.jsx

@@ -1,34 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
-import { ChevronLeftIcon, CrossIcon, GridFourIcon, NotificationsIcon, SettingsIcon } from '@100mslive/react-icons';
+import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Dialog, Flex, IconButton, Tabs, Text } from '../../../';
-import DeviceSettings from './DeviceSettings';
-import { LayoutSettings } from './LayoutSettings';
-import { NotificationSettings } from './NotificationSettings';
 import { useHLSViewerRole } from '../AppData/useUISettings';
-import { settingContent } from './common.js';
-
-const settings = [
-  {
-    tabName: 'devices',
-    title: 'Device Settings',
-    icon: SettingsIcon,
-    content: DeviceSettings,
-  },
-  {
-    tabName: 'notifications',
-    title: 'Notifications',
-    icon: NotificationsIcon,
-    content: NotificationSettings,
-  },
-  {
-    tabName: 'layout',
-    title: 'Layout',
-    icon: GridFourIcon,
-    content: LayoutSettings,
-  },
-];
+import { settingContent, settingsList } from './common.js';
 
 const SettingsModal = ({ open, onOpenChange, children }) => {
   const mediaQueryLg = cssConfig.media.md;
@@ -39,7 +15,7 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
   const isHlsViewer = hlsViewerRole === localPeerRole;
 
   const [showSetting, setShowSetting] = useState(() =>
-    settings.reduce((obj, { tabName }) => ({ ...obj, [tabName]: true }), {}),
+    settingsList.reduce((obj, { tabName }) => ({ ...obj, [tabName]: true }), {}),
   );
 
   const hideSettingByTabName = useCallback(
@@ -90,7 +66,7 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
               css={{
                 w: isMobile ? '100%' : '18.625rem',
                 flexDirection: 'column',
-                bg: '$backgroundDefault',
+                bg: '$background_default',
                 p: '$14 $10',
                 borderTopLeftRadius: '$4',
                 borderBottomLeftRadius: '$4',
@@ -98,7 +74,7 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
             >
               <Text variant="h5">Settings </Text>
               <Flex direction="column" css={{ mx: isMobile ? '-$8' : 0, overflowY: 'auto', pt: '$10' }}>
-                {settings
+                {settingsList
                   .filter(({ tabName }) => showSetting[tabName])
                   .map(({ icon: Icon, tabName, title }) => {
                     return (
@@ -122,14 +98,14 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
                         position: 'absolute',
                         left: 0,
                         right: 0,
-                        bg: '$surfaceDefault',
+                        bg: '$surface_default',
                         width: '100%',
                         height: '100%',
                       }
                     : {}),
                 }}
               >
-                {settings
+                {settingsList
                   .filter(({ tabName }) => showSetting[tabName])
                   .map(({ content: Content, title, tabName }) => {
                     return (
@@ -159,7 +135,7 @@ const SettingsContentHeader = ({ children, isMobile, onBack }) => {
   return (
     <Text variant="h6" css={{ mb: '$12', display: 'flex', alignItems: 'center' }}>
       {isMobile && (
-        <Box as="span" css={{ bg: '$surfaceLight', mr: '$4', r: '$round', p: '$2' }} onClick={onBack}>
+        <Box as="span" css={{ bg: '$surface_bright', mr: '$4', r: '$round', p: '$2' }} onClick={onBack}>
           <ChevronLeftIcon />
         </Box>
       )}

package/src/Prebuilt/components/Settings/StartRecording.jsx

@@ -1,11 +1,5 @@
 import React, { useState } from 'react';
-import {
-  selectAppData,
-  selectPermissions,
-  useHMSActions,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
+import { selectPermissions, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { AlertTriangleIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Flex, Text } from '../../../';
 import { ResolutionInput } from '../Streaming/ResolutionInput';
@@ -16,7 +10,6 @@ import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants
 
 const StartRecording = ({ open, onOpenChange }) => {
   const permissions = useHMSStore(selectPermissions);
-  const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl));
   const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
 
   const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
@@ -37,19 +30,19 @@ const StartRecording = ({ open, onOpenChange }) => {
             }}
           >
             <Dialog.Title>
-              <Flex gap={2} css={{ c: '$error' }}>
+              <Flex gap={2} css={{ c: '$alert_error_default' }}>
                 <AlertTriangleIcon />
                 <Text css={{ c: 'inherit' }} variant="h6">
                   End Recording
                 </Text>
               </Flex>
             </Dialog.Title>
-            <Text variant="sm" css={{ c: '$textMedEmp', my: '$8' }}>
+            <Text variant="sm" css={{ c: '$on_surface_medium', my: '$8' }}>
               Are you sure you want to end recording? You can’t undo this action.
             </Text>
             <Flex justify="end" css={{ mt: '$12' }}>
               <Dialog.Close asChild>
-                <Button outlined css={{ borderColor: '$secondaryLight', mr: '$4' }}>
+                <Button outlined css={{ borderColor: '$secondary_bright', mr: '$4' }}>
                   Don't end
                 </Button>
               </Dialog.Close>
@@ -99,7 +92,6 @@ const StartRecording = ({ open, onOpenChange }) => {
             try {
               setRecordingState(true);
               await hmsActions.startRTMPOrRecording({
-                meetingURL: recordingUrl,
                 resolution: getResolution(resolution),
                 record: true,
               });

package/src/Prebuilt/components/Settings/SwitchWithLabel.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Label } from '../../../Label';
 import { Flex } from '../../../Layout';
 import { Switch } from '../../../Switch';
-// import { Flex, Label, Switch } from '../../../';
 
 const SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {
   return (
@@ -12,7 +11,7 @@ const SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =
         my: '$2',
         py: '$8',
         w: '100%',
-        borderBottom: '1px solid $borderDefault',
+        borderBottom: '1px solid $border_default',
         display: hide ? 'none' : 'flex',
       }}
     >
@@ -21,7 +20,7 @@ const SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =
         css={{
           fontSize: '$md',
           fontWeight: '$semiBold',
-          color: checked ? '$textHighEmp' : '$textDisabled',
+          color: checked ? '$on_surface_high' : '$on_surface_low',
           cursor: 'pointer',
           display: 'flex',
           alignItems: 'center',

package/src/Prebuilt/components/Settings/common.js

@@ -1,4 +1,9 @@
+import { GridFourIcon, NotificationsIcon, SettingsIcon } from '@100mslive/react-icons';
 import { css } from '../../..';
+import DeviceSettings from '../Settings/DeviceSettings';
+import { LayoutSettings } from '../Settings/LayoutSettings';
+import { NotificationSettings } from '../Settings/NotificationSettings';
+
 export const settingOverflow = css({
   flex: '1 1 0',
   pr: '$12',
@@ -13,3 +18,24 @@ export const settingContent = css({
     display: 'none',
   },
 });
+
+export const settingsList = [
+  {
+    tabName: 'devices',
+    title: 'Device Settings',
+    icon: SettingsIcon,
+    content: DeviceSettings,
+  },
+  {
+    tabName: 'notifications',
+    title: 'Notifications',
+    icon: NotificationsIcon,
+    content: NotificationSettings,
+  },
+  {
+    tabName: 'layout',
+    title: 'Layout',
+    icon: GridFourIcon,
+    content: LayoutSettings,
+  },
+];

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -98,7 +98,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
                         css={{
                           px: '$9',
                           bg: isSelected ? selectionBg : undefined,
-                          c: isSelected ? '$white' : '$textPrimary',
+                          c: isSelected ? '$on_primary_high' : '$on_primary_high',
                         }}
                       >
                         {option.label}
@@ -219,18 +219,18 @@ const TrackStats = ({ trackID, layer, local }) => {
 };
 
 const StatsRow = React.memo(({ label, value }) => (
-  <Box css={{ bg: '$surfaceLight', w: 'calc(50% - $6)', p: '$8', r: '$3' }}>
+  <Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3' }}>
     <Text
       variant="overline"
       css={{
         fontWeight: '$semiBold',
-        color: '$textMedEmp',
+        color: '$on_surface_medium',
         textTransform: 'uppercase',
       }}
     >
-      {label}{' '}
+      {label}
     </Text>
-    <Text variant="sub1" css={{ fontWeight: '$semiBold', color: '$textHighEmp' }}>
+    <Text variant="sub1" css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>
       {value || '-'}
     </Text>
   </Box>

package/src/Prebuilt/components/Streaming/Common.jsx

@@ -3,7 +3,7 @@ import { selectPermissions, useHMSStore } from '@100mslive/react-sdk';
 import { ChevronLeftIcon, ChevronRightIcon, CrossIcon, RecordIcon } from '@100mslive/react-icons';
 import { Box, Flex, IconButton, slideLeftAndFade, Switch, Text } from '../../../';
 
-export const StreamCard = ({ title, subtitle, Icon, css = {}, onClick, testId }) => {
+export const StreamCard = ({ title, subtitle, Icon, imgSrc = '', css = {}, onClick, testId }) => {
   return (
     <Flex
       css={{
@@ -11,7 +11,7 @@ export const StreamCard = ({ title, subtitle, Icon, css = {}, onClick, testId })
         p: '$10',
         r: '$1',
         cursor: 'pointer',
-        bg: '$surfaceLight',
+        bg: '$surface_bright',
         mb: '$10',
         mt: '$8',
         ...css,
@@ -20,13 +20,13 @@ export const StreamCard = ({ title, subtitle, Icon, css = {}, onClick, testId })
       onClick={onClick}
     >
       <Text css={{ alignSelf: 'center', p: '$4' }}>
-        <Icon width={40} height={40} />
+        {imgSrc ? <img src={imgSrc} height={40} width={40} /> : <Icon width={40} height={40} />}
       </Text>
       <Box css={{ flex: '1 1 0', mx: '$8' }}>
         <Text variant="h6" css={{ mb: '$4' }}>
           {title}
         </Text>
-        <Text variant="sm" css={{ color: '$textMedEmp' }}>
+        <Text variant="sm" css={{ color: '$on_surface_medium' }}>
           {subtitle}
         </Text>
       </Box>
@@ -41,7 +41,7 @@ export const ContentHeader = ({ onBack, title, content }) => {
   return (
     <Flex css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer' }}>
       <Text
-        css={{ p: '$2', bg: '$surfaceLight', r: '$round', alignSelf: 'center' }}
+        css={{ p: '$2', bg: '$surface_bright', r: '$round', alignSelf: 'center' }}
         onClick={onBack}
         data-testid="go_back"
       >
@@ -53,7 +53,7 @@ export const ContentHeader = ({ onBack, title, content }) => {
           css={{
             textTransform: 'uppercase',
             fontWeight: '$semiBold',
-            color: '$textMedEmp',
+            color: '$on_surface_medium',
           }}
         >
           {title}
@@ -76,7 +76,7 @@ export const Container = ({ children, rounded = false }) => {
         position: 'absolute',
         top: 0,
         left: 0,
-        bg: '$surfaceDefault',
+        bg: '$surface_default',
         transform: 'translateX(10%)',
         animation: `${slideLeftAndFade('10%')} 100ms ease-out forwards`,
         display: 'flex',
@@ -98,7 +98,7 @@ export const ContentBody = ({ Icon, title, removeVerticalPadding = false, childr
           {title}
         </Text>
       </Text>
-      <Text variant="sm" css={{ color: '$textMedEmp' }}>
+      <Text variant="sm" css={{ color: '$on_surface_medium' }}>
         {children}
       </Text>
     </Box>
@@ -108,8 +108,8 @@ export const ContentBody = ({ Icon, title, removeVerticalPadding = false, childr
 export const RecordStream = ({ record, setRecord, testId }) => {
   const permissions = useHMSStore(selectPermissions);
   return permissions?.browserRecording ? (
-    <Flex align="center" css={{ bg: '$surfaceLight', m: '$8 $10', p: '$8', r: '$0' }}>
-      <Text css={{ color: '$error' }}>
+    <Flex align="center" css={{ bg: '$surface_bright', m: '$8 $10', p: '$8', r: '$0' }}>
+      <Text css={{ color: '$alert_error_default' }}>
         <RecordIcon />
       </Text>
       <Text variant="sm" css={{ flex: '1 1 0', mx: '$8' }}>
@@ -125,7 +125,7 @@ export const ErrorText = ({ error }) => {
     return null;
   }
   return (
-    <Text variant="sm" css={{ mb: '$8', color: '$error' }}>
+    <Text variant="sm" css={{ mb: '$8', color: '$alert_error_default' }}>
       {error}
     </Text>
   );