Updated language menu.

components/common/Menu.module.css

@@ -1,4 +1,5 @@
 .menu {
+  background: var(--gray50);
   border: 1px solid var(--gray500);
   border-radius: 4px;
   overflow: hidden;

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}

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}
       />

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

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' },

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",