diff --git a/components/common/Button.module.css b/components/common/Button.module.css
index 14e12d96..6db91886 100644
--- a/components/common/Button.module.css
+++ b/components/common/Button.module.css
@@ -61,7 +61,7 @@
}
.light:hover {
- background: var(--gray75);
+ background: inherit;
}
.button:disabled {
diff --git a/components/common/UserButton.js b/components/common/UserButton.js
index 4c3ffbe7..a4e70276 100644
--- a/components/common/UserButton.js
+++ b/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() {
}
- className={styles.button}
+ className={classNames({ [styles.open]: showMenu })}
onClick={() => setShowMenu(state => !state)}
size="large"
variant="light"
diff --git a/components/common/UserButton.module.css b/components/common/UserButton.module.css
index d848c8e3..a0b2c2ab 100644
--- a/components/common/UserButton.module.css
+++ b/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);
+}
diff --git a/components/layout/Header.js b/components/layout/Header.js
index de777af4..ee027ee9 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -36,8 +36,8 @@ export default function Header() {
diff --git a/components/settings/LanguageButton.js b/components/settings/LanguageButton.js
index 38329c9b..63a09712 100644
--- a/components/settings/LanguageButton.js
+++ b/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
)}
-
} onClick={toggleMenu} variant="light">
+
}
+ className={classNames({ [styles.open]: showMenu })}
+ onClick={toggleMenu}
+ variant="light"
+ >
{selectedLocale}
{showMenu && (
diff --git a/components/settings/LanguageButton.module.css b/components/settings/LanguageButton.module.css
index 0e8c006e..c2639a2a 100644
--- a/components/settings/LanguageButton.module.css
+++ b/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);
+}