Fix mute/unmute styling

This commit is contained in:
Robert Long 2021-12-06 12:19:38 -08:00
parent f57b520622
commit 4e2d1c5dcd
7 changed files with 21 additions and 39 deletions

View file

@ -52,6 +52,7 @@ export function PopoverMenu({ children, placement, ...rest }) {
<popoverTrigger.type
{...popoverTrigger.props}
{...menuTriggerProps}
on={popoverMenuState.isOpen}
ref={buttonRef}
/>
{popoverMenuState.isOpen &&

View file

@ -21,6 +21,7 @@
align-items: center;
padding: 0 12px;
color: var(--textColor1);
font-size: 14px;
}
.popoverMenuItem > * {

View file

@ -334,7 +334,7 @@ function RoomSetupView({
}))}
>
<VideoButton
enabled={localVideoMuted}
muted={localVideoMuted}
onClick={toggleLocalVideoMuted}
/>
</DropdownButton>
@ -532,10 +532,7 @@ function InRoomView({
)}
<div className={styles.footer}>
<MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
<VideoButton
enabled={localVideoMuted}
onPress={toggleLocalVideoMuted}
/>
<VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
{canScreenshare && !isSafari && (
<ScreenshareButton
enabled={isScreensharing}

View file

@ -16,12 +16,13 @@ import { ReactComponent as CheckIcon } from "./icons/Check.svg";
import { useButton } from "@react-aria/button";
export const RoomButton = forwardRef(
({ on, className, children, ...rest }, ref) => {
({ on, off, className, children, ...rest }, ref) => {
const { buttonProps } = useButton(rest, ref);
return (
<button
className={classNames(styles.roomButton, className, {
[styles.on]: on,
[styles.off]: off,
})}
{...buttonProps}
ref={ref}
@ -83,7 +84,7 @@ export function DropdownButton({ onChange, options, value, children }) {
export function MicButton({ muted, ...rest }) {
return (
<RoomButton {...rest} on={muted}>
<RoomButton {...rest} off={muted}>
<ButtonTooltip>
{muted ? "Unmute microphone" : "Mute microphone"}
</ButtonTooltip>
@ -92,24 +93,20 @@ export function MicButton({ muted, ...rest }) {
);
}
export function VideoButton({ enabled, ...rest }) {
export function VideoButton({ muted, ...rest }) {
return (
<RoomButton {...rest} on={enabled}>
<RoomButton {...rest} off={muted}>
<ButtonTooltip>
{enabled ? "Turn off camera" : "Turn on camera"}
{muted ? "Turn on camera" : "Turn off camera"}
</ButtonTooltip>
{enabled ? <DisableVideoIcon /> : <VideoIcon />}
{muted ? <DisableVideoIcon /> : <VideoIcon />}
</RoomButton>
);
}
export function ScreenshareButton({ enabled, className, ...rest }) {
return (
<RoomButton
className={classNames(styles.screenshareButton, className)}
{...rest}
on={enabled}
>
<RoomButton {...rest} on={enabled}>
<ButtonTooltip>
{enabled ? "Stop sharing screen" : "Share screen"}
</ButtonTooltip>

View file

@ -41,7 +41,8 @@ limitations under the License.
.roomButton:active {
}
.roomButton.on {
.roomButton.on,
.roomButton.off {
background-color: #ffffff;
}
@ -66,10 +67,14 @@ limitations under the License.
background-color: #ff5b55;
}
.screenshareButton.on svg * {
.roomButton.on svg * {
fill: #0dbd8b;
}
.roomButton.off svg * {
fill: #21262c;
}
.dropdownButtonContainer {
position: relative;
}

View file

@ -47,12 +47,9 @@ export function UserMenu({ userName, signedIn, onLogin, onLogout }) {
return (
<PopoverMenu onAction={onAction} placement="bottom right">
<HeaderButton>
<HeaderButton className={styles.userButton}>
<ButtonTooltip>Profile</ButtonTooltip>
<div className={styles.userButton}>
<UserIcon />
<span>{userName}</span>
</div>
</HeaderButton>
{(props) => (
<Popover {...props} label="User menu">

View file

@ -1,19 +1,3 @@
.userButton {
display: flex;
align-items: center;
color: var(--textColor1);
font-weight: 600;
font-size: 15px;
}
.userButton svg * {
fill: var(--textColor1);
}
.userButton > * {
margin-right: 5px;
}
.userButton > :last-child {
margin-right: 0;
}