Style voice widget icons to be less red

src/app/components/VoiceWidget.svelte

@@ -3,9 +3,9 @@
   import {fly} from "svelte/transition"
   import {goto} from "$app/navigation"
   import {page} from "$app/stores"
+  import cx from "classnames"
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
-  import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
   import Videocamera from "@assets/icons/videocamera.svg?dataurl"
   import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
   import Monitor from "@assets/icons/monitor.svg?dataurl"
@@ -32,6 +32,7 @@
     currentVoiceSession,
     currentVoiceRoom,
     voiceState,
+    isLocalSpeaking,
     leaveVoiceRoom,
     toggleMute,
     toggleCamera,
@@ -74,8 +75,21 @@
   const openCallSettings = () => {
     pushModal(VoiceCallAudioSettingsDialog)
   }
+
+  const mediaToggleClass = "center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
 </script>
 
+{#snippet mutedSlash(show: boolean)}
+  {#if show}
+    <span
+      class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
+      aria-hidden="true">
+      <span class="h-[1.3px] w-[150%] max-w-none shrink-0 -rotate-45 rounded-full bg-current"
+      ></span>
+    </span>
+  {/if}
+{/snippet}
+
 {#if targetRoom}
   <div
     in:fly={{y: 60, duration: 350}}
@@ -93,7 +107,7 @@
         {roomName} / {spaceName}
       </span>
     </div>
-    <div class="flex items-center gap-1">
+    <div class="flex items-center gap-2">
       {#if $voiceState === VoiceState.Joining}
         <span class="loading loading-spinner loading-sm"></span>
         <Button
@@ -105,25 +119,28 @@
       {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
         <Button
           data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
-          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.muted
+          class={cx(
-            ? 'btn-error'
+            mediaToggleClass,
-            : 'btn-ghost'}"
+            "overflow-visible",
+            !$currentVoiceSession.muted && $isLocalSpeaking && "text-primary",
+            $currentVoiceSession.muted &&
+              "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
+          )}
           onclick={toggleMute}>
-          <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
+          <span class="relative inline-flex items-center justify-center overflow-visible">
+            <Icon icon={Microphone} size={4} />
+            {@render mutedSlash($currentVoiceSession.muted)}
+          </span>
         </Button>
         <Button
           data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
-          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.cameraOn
+          class={cx(mediaToggleClass, $currentVoiceSession.cameraOn && "text-primary")}
-            ? 'btn-ghost'
-            : 'btn-error'}"
           onclick={toggleCamera}>
           <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
         </Button>
         <Button
           data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
-          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.screenShareOn
+          class={cx(mediaToggleClass, $currentVoiceSession.screenShareOn && "text-primary")}
-            ? 'btn-ghost'
-            : 'btn-error'}"
           onclick={toggleScreenShare}>
           <Icon icon={Monitor} size={4} />
         </Button>

src/app/voice.ts

@@ -135,6 +135,16 @@ export const isParticipantSpeaking = derived(
     $participants.some(sp => participantKey(sp) === participantKey(p)),
 )
 
+/** True when the local user is in LiveKit’s active-speakers list (currently talking). */
+export const isLocalSpeaking = derived(
+  [currentVoiceSession, speakingParticipants],
+  ([$session, $speaking]) => {
+    if (!$session?.room) return false
+    const local = participantFromLiveKitIdentity($session.room.localParticipant.identity)
+    return $speaking.some(sp => participantKey(sp) === participantKey(local))
+  },
+)
+
 const fetchLivekitToken = async (
   url: string,
   groupId: string,