studio/element-call
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Invert the colors of the camera and microphone buttons

Browse Source 
So that they use primary color tokens when unmuted, and secondary color tokens when muted. This makes them work like the screen sharing button.
This commit is contained in:
Robin
2026-03-18 11:29:55 +01:00
parent 6d14f1d06f
commit fa844446b6
4 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/button/Button.tsx
View File

@@ -22,16 +22,16 @@ import {
import styles from "./Button.module.css"; import styles from "./Button.module.css";
interface MicButtonProps extends ComponentPropsWithoutRef<"button"> { interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
muted: boolean; enabled: boolean;
size?: "sm" | "lg"; size?: "sm" | "lg";
} }
export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => { export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon; const Icon = enabled ? MicOnSolidIcon : MicOffSolidIcon;
const label = muted const label = enabled
? t("unmute_microphone_button_label") ? t("mute_microphone_button_label")
: t("mute_microphone_button_label"); : t("unmute_microphone_button_label");
return ( return (
<Tooltip label={label}> <Tooltip label={label}>
@@ -39,7 +39,7 @@ export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
iconOnly iconOnly
aria-label={label} aria-label={label}
Icon={Icon} Icon={Icon}
kind={muted ? "primary" : "secondary"} kind={enabled ? "primary" : "secondary"}
{...props} {...props}
/> />
</Tooltip> </Tooltip>
@@ -47,16 +47,16 @@ export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
}; };
interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> { interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
muted: boolean; enabled: boolean;
size?: "sm" | "lg"; size?: "sm" | "lg";
} }
export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => { export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const Icon = muted ? VideoCallOffSolidIcon : VideoCallSolidIcon; const Icon = enabled ? VideoCallSolidIcon : VideoCallOffSolidIcon;
const label = muted const label = enabled
? t("start_video_button_label") ? t("stop_video_button_label")
: t("stop_video_button_label"); : t("start_video_button_label");
return ( return (
<Tooltip label={label}> <Tooltip label={label}>
@@ -64,7 +64,7 @@ export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
iconOnly iconOnly
aria-label={label} aria-label={label}
Icon={Icon} Icon={Icon}
kind={muted ? "primary" : "secondary"} kind={enabled ? "primary" : "secondary"}
{...props} {...props}
/> />
</Tooltip> </Tooltip>

4
src/room/InCallView.tsx
View File

@@ -645,7 +645,7 @@ export const InCallView: FC<InCallViewProps> = ({
<MicButton <MicButton
size={buttonSize} size={buttonSize}
key="audio" key="audio"
muted={!audioEnabled} enabled={audioEnabled}
onClick={toggleAudio ?? undefined} onClick={toggleAudio ?? undefined}
disabled={toggleAudio === null} disabled={toggleAudio === null}
data-testid="incall_mute" data-testid="incall_mute"
@@ -653,7 +653,7 @@ export const InCallView: FC<InCallViewProps> = ({
<VideoButton <VideoButton
size={buttonSize} size={buttonSize}
key="video" key="video"
muted={!videoEnabled} enabled={videoEnabled}
onClick={toggleVideo ?? undefined} onClick={toggleVideo ?? undefined}
disabled={toggleVideo === null} disabled={toggleVideo === null}
data-testid="incall_videomute" data-testid="incall_videomute"

4
src/room/LobbyView.tsx
View File

@@ -230,12 +230,12 @@ export const LobbyView: FC<Props> = ({
{recentsButtonInFooter && recentsButton} {recentsButtonInFooter && recentsButton}
<div className={inCallStyles.buttons}> <div className={inCallStyles.buttons}>
<MicButton <MicButton
muted={!audioEnabled} enabled={audioEnabled}
onClick={toggleAudio ?? undefined} onClick={toggleAudio ?? undefined}
disabled={toggleAudio === null} disabled={toggleAudio === null}
/> />
<VideoButton <VideoButton
muted={!videoEnabled} enabled={videoEnabled}
onClick={toggleVideo ?? undefined} onClick={toggleVideo ?? undefined}
disabled={toggleVideo === null} disabled={toggleVideo === null}
/> />

4
src/room/__snapshots__/InCallView.test.tsx.snap
View File

@@ -289,7 +289,7 @@ exports[`InCallView > rendering > renders 1`] = `
aria-label="Unmute microphone" aria-label="Unmute microphone"
aria-labelledby="_r_8_" aria-labelledby="_r_8_"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53" class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="primary" data-kind="secondary"
data-size="lg" data-size="lg"
data-testid="incall_mute" data-testid="incall_mute"
role="button" role="button"
@@ -313,7 +313,7 @@ exports[`InCallView > rendering > renders 1`] = `
aria-label="Start video" aria-label="Start video"
aria-labelledby="_r_d_" aria-labelledby="_r_d_"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53" class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="primary" data-kind="secondary"
data-size="lg" data-size="lg"
data-testid="incall_videomute" data-testid="incall_videomute"
role="button" role="button"