From 6ba3cc66ae37f036e744afb6d6d10b0ab269b8ea Mon Sep 17 00:00:00 2001
From: Ravi theja <ravi.theja@100ms.live>
Date: Tue, 27 Feb 2024 14:07:10 +0530
Subject: [PATCH] fix: update selected device css, mute all label

---
 .../src/Prebuilt/components/AudioVideoToggle.tsx          | 3 ++-
 .../src/Prebuilt/components/Footer/RoleOptions.tsx        | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.tsx
index 6184ca6aa9..8fc403db76 100644
--- 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
index 1e1a15585f..3234fb4e45 100644
--- 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}