From 561491c2aad7e11fdbcdf0ddf1de0c0a800ea921 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 2 Oct 2020 12:15:42 -0700
Subject: [PATCH] Updated language menu.

---
 components/common/Menu.module.css             |  1 +
 components/common/MenuButton.js               |  3 ++-
 components/settings/LanguageButton.js         |  2 ++
 components/settings/LanguageButton.module.css | 12 ++++++++++++
 lib/lang.js                                   |  2 +-
 package.json                                  |  2 +-
 6 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 components/settings/LanguageButton.module.css

diff --git a/components/common/Menu.module.css b/components/common/Menu.module.css
index 369e37c8..7ebf8e9d 100644
--- a/components/common/Menu.module.css
+++ b/components/common/Menu.module.css
@@ -1,4 +1,5 @@
 .menu {
+  background: var(--gray50);
   border: 1px solid var(--gray500);
   border-radius: 4px;
   overflow: hidden;
diff --git a/components/common/MenuButton.js b/components/common/MenuButton.js
index 62306570..7035b1ef 100644
--- a/components/common/MenuButton.js
+++ b/components/common/MenuButton.js
@@ -9,6 +9,7 @@ export default function MenuButton({
   icon,
   value,
   options,
+  menuClassname,
   menuPosition = 'bottom',
   menuAlign = 'right',
   onSelect,
@@ -45,7 +46,7 @@ export default function MenuButton({
       </Button>
       {showMenu && (
         <Menu
-          className={styles.menu}
+          className={classNames(styles.menu, menuClassname)}
           options={options}
           selectedOption={selectedOption}
           onSelect={handleSelect}
diff --git a/components/settings/LanguageButton.js b/components/settings/LanguageButton.js
index e643f070..e138e5a5 100644
--- a/components/settings/LanguageButton.js
+++ b/components/settings/LanguageButton.js
@@ -4,6 +4,7 @@ import { menuOptions } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import MenuButton from 'components/common/MenuButton';
 import Globe from 'assets/globe.svg';
+import styles from './LanguageButton.module.css';
 
 export default function LanguageButton() {
   const [locale, setLocale] = useLocale();
@@ -32,6 +33,7 @@ export default function LanguageButton() {
         icon={<Globe />}
         options={menuOptions}
         value={locale}
+        menuClassname={styles.menu}
         renderValue={option => option?.display}
         onSelect={handleSelect}
       />
diff --git a/components/settings/LanguageButton.module.css b/components/settings/LanguageButton.module.css
new file mode 100644
index 00000000..da909df5
--- /dev/null
+++ b/components/settings/LanguageButton.module.css
@@ -0,0 +1,12 @@
+.menu {
+  display: flex;
+  flex-flow: row wrap;
+  min-width: 500px;
+  max-width: 100vw;
+  padding: 10px;
+}
+
+.menu div {
+  border-radius: 5px;
+  min-width: 33%;
+}
diff --git a/lib/lang.js b/lib/lang.js
index a6d311b5..388c58e5 100644
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -59,10 +59,10 @@ export const dateLocales = {
 };
 
 export const menuOptions = [
-  { label: 'English', value: 'en-US', display: 'en' },
   { label: '中文', value: 'zh-CN', display: 'cn' },
   { label: 'Dansk', value: 'da-DK', display: 'da' },
   { label: 'Deutsch', value: 'de-DE', display: 'de' },
+  { label: 'English', value: 'en-US', display: 'en' },
   { label: 'Español', value: 'es-MX', display: 'es' },
   { label: 'Føroyskt', value: 'fo-FO', display: 'fo' },
   { label: 'Français', value: 'fr-FR', display: 'fr' },
diff --git a/package.json b/package.json
index 656e535c..6aef7812 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.70.0",
+  "version": "0.71.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",