From fa844446b6a745731ceb20178314bf8ba0b0ca41 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 18 Mar 2026 11:29:55 +0100
Subject: [PATCH] Invert the colors of the camera and microphone buttons

So that they use primary color tokens when unmuted, and secondary color tokens when muted. This makes them work like the screen sharing button.
---
 src/button/Button.tsx                         | 28 +++++++++----------
 src/room/InCallView.tsx                       |  4 +--
 src/room/LobbyView.tsx                        |  4 +--
 .../__snapshots__/InCallView.test.tsx.snap    |  4 +--
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 00d803f1..1aff9fa3 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -22,16 +22,16 @@ import {
 import styles from "./Button.module.css";
 
 interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
-  muted: boolean;
+  enabled: boolean;
   size?: "sm" | "lg";
 }
 
-export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
+export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
   const { t } = useTranslation();
-  const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
-  const label = muted
-    ? t("unmute_microphone_button_label")
-    : t("mute_microphone_button_label");
+  const Icon = enabled ? MicOnSolidIcon : MicOffSolidIcon;
+  const label = enabled
+    ? t("mute_microphone_button_label")
+    : t("unmute_microphone_button_label");
 
   return (
     <Tooltip label={label}>
@@ -39,7 +39,7 @@ export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
         iconOnly
         aria-label={label}
         Icon={Icon}
-        kind={muted ? "primary" : "secondary"}
+        kind={enabled ? "primary" : "secondary"}
         {...props}
       />
     </Tooltip>
@@ -47,16 +47,16 @@ export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
 };
 
 interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
-  muted: boolean;
+  enabled: boolean;
   size?: "sm" | "lg";
 }
 
-export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
+export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
   const { t } = useTranslation();
-  const Icon = muted ? VideoCallOffSolidIcon : VideoCallSolidIcon;
-  const label = muted
-    ? t("start_video_button_label")
-    : t("stop_video_button_label");
+  const Icon = enabled ? VideoCallSolidIcon : VideoCallOffSolidIcon;
+  const label = enabled
+    ? t("stop_video_button_label")
+    : t("start_video_button_label");
 
   return (
     <Tooltip label={label}>
@@ -64,7 +64,7 @@ export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
         iconOnly
         aria-label={label}
         Icon={Icon}
-        kind={muted ? "primary" : "secondary"}
+        kind={enabled ? "primary" : "secondary"}
         {...props}
       />
     </Tooltip>
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index f1a872a0..ff221329 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -645,7 +645,7 @@ export const InCallView: FC<InCallViewProps> = ({
     <MicButton
       size={buttonSize}
       key="audio"
-      muted={!audioEnabled}
+      enabled={audioEnabled}
       onClick={toggleAudio ?? undefined}
       disabled={toggleAudio === null}
       data-testid="incall_mute"
@@ -653,7 +653,7 @@ export const InCallView: FC<InCallViewProps> = ({
     <VideoButton
       size={buttonSize}
       key="video"
-      muted={!videoEnabled}
+      enabled={videoEnabled}
       onClick={toggleVideo ?? undefined}
       disabled={toggleVideo === null}
       data-testid="incall_videomute"
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index 10e098f1..37b334e9 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -230,12 +230,12 @@ export const LobbyView: FC<Props> = ({
           {recentsButtonInFooter && recentsButton}
           <div className={inCallStyles.buttons}>
             <MicButton
-              muted={!audioEnabled}
+              enabled={audioEnabled}
               onClick={toggleAudio ?? undefined}
               disabled={toggleAudio === null}
             />
             <VideoButton
-              muted={!videoEnabled}
+              enabled={videoEnabled}
               onClick={toggleVideo ?? undefined}
               disabled={toggleVideo === null}
             />
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index e4707c5c..1188d0cc 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -289,7 +289,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-label="Unmute microphone"
           aria-labelledby="_r_8_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="primary"
+          data-kind="secondary"
           data-size="lg"
           data-testid="incall_mute"
           role="button"
@@ -313,7 +313,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-label="Start video"
           aria-labelledby="_r_d_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="primary"
+          data-kind="secondary"
           data-size="lg"
           data-testid="incall_videomute"
           role="button"