From 4e2d1c5dcd25d19c610cb2521ab20b80b0550e41 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Mon, 6 Dec 2021 12:19:38 -0800
Subject: [PATCH] Fix mute/unmute styling

---
 src/PopoverMenu.jsx        |  1 +
 src/PopoverMenu.module.css |  1 +
 src/Room.jsx               |  7 ++-----
 src/RoomButton.jsx         | 19 ++++++++-----------
 src/RoomButton.module.css  |  9 +++++++--
 src/UserMenu.jsx           |  7 ++-----
 src/UserMenu.module.css    | 16 ----------------
 7 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/src/PopoverMenu.jsx b/src/PopoverMenu.jsx
index f5ba72a..5c1e6cb 100644
--- a/src/PopoverMenu.jsx
+++ b/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 &&
diff --git a/src/PopoverMenu.module.css b/src/PopoverMenu.module.css
index d42c1db..241f7b8 100644
--- a/src/PopoverMenu.module.css
+++ b/src/PopoverMenu.module.css
@@ -21,6 +21,7 @@
   align-items: center;
   padding: 0 12px;
   color: var(--textColor1);
+  font-size: 14px;
 }
 
 .popoverMenuItem > * {
diff --git a/src/Room.jsx b/src/Room.jsx
index 3e90657..c39b367 100644
--- a/src/Room.jsx
+++ b/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}
diff --git a/src/RoomButton.jsx b/src/RoomButton.jsx
index 8c54601..977dbe7 100644
--- a/src/RoomButton.jsx
+++ b/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>
diff --git a/src/RoomButton.module.css b/src/RoomButton.module.css
index 428ad9b..5181cf3 100644
--- a/src/RoomButton.module.css
+++ b/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;
 }
diff --git a/src/UserMenu.jsx b/src/UserMenu.jsx
index faa7a58..e774091 100644
--- a/src/UserMenu.jsx
+++ b/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">
diff --git a/src/UserMenu.module.css b/src/UserMenu.module.css
index 360cf61..60597b4 100644
--- a/src/UserMenu.module.css
+++ b/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;
-}