lol ai icon

src/App.css

@@ -441,8 +441,26 @@ body {
 
 .voice-indicator-icon {
   font-size: 0.75rem;
-  opacity: 0.8;
-  filter: grayscale(0.5);
+  color: var(--interactive-normal);
+  display: flex;
+  align-items: center;
+}
+
+.deafen-indicator {
+  color: var(--interactive-normal) !important;
+}
+
+.deafen-indicator-svg {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: -0.125em;
+  color: var(--interactive-normal) !important;
+}
+
+.icon-btn:hover .deafen-indicator,
+.icon-btn:hover .deafen-indicator-svg {
+  color: var(--interactive-hover) !important;
 }
 
 .voice-member-item {

src/chat/ChatContainer.svelte

@@ -107,11 +107,18 @@
           <i class="fas {webrtc.localMedia.isMuted ? 'fa-microphone-slash' : 'fa-microphone'}"></i>
         </button>
         <button
-          class="icon-btn {webrtc.localMedia.isDeafened ? 'active danger' : ''}"
+          class="icon-btn"
           onclick={() => webrtc.toggleDeafen()}
           title={webrtc.localMedia.isDeafened ? "Undeafen" : "Deafen"}
         >
-          <i class="fas {webrtc.localMedia.isDeafened ? 'fa-headphones-slash' : 'fa-headphones'}"></i>
+          {#if webrtc.localMedia.isDeafened}
+            <svg viewBox="0 0 512 512" class="deafen-indicator-svg" fill="currentColor">
+              <path d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256V416c0 35.3-28.7 64-64 64H384c-35.3 0-64-28.7-64-64V320c0-35.3 28.7-64 64-64h64V256c0-106-86-192-192-192S64 150 64 256v64h64c35.3 0 64 28.7 64 64v96c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256z"/>
+              <rect x="-50" y="236" width="612" height="40" transform="rotate(-45 256 256)" fill="currentColor" rx="4" />
+            </svg>
+          {:else}
+            <i class="fas fa-headphones deafen-indicator"></i>
+          {/if}
         </button>
         <button
           class="icon-btn"

src/chat/components/channels/VoiceChannelGroup.svelte

@@ -136,7 +136,12 @@
               {/if}
               <div class="voice-member-indicators">
                 {#if vs.isDeafened}
-                  <span class="voice-indicator-icon" title="Deafened"><i class="fas fa-headphones-slash"></i></span>
+                  <span class="voice-indicator-icon" title="Deafened">
+                    <svg viewBox="0 0 512 512" class="deafen-indicator-svg" fill="currentColor">
+                      <path d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256V416c0 35.3-28.7 64-64 64H384c-35.3 0-64-28.7-64-64V320c0-35.3 28.7-64 64-64h64V256c0-106-86-192-192-192S64 150 64 256v64h64c35.3 0 64 28.7 64 64v96c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256z"/>
+                      <rect x="-50" y="236" width="612" height="40" transform="rotate(-45 256 256)" fill="currentColor" rx="4" />
+                    </svg>
+                  </span>
                 {:else if vs.isMuted}
                   <span class="voice-indicator-icon" title="Muted"><i class="fas fa-microphone-slash"></i></span>
                 {/if}