@100mslive/roomkit-react 0.1.1 → 0.1.2-alpha.1

package/src/Prebuilt/components/Header/AdditionalRoomState.jsx

@@ -76,9 +76,9 @@ export const AdditionalRoomState = () => {
         <Flex
           align="center"
           css={{
-            color: '$textPrimary',
+            color: '$on_primary_high',
             borderRadius: '$1',
-            border: '1px solid $textDisabled',
+            border: '1px solid $on_surface_low',
             padding: '$4',
             '@sm': { display: 'none' },
           }}
@@ -86,47 +86,47 @@ export const AdditionalRoomState = () => {
         >
           {!isAudioshareInactive && (
             <Tooltip title="Screenshare Audio">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <MusicIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
           {shouldShowScreenShareState && (
             <Tooltip title="Screenshare">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <ShareScreenIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
           {shouldShowVideoState && (
             <Tooltip title="video playlist">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <VideoPlayerIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
           {!isPlaylistInactive && (
             <Tooltip title="Playlist Music">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <AudioPlayerIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
           {whiteboardOwner && (
             <Tooltip title="Whiteboard">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <PencilDrawIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
-          <Box css={{ '@lg': { display: 'none' }, color: '$textDisabled' }}>
+          <Box css={{ '@lg': { display: 'none' }, color: '$on_surface_low' }}>
             {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </Box>
         </Flex>
       </Dropdown.Trigger>
       <Dropdown.Content sideOffset={5} align="end" css={{ w: '$60' }}>
         {!isPlaylistInactive && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <AudioPlayerIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               Playlist is playing
@@ -134,7 +134,7 @@ export const AdditionalRoomState = () => {
             {playlist.peer.isLocal ? (
               <Text
                 variant="sm"
-                css={{ color: '$error', cursor: 'pointer', ml: '$2' }}
+                css={{ color: '$alert_error_default', cursor: 'pointer', ml: '$2' }}
                 onClick={e => {
                   e.preventDefault();
                   playlist.selection.playing ? playlist.pause() : playlist.play(playlist.selection.id);
@@ -145,7 +145,7 @@ export const AdditionalRoomState = () => {
             ) : (
               <Text
                 variant="sm"
-                css={{ color: '$error', ml: '$2', cursor: 'pointer' }}
+                css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}
                 onClick={e => {
                   e.preventDefault();
                   playlist.setVolume(!playlist.track.volume ? 100 : 0);
@@ -157,14 +157,14 @@ export const AdditionalRoomState = () => {
           </Dropdown.Item>
         )}
         {!isAudioshareInactive && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <MusicIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               Music is playing
             </Text>
             <Text
               variant="sm"
-              css={{ color: '$error', ml: '$2', cursor: 'pointer' }}
+              css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}
               onClick={e => {
                 e.preventDefault();
                 screenshareAudio.onToggle();
@@ -175,7 +175,7 @@ export const AdditionalRoomState = () => {
           </Dropdown.Item>
         )}
         {shouldShowScreenShareState && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <ShareScreenIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               {`Shared by: ${screenSharingPeerId === localPeerID ? 'You' : screenSharingPeerName}`}
@@ -183,7 +183,7 @@ export const AdditionalRoomState = () => {
           </Dropdown.Item>
         )}
         {shouldShowVideoState && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <VideoPlayerIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               {`Shared by: ${peerSharingPlaylist.id === localPeerID ? 'You' : peerSharingPlaylist.name}`}
@@ -191,7 +191,7 @@ export const AdditionalRoomState = () => {
           </Dropdown.Item>
         )}
         {whiteboardOwner && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <PencilDrawIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               Whiteboard Owner - {whiteboardOwner.name}
@@ -200,7 +200,7 @@ export const AdditionalRoomState = () => {
             {amIWhiteboardOwner && (
               <Text
                 variant="sm"
-                css={{ color: '$error', ml: '$2', cursor: 'pointer' }}
+                css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}
                 onClick={e => {
                   e.preventDefault();
                   toggleWhiteboard();

package/src/Prebuilt/components/Header/AmbientMusic.jsx

@@ -79,7 +79,7 @@ export const AmbientMusic = () => {
   }
 
   return (
-    <Tooltip title={`${playing ? `Disable Ambient Music` : `Play Ambient Music`}`} key="ambient-music">
+    <Tooltip title={playing ? `Disable Ambient Music` : `Play Ambient Music`} key="ambient-music">
       <IconButton css={{ mx: '$4' }} onClick={toggleAmbientMusic} active={!playing}>
         <MusicIcon />
       </IconButton>

package/src/Prebuilt/components/Header/ConferencingHeader.jsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { Flex, VerticalDivider } from '../../../';
-import { Logo, SpeakerTag } from './HeaderComponents';
+import { Flex } from '../../../';
+import { SpeakerTag } from './HeaderComponents';
 import { ParticipantCount } from './ParticipantList';
 import { StreamActions } from './StreamActions';
 
-export const ConferencingHeader = ({ isPreview }) => {
+export const ConferencingHeader = () => {
   return (
     <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
       <Flex align="center" css={{ position: 'absolute', left: '$10' }}>
-        <Logo />
-        <VerticalDivider css={{ ml: '$8' }} />
-        {!isPreview ? <SpeakerTag /> : null}
+        <SpeakerTag />
       </Flex>
 
       <Flex

package/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -3,13 +3,17 @@ import { useMedia } from 'react-use';
 import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
 import { VolumeOneIcon } from '@100mslive/react-icons';
 import { config as cssConfig, Flex, styled, Text, textEllipsis } from '../../../';
-import { useLogo } from '../AppData/useUISettings';
+import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { isStreamingKit } from '../../common/utils';
 
 export const SpeakerTag = () => {
   const dominantSpeaker = useHMSStore(selectDominantSpeaker);
   return dominantSpeaker && dominantSpeaker.name ? (
-    <Flex align="center" justify="center" css={{ flex: '1 1 0', color: '$textPrimary', '@md': { display: 'none' } }}>
+    <Flex
+      align="center"
+      justify="center"
+      css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}
+    >
       <VolumeOneIcon />
       <Text variant="md" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
         {dominantSpeaker.name}
@@ -22,20 +26,21 @@ export const SpeakerTag = () => {
 
 const LogoImg = styled('img', {
   maxHeight: '$14',
-  p: '$2',
   w: 'auto',
+  objectFit: 'contain',
   '@md': {
     maxHeight: '$12',
   },
 });
 
 export const Logo = () => {
-  const logo = useLogo();
+  const roomLayout = useRoomLayout();
+  const logo = roomLayout?.logo?.url;
   const isMobile = useMedia(cssConfig.media.md);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   // Hide logo for now as there is not enough space
   if (isConnected && isMobile && isStreamingKit()) {
     return null;
   }
-  return logo ? <LogoImg src={logo} alt="Brand Logo" width={132} height={40} /> : null;
+  return logo ? <LogoImg src={logo} alt="Brand Logo" /> : null;
 };

package/src/Prebuilt/components/Header/ParticipantFilter.jsx

@@ -19,7 +19,7 @@ export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }
         asChild
         data-testid="participant_list_filter"
         css={{
-          border: '1px solid $textDisabled',
+          border: '1px solid $on_surface_low',
           r: '$0',
           p: '$2 $4',
         }}
@@ -29,7 +29,7 @@ export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }
           <Text variant="sm" css={{ ...textEllipsis(80) }}>
             {selectionValue || 'Everyone'}
           </Text>
-          <Box css={{ ml: '$2', color: '$textDisabled' }}>
+          <Box css={{ ml: '$2', color: '$on_surface_low' }}>
             {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}
           </Box>
         </Flex>

package/src/Prebuilt/components/Header/ParticipantList.jsx

@@ -258,7 +258,7 @@ const ParticipantMoreActions = ({ onRoleChange, peerId }) => {
               }}
             >
               <RemoveUserIcon />
-              <Text css={{ ml: '$4', color: '$error' }}>Remove Participant</Text>
+              <Text css={{ ml: '$4', color: '$alert_error_default' }}>Remove Participant</Text>
             </Dropdown.Item>
           )}
         </Dropdown.Content>
@@ -313,7 +313,7 @@ export const ParticipantSearch = ({ onSearch, placeholder }) => {
           left: '$4',
           top: '$2',
           transform: 'translateY(50%)',
-          color: '$textMedEmp',
+          color: '$on_surface_medium',
         }}
       >
         <SearchIcon />

package/src/Prebuilt/components/Header/StreamActions.jsx

@@ -1,9 +1,10 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
-  selectAppData,
+  HMSRoomState,
   selectIsConnectedToRoom,
   selectPermissions,
+  selectRoomState,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
@@ -15,7 +16,7 @@ import { ResolutionInput } from '../Streaming/ResolutionInput';
 import { getResolution } from '../Streaming/RTMPStreaming';
 import { ToastManager } from '../Toast/ToastManager';
 import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
-import { useSidepaneState, useSidepaneToggle } from '../AppData/useSidepane';
+import { useSidepaneToggle } from '../AppData/useSidepane';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION, SIDE_PANE_OPTIONS } from '../../common/constants';
 
@@ -26,7 +27,7 @@ export const LiveStatus = () => {
   }
   return (
     <Flex align="center">
-      <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$error', mr: '$2' }} />
+      <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$alert_error_default', mr: '$2' }} />
       <Text>
         Live
         <Text as="span" css={{ '@md': { display: 'none' } }}>
@@ -61,7 +62,7 @@ export const RecordingStatus = () => {
     >
       <Box
         css={{
-          color: '$error',
+          color: '$alert_error_default',
         }}
       >
         <RecordIcon width={24} height={24} />
@@ -72,16 +73,6 @@ export const RecordingStatus = () => {
 
 const EndStream = () => {
   const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
-  const sidePane = useSidepaneState();
-  useEffect(() => {
-    if (window && !sidePane) {
-      const userStartedStream = window.sessionStorage.getItem('userStartedStream');
-      if (userStartedStream === 'true') {
-        toggleStreaming();
-        window.sessionStorage.setItem('userStartedStream', '');
-      }
-    }
-  }, [sidePane, toggleStreaming]);
 
   return (
     <Button data-testid="end_stream" variant="danger" icon onClick={toggleStreaming}>
@@ -93,7 +84,6 @@ const EndStream = () => {
 
 const StartRecording = () => {
   const permissions = useHMSStore(selectPermissions);
-  const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl));
   const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
   const [open, setOpen] = useState(false);
   const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
@@ -115,7 +105,7 @@ const StartRecording = () => {
         </Popover.Trigger>
         <Popover.Portal>
           <Popover.Content align="end" sideOffset={8} css={{ w: '$64' }}>
-            <Text variant="body" css={{ color: '$textMedEmp' }}>
+            <Text variant="body" css={{ color: '$on_surface_medium' }}>
               Are you sure you want to end the recording?
             </Text>
             <Button
@@ -175,7 +165,6 @@ const StartRecording = () => {
             try {
               setRecordingState(true);
               await hmsActions.startRTMPOrRecording({
-                meetingURL: recordingUrl,
                 resolution: getResolution(resolution),
                 record: true,
               });
@@ -208,12 +197,13 @@ export const StreamActions = () => {
   const permissions = useHMSStore(selectPermissions);
   const isMobile = useMedia(cssConfig.media.md);
   const { isStreamingOn } = useRecordingStreaming();
+  const roomState = useHMSStore(selectRoomState);
 
   return (
     <Flex align="center" css={{ gap: '$4' }}>
       <AdditionalRoomState />
       <Flex align="center" css={{ gap: '$4', '@md': { display: 'none' } }}>
-        <LiveStatus />
+        {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}
         <RecordingStatus />
       </Flex>
       {isConnected && !isMobile ? <StartRecording /> : null}

package/src/Prebuilt/components/Header/StreamingHeader.jsx

@@ -4,11 +4,11 @@ import { config as cssConfig, Flex } from '../../../';
 import { EmojiReaction } from '../EmojiReaction';
 import { LeaveRoom } from '../LeaveRoom';
 import MetaActions from '../MetaActions';
-import { Logo, SpeakerTag } from './HeaderComponents';
+import { SpeakerTag } from './HeaderComponents';
 import { ParticipantCount } from './ParticipantList';
 import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
 
-export const StreamingHeader = ({ isPreview }) => {
+export const StreamingHeader = () => {
   const isMobile = useMedia(cssConfig.media.md);
   return (
     <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
@@ -19,15 +19,14 @@ export const StreamingHeader = ({ isPreview }) => {
           left: '$10',
         }}
       >
-        <Logo />
-        {isMobile && (
+        {isMobile ? (
           <Flex align="center" gap={2}>
             <LeaveRoom />
             <LiveStatus />
             <RecordingStatus />
           </Flex>
-        )}
-        {!isPreview ? <SpeakerTag /> : null}
+        ) : null}
+        <SpeakerTag />
       </Flex>
 
       <Flex

package/src/Prebuilt/components/HlsStatsOverlay.jsx

@@ -13,7 +13,7 @@ export function HlsStatsOverlay({ hlsStatsState, onClose }) {
         marginLeft: '$8',
         padding: '$8 $8 $10',
         zIndex: 10,
-        backgroundColor: 'rgba(55,59,66, 0.84)',
+        backgroundColor: '$surface_brighter',
         borderRadius: '$1',
       }}
       direction="column"
@@ -44,7 +44,7 @@ export function HlsStatsOverlay({ hlsStatsState, onClose }) {
       <HlsStatsRow label="distance from live">
         {getDurationFromSeconds(hlsStatsState.distanceFromLive / 1000)}
       </HlsStatsRow>
-      <HlsStatsRow label="Dropped frames">{`${hlsStatsState?.droppedFrames}`}</HlsStatsRow>
+      <HlsStatsRow label="Dropped frames">{hlsStatsState?.droppedFrames}</HlsStatsRow>
     </Flex>
   );
 }

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx

@@ -0,0 +1,102 @@
+import { VerticalMenuIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Box, Flex } from '../../../Layout';
+import { styled } from '../../../Theme';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+
+const IconSection = styled(IconButton, {
+  w: 'unset',
+  h: '$14',
+  p: '$4',
+  r: '$1',
+  borderTopRightRadius: 0,
+  borderColor: '$border_default',
+  borderBottomRightRadius: 0,
+  '@md': {
+    mx: 0,
+    borderTopRightRadius: '$1',
+    borderBottomRightRadius: '$1',
+  },
+});
+
+const OptionsSection = styled(IconButton, {
+  w: 'unset',
+  h: '$14',
+  p: '$4',
+  r: '$1',
+  borderTopLeftRadius: 0,
+  borderColor: '$border_default',
+  borderBottomLeftRadius: 0,
+  borderLeftWidth: 0,
+  '&:not([disabled]):focus-visible': {
+    boxShadow: 'none',
+  },
+  '@md': {
+    display: 'none',
+  },
+});
+
+export const IconButtonWithOptions = ({
+  tooltipMessage = '',
+  icon,
+  options = [],
+  active,
+  onClick = () => {
+    return;
+  },
+  key = '',
+}) => {
+  const bgCss = { backgroundColor: active ? '$transparent' : '$secondary_dim' };
+  const iconCss = { color: active ? '$on_surface_high' : '$on_primary_high' };
+  return (
+    <Flex>
+      <IconSection css={bgCss} onClick={onClick} key={key}>
+        <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
+          <Flex align="center" justify="center" css={iconCss}>
+            {icon}
+          </Flex>
+        </Tooltip>
+      </IconSection>
+      <Dropdown.Root>
+        <Dropdown.Trigger asChild>
+          <OptionsSection css={bgCss}>
+            <Tooltip title="View Options">
+              <Box css={iconCss}>
+                <VerticalMenuIcon />
+              </Box>
+            </Tooltip>
+          </OptionsSection>
+        </Dropdown.Trigger>
+        <Dropdown.Content
+          sideOffset={5}
+          align="center"
+          css={{
+            w: '$64',
+            maxHeight: '$96',
+            p: 0,
+            border: 'none',
+          }}
+        >
+          {options.map((option, index) => (
+            <Dropdown.Item
+              key={option.title}
+              css={{
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                backgroundColor: option.active ? '$surface_bright' : '$surface_dim',
+                borderTop: index === 0 ? 'none' : '1px solid $border_default',
+                '&:hover': {
+                  cursor: 'pointer',
+                },
+                p: '0',
+              }}
+            >
+              {option.content}
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { MicIcon } from '@100mslive/react-icons';
+import { Box } from '../../../Layout';
+import { Text } from '../../../Text';
+import { IconButtonWithOptions } from './IconButtonWithOptions';
+
+export default {
+  title: 'Components/IconButtonWithOptions',
+  component: IconButtonWithOptions,
+  argTypes: {
+    tooltipMessage: { control: 'text' },
+    icon: { control: 'object' },
+    options: { control: 'object' },
+    active: { control: 'boolean' },
+    onClick: { control: 'function' },
+    key: { control: 'string' },
+  },
+} as Meta;
+
+const Template = args => (
+  <Box css={{ ml: '$20', bg: '$background_dim', p: '$8' }}>
+    <IconButtonWithOptions {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  tooltipMessage: 'Click me!',
+  icon: <MicIcon height={32} width={32} />,
+  options: [
+    { title: 'Option 1', content: <Text>Some content</Text> },
+    { title: 'Option 2', content: <Text>Some more content</Text> },
+  ],
+  active: true,
+  onClick: () => {
+    return;
+  },
+  key: '',
+};

package/src/Prebuilt/components/LeaveRoom.jsx

@@ -89,7 +89,7 @@ export const LeaveRoom = () => {
               asChild
               css={{
                 '&[data-state="open"]': {
-                  bg: '$errorDark',
+                  bg: '$alert_error_dim',
                 },
               }}
             >
@@ -106,27 +106,27 @@ export const LeaveRoom = () => {
                 data-testid="end_room_btn"
               >
                 <Flex gap={4}>
-                  <Box css={{ color: '$error' }}>
+                  <Box css={{ color: '$alert_error_default' }}>
                     <AlertTriangleIcon />
                   </Box>
                   <Flex direction="column" align="start">
-                    <Text variant="lg" css={{ c: '$error' }}>
+                    <Text variant="lg" css={{ c: '$alert_error_default' }}>
                       End Room for All
                     </Text>
-                    <Text variant="sm" css={{ c: '$textMedEmp', mt: '$2' }}>
+                    <Text variant="sm" css={{ c: '$on_surface_medium', mt: '$2' }}>
                       Warning: You can’t undo this action
                     </Text>
                   </Flex>
                 </Flex>
               </Dropdown.Item>
-              <Dropdown.Item css={{ bg: '$surfaceDefault' }} onClick={leaveRoom} data-testid="just_leave_btn">
+              <Dropdown.Item css={{ bg: '$surface_default' }} onClick={leaveRoom} data-testid="just_leave_btn">
                 <Flex gap={4}>
                   <Box>
                     <ExitIcon />
                   </Box>
                   <Flex direction="column" align="start">
                     <Text variant="lg">Leave {isStreamKit ? 'Studio' : 'Room'}</Text>
-                    <Text variant="sm" css={{ c: '$textMedEmp', mt: '$2' }}>
+                    <Text variant="sm" css={{ c: '$on_surface_medium', mt: '$2' }}>
                       You can always rejoin later
                     </Text>
                   </Flex>
@@ -174,16 +174,16 @@ export const LeaveRoom = () => {
 };
 
 const LeaveIconButton = styled(IconButton, {
-  color: '$white',
+  color: '$on_primary_high',
   h: '$14',
   px: '$8',
   r: '$1',
-  bg: '$error',
+  bg: '$alert_error_default',
   '&:not([disabled]):hover': {
-    bg: '$errorTint',
+    bg: '$alert_error_default',
   },
   '&:not([disabled]):active': {
-    bg: '$errorTint',
+    bg: '$alert_error_default',
   },
   '@md': {
     px: '$4',
@@ -192,7 +192,7 @@ const LeaveIconButton = styled(IconButton, {
 });
 
 const MenuTriggerButton = styled(LeaveIconButton, {
-  borderLeft: '1px solid $errorDark',
+  borderLeft: '1px solid $alert_error_dim',
   borderTopLeftRadius: 0,
   borderBottomLeftRadius: 0,
   px: '$3',

package/src/Prebuilt/components/MetaActions.jsx

@@ -25,14 +25,14 @@ const MetaActions = ({ isMobile = false, compact = false }) => {
           <IconButton
             onClick={toggleHandRaise}
             active={!isHandRaised}
-            data-testid={`${isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}`}
+            data-testid={isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}
           >
             <HandIcon />
           </IconButton>
         </Tooltip>
       )}
       {isBRBEnabled && (
-        <Tooltip title={`${isBRBOn ? `I'm back` : `I'll be right back`}`}>
+        <Tooltip title={isBRBOn ? `I'm back` : `I'll be right back`}>
           <IconButton onClick={toggleBRB} active={!isBRBOn} data-testid="brb_btn">
             <BrbIcon />
           </IconButton>

package/src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx

@@ -121,7 +121,7 @@ export const BulkRoleChangeModal = ({ onOpenChange }) => {
         </DialogRow>
         <DialogRow>
           {errorMessage && (
-            <Flex gap={2} css={{ c: '$error', w: '70%', ml: 'auto' }}>
+            <Flex gap={2} css={{ c: '$alert_error_default', w: '70%', ml: 'auto' }}>
               <AlertTriangleIcon />
               <Text css={{ c: 'inherit' }}>{errorMessage}</Text>
             </Flex>
@@ -129,7 +129,7 @@ export const BulkRoleChangeModal = ({ onOpenChange }) => {
         </DialogRow>
         <DialogRow justify="end">
           <Button variant="primary" onClick={changeBulkRole} disabled={!(selectedRole && selectedBulkRole.length > 0)}>
-            {isSubmiting && <Loading css={{ color: '$textSecondary' }} />}
+            {isSubmiting && <Loading css={{ color: '$on_primary_medium' }} />}
             Apply
           </Button>
         </DialogRow>

package/src/Prebuilt/components/MoreSettings/ChangeSelfRole.jsx

@@ -43,7 +43,7 @@ export const ChangeSelfRole = ({ onClick }) => {
         </Text>
         <ArrowRightIcon />
       </Dropdown.TriggerItem>
-      <Dropdown.SubMenuContent sideOffset={8} alignOffset={-5} css={{ '@md': { w: '$64' } }}>
+      <Dropdown.SubMenuContent sideOffset={8} alignOffset={-5} css={{ py: '$0', '@md': { w: '$64' } }}>
         {availableSelfChangeRoles.map(role => (
           <Dropdown.Item
             key={role}