apply new ui

apps/app/public/static/locales/en_US/translation.json

@@ -255,13 +255,15 @@
       "settings": "Sidebar mode settings",
       "side_bar_mode_setting": "Set the sidebar mode",
       "description": "You can set whether or not the sidebar will always be open when the screen width is large. If the screen width is small, the sidebar will always be closed."
-    },
-    "color_mode": {
-      "settings": "Color mode settings",
-      "use_os_settings": "Use OS settings",
-      "description": "Select a color mode"
     }
   },
+  "color_mode_settings": {
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System",
+    "settings": "Color mode settings",
+    "description": "Select whether to display in light mode, dark mode, or a system-specific display.<br>Only supported themes can be switched."
+  },
   "editor_settings": {
     "editor_settings": "Editor Settings"
   },

apps/app/public/static/locales/ja_JP/translation.json

@@ -256,13 +256,15 @@
       "settings": "サイドバーモードの設定",
       "side_bar_mode_setting": "サイドバーのモードを設定する",
       "description": "画面幅が大きい場合に、サイドバーを常時開いた状態にするかどうかを設定できます。画面幅が小さい場合はサイドバーは常に閉じた状態となります。"
-    },
-    "color_mode": {
-      "settings": "カラーモードの設定",
-      "use_os_settings": "OS設定を利用する",
-      "description": "カラーモードを選択する"
     }
   },
+  "color_mode_settings": {
+    "light": "ライト",
+    "dark": "ダーク",
+    "system": "システム",
+    "settings": "カラーモードの設定",
+    "description": "ライトモードかダークモード、もしくはシステム合わせた表示をするか選択します。<br>対応したテーマのみ切り替えることができます。"
+  },
   "editor_settings": {
     "editor_settings": "エディター設定",
     "common_settings": {

apps/app/public/static/locales/zh_CN/translation.json

@@ -246,13 +246,15 @@
       "settings": "侧边栏模式设置",
       "side_bar_mode_setting": "设置侧边栏模式",
       "description": "您可以设置当屏幕宽度较大时，侧边栏是否始终打开。 如果屏幕宽度较小，侧边栏将始终关闭。"
-    },
-    "color_mode": {
-      "settings": "色彩模式设置",
-      "use_os_settings": "使用操作系统设置",
-      "description": "选择颜色模式"
     }
   },
+  "color_mode_settings": {
+    "light": "灯光",
+    "dark": "暗处",
+    "system": "系统",
+    "settings": "色彩模式设置",
+    "description": "选择是以浅色模式、深色模式还是系统特定的显示方式显示。<br>只能切换支持的主题。"
+  },
   "editor_settings": {
     "editor_settings": "编辑器设置"
   },

apps/app/src/components/Me/ColorModeSettings.tsx

@@ -4,71 +4,57 @@ import { useTranslation } from 'react-i18next';
 
 import { Themes, useNextThemes } from '~/stores/use-next-themes';
 
-import { IconWithTooltip } from './IconWIthTooltip';
-
 export const ColorModeSettings = (): JSX.Element => {
   const { t } = useTranslation();
 
-  const {
-    setTheme, resolvedTheme, useOsSettings, isDarkMode,
-  } = useNextThemes();
-
-  const userPreferenceSwitchModifiedHandler = useCallback((isDarkMode: boolean) => {
-    setTheme(isDarkMode ? Themes.DARK : Themes.LIGHT);
-  }, [setTheme]);
+  const { setTheme, theme } = useNextThemes();
 
-  const followOsCheckboxModifiedHandler = useCallback((isChecked: boolean) => {
-    if (isChecked) {
-      setTheme(Themes.SYSTEM);
-    }
-    else {
-      setTheme(resolvedTheme ?? Themes.LIGHT);
-    }
-  }, [resolvedTheme, setTheme]);
+  const isActive = useCallback((targetTheme: Themes) => {
+    return targetTheme === theme;
+  }, [theme]);
 
   return (
     <>
-      <h2 className="border-bottom mb-4">{t('ui_settings.color_mode.settings')}</h2>
-
-      <form className="row justify-content-center">
-
-        <div className="col-md-6">
-
-          <div className="d-flex align-items-center mb-3">
-            <IconWithTooltip id="iwt-light" label="Light">
-              <span className="material-symbols-outlined me-2">light_mode</span>
-            </IconWithTooltip>
-            <div className="form-check form-switch">
-              <input
-                id="swUserPreference"
-                className="form-check-input"
-                type="checkbox"
-                checked={isDarkMode}
-                disabled={useOsSettings}
-                onChange={e => userPreferenceSwitchModifiedHandler(e.target.checked)}
-              />
-            </div>
-            <IconWithTooltip id="iwt-dark" label="Dark">
-              <span className="material-symbols-outlined">dark_mode</span>
-            </IconWithTooltip>
-
-            <label className="form-label form-check-label ms-2 mt-2" htmlFor="swUserPreference">
-              {t('ui_settings.color_mode.description')}
-            </label>
-          </div>
+      <h2 className="border-bottom mb-4">{t('color_mode_settings.settings')}</h2>
+
+      <div className="offset-md-3">
+        <div className="d-flex">
+          <button
+            type="button"
+            onClick={() => { setTheme(Themes.LIGHT) }}
+            // eslint-disable-next-line max-len
+            className={`btn py-2 px-4 me-3 d-flex align-items-center justify-content-center ${isActive(Themes.LIGHT) ? 'btn-outline-primary' : 'btn-outline-secondary'}`}
+          >
+            <span className="material-symbols-outlined fs-5 me-1">light_mode</span>
+            <span>{t('color_mode_settings.light')}</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => { setTheme(Themes.DARK) }}
+            // eslint-disable-next-line max-len
+            className={`btn py-2 px-4 me-3 d-flex align-items-center justify-content-center ${isActive(Themes.DARK) ? 'btn-outline-primary' : 'btn-outline-secondary'}`}
+          >
+            <span className="material-symbols-outlined fs-5 me-1">dark_mode</span>
+            <span>{t('color_mode_settings.dark')}</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => { setTheme(Themes.SYSTEM) }}
+            // eslint-disable-next-line max-len
+            className={`btn py-2 px-4 d-flex align-items-center justify-content-center ${isActive(Themes.SYSTEM) ? 'btn-outline-primary' : 'btn-outline-secondary'}`}
+          >
+            <span className="material-symbols-outlined fs-5 me-1">devices</span>
+            <span>{t('color_mode_settings.system')}</span>
+          </button>
+        </div>
 
-          <div className="form-check">
-            <input
-              id="cbFollowOs"
-              className="form-check-input"
-              type="checkbox"
-              checked={useOsSettings}
-              onChange={e => followOsCheckboxModifiedHandler(e.target.checked)}
-            />
-            <label className="form-label form-check-label text-nowrap" htmlFor="cbFollowOs">{t('ui_settings.color_mode.use_os_settings')}</label>
-          </div>
+        <div className="mt-3 text-muted">
+          {/* eslint-disable-next-line react/no-danger */}
+          <span dangerouslySetInnerHTML={{ __html: t('color_mode_settings.description') }} />
         </div>
-      </form>
+      </div>
     </>
   );
 };