Make theme switch a native select/option menu

6 files changed, 83 insertions, 72 deletions

diff --git a/src/components/shared/ThemeSwitcher.module.css b/src/components/shared/ThemeSwitcher.module.css
deleted file mode 100644
index 919c86c..0000000
--- a/src/components/shared/ThemeSwitcher.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.iconWrapper {
-  --sz: 40px;
-
-  width: var(--sz);
-  height: var(--sz);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  outline: none;
-  padding: 5px;
-  color: var(--color-text);
-  border-radius: 100%;
-  border: 1px solid transparent;
-}
-.iconWrapper:hover {
-  opacity: 0.6;
-}
-.iconWrapper:focus {
-  border-color: var(--color-focus-blue);
-}
-
-.themeSwitchContainer {
-  appearance: none;
-  user-select: none;
-  background: none;
-  cursor: pointer;
-}
diff --git a/src/components/shared/ThemeSwitcher.module.scss b/src/components/shared/ThemeSwitcher.module.scss
new file mode 100644
index 0000000..c5de126
--- /dev/null
+++ b/src/components/shared/ThemeSwitcher.module.scss
@@ -0,0 +1,58 @@
+.iconWrapper {
+  --sz: 40px;
+
+  width: var(--sz);
+  height: var(--sz);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  outline: none;
+  padding: 5px;
+  color: var(--color-text);
+  border-radius: 100%;
+  border: 1px solid transparent;
+}
+.iconWrapper:hover {
+  opacity: 0.6;
+}
+.iconWrapper:focus {
+  border-color: var(--color-focus-blue);
+}
+
+.themeSwitchContainer {
+  --sz: 40px;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--sz);
+  select {
+    cursor: pointer;
+    padding-left: var(--sz);
+    width: var(--sz);
+    height: var(--sz);
+    appearance: none;
+    outline: none;
+    border-radius: 100%;
+    border: 1px solid transparent;
+    background: var(--color-bg-sidebar);
+    &:focus {
+      border-color: var(--color-focus-blue);
+    }
+    option {
+      // this has effect in Firefox
+      // Chrome and Safari use the native menu
+      background: var(--color-bg-sidebar);
+    }
+  }
+  .iconWrapper {
+    pointer-events: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
diff --git a/src/components/shared/ThemeSwitcher.tsx b/src/components/shared/ThemeSwitcher.tsx
index 90990b6..45b60bc 100644
--- a/src/components/shared/ThemeSwitcher.tsx
+++ b/src/components/shared/ThemeSwitcher.tsx
@@ -1,5 +1,4 @@
 import Tooltip from '@reach/tooltip';
-import cx from 'clsx';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'src/components/StateProvider';
@@ -7,36 +6,18 @@ import { framerMotionResouce } from 'src/misc/motion';
 import { getTheme, switchTheme } from 'src/store/app';
 import { State } from 'src/store/types';
 
-import s from './ThemeSwitcher.module.css';
+import s from './ThemeSwitcher.module.scss';
 
 export function ThemeSwitcherImpl({ theme, dispatch }) {
   const { t } = useTranslation();
 
-  const switchThemeHooked = React.useCallback(() => {
-    dispatch(switchTheme());
-  }, [dispatch]);
-
-  const nextThemeName = React.useMemo(() => {
-    switch (theme) {
-      case 'light':
-        return 'dark';
-      case 'dark':
-        return 'auto';
-      case 'auto':
-        return 'light';
-      default:
-        console.assert(false, 'Unknown theme');
-        return 'unknown';
-    }
-  }, [theme]);
-
   const themeIcon = React.useMemo(() => {
     switch (theme) {
-      case 'light':
-        return <MoonA />;
       case 'dark':
-        return <Auto />;
+        return <MoonA />;
       case 'auto':
+        return <Auto />;
+      case 'light':
         return <Sun />;
       default:
         console.assert(false, 'Unknown theme');
@@ -44,11 +25,21 @@ export function ThemeSwitcherImpl({ theme, dispatch }) {
     }
   }, [theme]);
 
+  const onChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => dispatch(switchTheme(e.target.value)),
+    [dispatch]
+  );
+
   return (
-    <Tooltip label={t('theme')} aria-label={'switch to ' + nextThemeName + ' theme'}>
-      <button className={cx(s.iconWrapper, s.themeSwitchContainer)} onClick={switchThemeHooked}>
-        {themeIcon}
-      </button>
+    <Tooltip label={t('switch_theme')} aria-label={'switch theme'}>
+      <div className={s.themeSwitchContainer}>
+        <span className={s.iconWrapper}>{themeIcon}</span>
+        <select onChange={onChange}>
+          <option value="auto">Auto</option>
+          <option value="dark">Dark</option>
+          <option value="light">Light</option>
+        </select>
+      </div>
     </Tooltip>
   );
 }
@@ -95,7 +86,7 @@ function Sun() {
       strokeLinejoin="round"
     >
       <circle cx="12" cy="12" r="5"></circle>
-      <motion.g initial={{ scale: 0.8 }} animate={{ scale: 1 }} transition={{ duration: 0.7 }}>
+      <motion.g initial={{ scale: 0.7 }} animate={{ scale: 1 }} transition={{ duration: 0.5 }}>
         <line x1="12" y1="1" x2="12" y2="3"></line>
         <line x1="12" y1="21" x2="12" y2="23"></line>
         <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
@@ -137,7 +128,7 @@ function Auto() {
           transition={{ duration: 0.7 }}
         />
       </clipPath>
-      <circle cx="12" cy="12" r="6" clip-path="url(#cut-off-bottom)" fill="currentColor" />
+      <circle cx="12" cy="12" r="6" clipPath="url(#cut-off-bottom)" fill="currentColor" />
     </svg>
   );
 }
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 1991284..fcdf253 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -27,6 +27,7 @@ export const data = {
   Connections: 'Connections',
   Active: 'Active',
   Closed: 'Closed',
+  switch_theme: 'Switch theme',
   theme: 'theme',
   about: 'about',
   no_logs: 'No logs yet, hang tight...',
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index bd035ef..e92f9ff 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -27,6 +27,7 @@ export const data = {
   Connections: '连接',
   Active: '活动',
   Closed: '已断开',
+  switch_theme: '切换主题',
   theme: '主题',
   about: '关于',
   no_logs: '暂无日志...',
diff --git a/src/store/app.ts b/src/store/app.ts
index 2ccd960..e5594a3 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -105,24 +105,12 @@ function setTheme(theme: ThemeType = 'dark') {
   }
 }
 
-export function switchTheme() {
+export function switchTheme(nextTheme = 'auto') {
   return (dispatch: DispatchFn, getState: GetStateFn) => {
     const currentTheme = getTheme(getState());
-    let nextTheme: ThemeType = 'auto';
-    switch (currentTheme) {
-      case 'light':
-        nextTheme = 'dark';
-        break;
-      case 'dark':
-        nextTheme = 'auto';
-        break;
-      case 'auto':
-        nextTheme = 'light';
-        break;
-    }
-
+    if (currentTheme === nextTheme) return;
     // side effect
-    setTheme(nextTheme);
+    setTheme(nextTheme as ThemeType);
     dispatch('storeSwitchTheme', (s) => {
       s.app.theme = nextTheme;
     });