fix: apperance select (#585)

web/src/components/ApperanceDropdownMenu.tsx

@@ -1,53 +0,0 @@
-import { Option, Select } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-
-import Icon from "./Icon";
-import { APPERANCE_OPTIONS } from "../helpers/consts";
-import useApperance, { Apperance } from "../hooks/useApperance";
-
-const ApperanceDropdownMenu = () => {
-  const [apperance, setApperance] = useApperance();
-  const { t } = useTranslation();
-
-  const apperanceOptionItems = [
-    [
-      APPERANCE_OPTIONS[0],
-      <>
-        <Icon.Feather className="w-4 h-4" />
-        <p>{t("setting.apperance-option.follow-system")}</p>
-      </>,
-    ],
-    [
-      APPERANCE_OPTIONS[1],
-      <>
-        <Icon.Sun className="w-4 h-4" />
-        <p>{t("setting.apperance-option.always-light")}</p>
-      </>,
-    ],
-    [
-      APPERANCE_OPTIONS[2],
-      <>
-        <Icon.Moon className="w-4 h-4" />
-        <p>{t("setting.apperance-option.always-dark")}</p>
-      </>,
-    ],
-  ] as const;
-
-  return (
-    <Select
-      className="w-56 text-sm"
-      value={apperance}
-      onChange={(_, value) => {
-        setApperance(value as Apperance);
-      }}
-    >
-      {apperanceOptionItems.map((item) => (
-        <Option key={item[0]} value={item[0]}>
-          <span className="flex items-center gap-2">{item[1]}</span>
-        </Option>
-      ))}
-    </Select>
-  );
-};
-
-export default ApperanceDropdownMenu;

web/src/components/ApperanceSelect.tsx

@@ -0,0 +1,40 @@
+import { Option, Select } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import Icon from "./Icon";
+import { APPERANCE_OPTIONS } from "../helpers/consts";
+import useApperance, { Apperance } from "../hooks/useApperance";
+
+const ApperanceSelect = () => {
+  const [apperance, setApperance] = useApperance();
+  const { t } = useTranslation();
+
+  const getPrefixIcon = (apperance: Apperance) => {
+    const className = "w-4 h-auto";
+    if (apperance === "light") {
+      return <Icon.Sun className={className} />;
+    } else if (apperance === "dark") {
+      return <Icon.Moon className={className} />;
+    } else {
+      return <Icon.Smile className={className} />;
+    }
+  };
+
+  return (
+    <Select
+      className="!min-w-[12rem] w-auto text-sm"
+      value={apperance}
+      onChange={(_, value) => {
+        setApperance(value as Apperance);
+      }}
+      startDecorator={getPrefixIcon(apperance)}
+    >
+      {APPERANCE_OPTIONS.map((item) => (
+        <Option key={item} value={item} className="whitespace-nowrap">
+          {t(`setting.apperance-option.${item}`)}
+        </Option>
+      ))}
+    </Select>
+  );
+};
+
+export default ApperanceSelect;

web/src/locales/en.json

@@ -162,9 +162,9 @@
       "additional-script-placeholder": "Additional JavaScript codes"
     },
     "apperance-option": {
-      "follow-system": "Follow system",
-      "always-light": "Always light",
-      "always-dark": "Always dark"
+      "auto": "Follow system",
+      "light": "Always light",
+      "dark": "Always dark"
     }
   },
   "amount-text": {

web/src/locales/zh.json

@@ -162,9 +162,9 @@
       "additional-script-placeholder": "自定义 JavaScript 代码"
     },
     "apperance-option": {
-      "follow-system": "跟随系统",
-      "always-light": "总是浅色",
-      "always-dark": "总是深色"
+      "auto": "跟随系统",
+      "light": "总是浅色",
+      "dark": "总是深色"
     }
   },
   "amount-text": {

web/src/pages/Auth.tsx

@@ -9,7 +9,7 @@ import useLoading from "../hooks/useLoading";
 import { globalService, userService } from "../services";
 import Icon from "../components/Icon";
 import toastHelper from "../components/Toast";
-import ApperanceDropdownMenu from "../components/ApperanceDropdownMenu";
+import ApperanceSelect from "../components/ApperanceSelect";
 import "../less/auth.less";
 
 const validateConfig: ValidatorConfig = {
@@ -164,17 +164,17 @@ const Auth = () => {
         <div className="footer-container">
           <div className="w-full flex flex-row justify-center items-center gap-2">
             <Select
-              className="w-40 text-sm"
+              className="!min-w-[9rem] w-auto whitespace-nowrap"
               startDecorator={<Icon.Globe className="w-4 h-auto" />}
               value={i18n.language}
-              onChange={(e, value) => handleLocaleItemClick(value as Locale)}
+              onChange={(_, value) => handleLocaleItemClick(value as Locale)}
             >
               <Option value="en">English</Option>
               <Option value="zh">中文</Option>
               <Option value="vi">Tiếng Việt</Option>
               <Option value="fr">French</Option>
             </Select>
-            <ApperanceDropdownMenu />
+            <ApperanceSelect />
           </div>
         </div>
       </div>