Fix mute/unmute styling

src/PopoverMenu.jsx

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

src/PopoverMenu.module.css

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

src/Room.jsx

@@ -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}

src/RoomButton.jsx

@@ -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>

src/RoomButton.module.css

@@ -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;
 }

src/UserMenu.jsx

@@ -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>
+        <UserIcon />
       </HeaderButton>
       {(props) => (
         <Popover {...props} label="User menu">

src/UserMenu.module.css

@@ -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;
-}