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);
+}

components/layout/Header.js

@@ -36,8 +36,8 @@ export default function Header() {
         </div>
         <div className="col-12 col-md-12 col-lg-3">
           <div className={styles.buttons}>
-            <LanguageButton menuAlign="right" />
             <ThemeButton />
+            <LanguageButton menuAlign="right" />
             {user && <UserButton />}
           </div>
         </div>

components/settings/LanguageButton.js

@@ -1,4 +1,5 @@
 import React, { useState, useRef } from 'react';
+import classNames from 'classnames';
 import Head from 'next/head';
 import Menu from 'components/common/Menu';
 import Button from 'components/common/Button';
@@ -46,7 +47,12 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
         )}
       </Head>
       <div ref={ref} className={styles.container}>
-        <Button icon={<Globe />} onClick={toggleMenu} variant="light">
+        <Button
+          icon={<Globe />}
+          className={classNames({ [styles.open]: showMenu })}
+          onClick={toggleMenu}
+          variant="light"
+        >
           <div className={styles.text}>{selectedLocale}</div>
         </Button>
         {showMenu && (

components/settings/LanguageButton.module.css

@@ -11,3 +11,11 @@
 .text {
   font-size: var(--font-size-small);
 }
+
+.open {
+  background: var(--gray200);
+}
+
+.open:hover {
+  background: var(--gray200);
+}