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

Merge pull request #3809 from element-hq/robin/invert-buttons

Browse Source 
Invert the colors of the camera and microphone buttons
This commit is contained in:
Robin
2026-03-18 14:49:55 +01:00
committed by GitHub
parent 6d14f1d06f fa844446b6
commit 4d69565312
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"