Header button updates.

components/common/Button.module.css

@@ -61,7 +61,7 @@
 }
 
 .light:hover {
-  background: var(--gray75);
+  background: inherit;
 }
 
 .button:disabled {

components/common/UserButton.js

@@ -9,6 +9,7 @@ import useDocumentClick from 'hooks/useDocumentClick';
 import User from 'assets/user.svg';
 import Chevron from 'assets/chevron-down.svg';
 import styles from './UserButton.module.css';
+import classNames from 'classnames';
 
 export default function UserButton() {
   const [showMenu, setShowMenu] = useState(false);
@@ -52,7 +53,7 @@ export default function UserButton() {
     <div ref={ref} className={styles.container}>
       <Button
         icon={<User />}
-        className={styles.button}
+        className={classNames({ [styles.open]: showMenu })}
         onClick={() => setShowMenu(state => !state)}
         size="large"
         variant="light"

components/common/UserButton.module.css

@@ -4,11 +4,6 @@
   cursor: pointer;
 }
 
-.button {
-  display: flex;
-  flex-wrap: nowrap;
-}
-
 .username {
   border-bottom: 1px solid var(--gray500);
 }
@@ -20,3 +15,11 @@
 .menu {
   z-index: 100;
 }
+
+.open {
+  background: var(--gray200);
+}
+
+.open:hover {
+  background: var(--gray200);
+}