From a2ab23c7ae3fff7d101ec3dee5fe4da5694778fd Mon Sep 17 00:00:00 2001
From: Matt Lorentz <5+mplorentz@noreply.coracle.social>
Date: Wed, 1 Jul 2026 23:25:29 +0000
Subject: [PATCH] Fix call icon consistency (#312)

Co-authored-by: Matt Lorentz <5+mplorentz@noreply.coracle.social>
Co-committed-by: Matt Lorentz <5+mplorentz@noreply.coracle.social>
---
 src/app/components/VoiceRoomJoinDialog.svelte |  6 +----
 src/app/components/VoiceWidget.svelte         | 24 +++++++------------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/app/components/VoiceRoomJoinDialog.svelte b/src/app/components/VoiceRoomJoinDialog.svelte
index 6e7c67ba..57273b7b 100644
--- a/src/app/components/VoiceRoomJoinDialog.svelte
+++ b/src/app/components/VoiceRoomJoinDialog.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import {displayRelayUrl} from "@welshman/util"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Volume from "@assets/icons/volume.svg?dataurl"
   import Button from "@lib/components/Button.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
@@ -128,9 +127,6 @@
       <Icon icon={AltArrowLeft} />
       Don't join
     </Button>
-    <Button class="button button-primary" onclick={joinVoice}>
-      Join voice
-      <Icon icon={AltArrowRight} />
-    </Button>
+    <Button class="button button-primary" onclick={joinVoice}>Join voice</Button>
   </ModalFooter>
 </Modal>
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 8343a3dd..7795006f 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -6,10 +6,11 @@
   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 VideocameraOff from "@assets/icons/videocamera-off.svg?dataurl"
   import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
   import Monitor from "@assets/icons/monitor.svg?dataurl"
-  import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
+  import EndCall from "@assets/icons/end-call-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
   import ChatRound from "@assets/icons/chat-round.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
@@ -162,7 +163,7 @@
         </Button>
       {/if}
     </div>
-    <div class="flex flex-wrap items-center gap-2">
+    <div class="flex items-center gap-1.5">
       {#if $callState === CallState.Joining}
         <Spinner size="sm" />
         <Button
@@ -176,23 +177,16 @@
           data-tip={$callMicMuted ? "Unmute" : "Mute"}
           class={cx(
             "button button-sm button-square tip tip-top",
-            $callMicMuted ? "button-error" : "button-neutral",
+            $callMicMuted ? "button-neutral" : "button-primary",
           )}
           onclick={toggleMute}>
-          <span class="relative inline-flex">
-            <Icon icon={Microphone} size={4} />
-            {#if $callMicMuted}
-              <span
-                class="absolute left-1/2 top-1/2 h-0.5 w-6 -translate-x-1/2 -translate-y-1/2 -rotate-45 rounded-full bg-current"
-                aria-hidden="true"></span>
-            {/if}
-          </span>
+          <Icon icon={$callMicMuted ? MicrophoneOff : Microphone} size={$callMicMuted ? 4 : 4.5} />
         </Button>
         <Button
           data-tip={$currentCallSession.cameraOn ? "Turn off camera" : "Turn on camera"}
           class={cx(
             "button button-sm button-square tip tip-top",
-            $currentCallSession.cameraOn ? "button-primary" : "button-error",
+            $currentCallSession.cameraOn ? "button-primary" : "button-neutral",
           )}
           onclick={toggleCamera}>
           <Icon icon={$currentCallSession.cameraOn ? VideocameraRecord : VideocameraOff} size={4} />
@@ -205,7 +199,7 @@
               $currentCallSession.screenShareOn ? "button-primary" : "button-neutral",
             )}
             onclick={toggleScreenShare}>
-            <Icon icon={Monitor} size={4} />
+            <Icon icon={Monitor} size={3.75} />
           </Button>
         {/if}
         <Button
@@ -218,14 +212,14 @@
           data-tip="Leave room"
           class="button button-error button-sm button-square tip tip-top"
           onclick={leaveVoiceRoom}>
-          <Icon icon={PhoneRounded} size={4} />
+          <Icon icon={EndCall} size={4.5} />
         </Button>
       {:else}
         <Button
           data-tip="Join Voice"
           class="button button-primary button-sm button-square tip tip-top"
           onclick={openJoinDialog}>
-          <Icon icon={PhoneCallingRounded} size={4} />
+          <Icon icon={PhoneCallingRounded} size={4.5} />
         </Button>
       {/if}
     </div>