fix: update selected device css, mute all label

100mslive · Feb 27, 2024 · 6ba3cc6 · 6ba3cc6
1 parent dfa9775
commit 6ba3cc6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.tsx
@@ -57,11 +57,12 @@ export const Options = ({
         <Dropdown.Item
           key={option.label}
           css={{
-            backgroundColor: selectedDeviceId === option.deviceId ? '$surface_bright' : '$surface_dim',
+            backgroundColor: '$surface_dim',
             p: '$4 $8',
             h: '$15',
             fontSize: '$xs',
             justifyContent: 'space-between',
+            color: selectedDeviceId === option.deviceId ? '$primary_bright' : '',
           }}
           onClick={() => {
             onClick(option.deviceId);

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx
@@ -63,7 +63,7 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
             <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
               <MicOffIcon />
               <Text variant="sm" css={optionTextCSS}>
-                Mute Audio
+                Mute Audio for All
               </Text>
             </Dropdown.Item>
           ) : null}
@@ -72,7 +72,7 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
             <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
               <MicOnIcon />
               <Text variant="sm" css={optionTextCSS}>
-                Unmute Audio
+                Unmute Audio for All
               </Text>
             </Dropdown.Item>
           ) : null}
@@ -85,7 +85,7 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
             <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
               <VideoOffIcon />
               <Text variant="sm" css={optionTextCSS}>
-                Mute Video
+                Mute Video for All
               </Text>
             </Dropdown.Item>
           ) : null}
@@ -94,7 +94,7 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
             <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
               <VideoOnIcon />
               <Text variant="sm" css={optionTextCSS}>
-                Unmute Video
+                Unmute Video for All
               </Text>
             </Dropdown.Item>
           ) : null}