From db03f198818bcebdcdcf49290502aef8a257f73a Mon Sep 17 00:00:00 2001
From: lisicheng <noteperson@gmail.com>
Date: Wed, 29 Jan 2025 19:19:14 +0800
Subject: [PATCH] general ui tweaks for settings

---
 src/components/Settings/Appearance.jsx        | 63 ++++++++++++++-----
 src/components/Settings/General.jsx           | 39 +++++++++---
 src/components/Settings/Readability.jsx       | 45 ++++++++++---
 .../Settings/components/Language.jsx          |  9 ++-
 src/components/Settings/components/Theme.jsx  | 19 ++++--
 src/components/ui/SettingIcon.jsx             | 29 +++++++++
 src/components/ui/settingItem.jsx             | 10 ++-
 src/i18n/locales/zh-CN.js                     |  6 +-
 8 files changed, 173 insertions(+), 47 deletions(-)
 create mode 100644 src/components/ui/SettingIcon.jsx

diff --git a/src/components/Settings/Appearance.jsx b/src/components/Settings/Appearance.jsx
index 77c7088..982afe8 100644
--- a/src/components/Settings/Appearance.jsx
+++ b/src/components/Settings/Appearance.jsx
@@ -21,6 +21,7 @@ import {
 } from "lucide-react";
 import Theme from "./components/Theme";
 import { useTranslation } from "react-i18next";
+import SettingIcon from "@/components/ui/SettingIcon";
 
 export default function Appearance() {
   const {
@@ -43,11 +44,9 @@ export default function Appearance() {
         <SelItem
           label={t("settings.appearance.shape")}
           icon={
-            feedIconShape === "circle" ? (
-              <Circle className="shrink-0 size-4 text-default-500" />
-            ) : (
-              <Square className="shrink-0 size-4 text-default-500" />
-            )
+            <SettingIcon variant="blue">
+              {feedIconShape === "circle" ? <Circle /> : <Square />}
+            </SettingIcon>
           }
           settingName="feedIconShape"
           settingValue={feedIconShape}
@@ -59,7 +58,11 @@ export default function Appearance() {
         <Divider />
         <SwitchItem
           label={t("settings.appearance.grayscale")}
-          icon={<CircleDashed className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="default">
+              <CircleDashed />
+            </SettingIcon>
+          }
           settingName="useGrayIcon"
           settingValue={useGrayIcon}
         />
@@ -67,7 +70,11 @@ export default function Appearance() {
       <ItemWrapper title={t("settings.appearance.articleList")}>
         <SelItem
           label={t("settings.appearance.imagePreviews")}
-          icon={<LayoutList className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="green">
+              <LayoutList />
+            </SettingIcon>
+          }
           settingName="cardImageSize"
           settingValue={cardImageSize}
           options={[
@@ -79,21 +86,33 @@ export default function Appearance() {
         <Divider />
         <SwitchItem
           label={t("settings.appearance.showFavicon")}
-          icon={<Rss className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="green">
+              <Rss />
+            </SettingIcon>
+          }
           settingName="showFavicon"
           settingValue={showFavicon}
         />
         <Divider />
         <SwitchItem
           label={t("settings.appearance.showTextPreview")}
-          icon={<Text className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="green">
+              <Text />
+            </SettingIcon>
+          }
           settingName="showTextPreview"
           settingValue={showTextPreview}
         />
         <Divider />
         <SwitchItem
           label={t("settings.appearance.showReadingTime")}
-          icon={<Clock className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="green">
+              <Clock />
+            </SettingIcon>
+          }
           settingName="showReadingTime"
           settingValue={showReadingTime}
         />
@@ -101,7 +120,11 @@ export default function Appearance() {
       <ItemWrapper title={t("settings.appearance.videoPlayer")}>
         <SwitchItem
           label={t("settings.appearance.useNativeVideoPlayer")}
-          icon={<MonitorPlay className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="red">
+              <MonitorPlay />
+            </SettingIcon>
+          }
           settingName="useNativeVideoPlayer"
           settingValue={useNativeVideoPlayer}
         />
@@ -109,14 +132,22 @@ export default function Appearance() {
       <ItemWrapper title={t("settings.appearance.codeBlock")}>
         <SwitchItem
           label={t("settings.appearance.showLineNumbers")}
-          icon={<ListOrdered className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="default">
+              <ListOrdered />
+            </SettingIcon>
+          }
           settingName="showLineNumbers"
           settingValue={showLineNumbers}
         />
         <Divider />
         <SwitchItem
           label={t("settings.appearance.forceDarkCodeTheme")}
-          icon={<SquareCode className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="default">
+              <SquareCode />
+            </SettingIcon>
+          }
           settingName="forceDarkCodeTheme"
           settingValue={forceDarkCodeTheme}
         />
@@ -124,7 +155,11 @@ export default function Appearance() {
       <ItemWrapper title={t("settings.appearance.motion")}>
         <SwitchItem
           label={t("settings.appearance.reduceMotion")}
-          icon={<CandyOff className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="cyan">
+              <CandyOff />
+            </SettingIcon>
+          }
           settingName="reduceMotion"
           settingValue={reduceMotion}
         />
diff --git a/src/components/Settings/General.jsx b/src/components/Settings/General.jsx
index 90a969f..7566e8b 100644
--- a/src/components/Settings/General.jsx
+++ b/src/components/Settings/General.jsx
@@ -17,6 +17,7 @@ import {
 import { Divider } from "@heroui/react";
 import Language from "@/components/Settings/components/Language.jsx";
 import { useTranslation } from "react-i18next";
+import SettingIcon from "@/components/ui/SettingIcon";
 
 export default function General() {
   const {
@@ -34,7 +35,11 @@ export default function General() {
       <ItemWrapper title={t("settings.general.sync")}>
         <SelItem
           label={t("settings.general.syncInterval")}
-          icon={<RefreshCw className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="default">
+              <RefreshCw />
+            </SettingIcon>
+          }
           settingName="syncInterval"
           settingValue={syncInterval}
           options={[
@@ -49,14 +54,22 @@ export default function General() {
       <ItemWrapper title={t("settings.general.feeds")}>
         <SwitchItem
           label={t("settings.general.showHiddenFeeds")}
-          icon={<Eye className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="purple">
+              <Eye />
+            </SettingIcon>
+          }
           settingName="showHiddenFeeds"
           settingValue={showHiddenFeeds}
         />
         <Divider />
         <SwitchItem
           label={t("settings.general.defaultExpandCategory")}
-          icon={<FolderOpen className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="blue">
+              <FolderOpen />
+            </SettingIcon>
+          }
           settingName="defaultExpandCategory"
           settingValue={defaultExpandCategory}
         />
@@ -65,11 +78,9 @@ export default function General() {
         <SelItem
           label={t("settings.general.sortItems")}
           icon={
-            sortDirection === "desc" ? (
-              <ClockArrowDown className="shrink-0 size-4 text-default-500" />
-            ) : (
-              <ClockArrowUp className="shrink-0 size-4 text-default-500" />
-            )
+            <SettingIcon variant="blue">
+              {sortDirection === "desc" ? <ClockArrowDown /> : <ClockArrowUp />}
+            </SettingIcon>
           }
           settingName="sortDirection"
           settingValue={sortDirection}
@@ -81,14 +92,22 @@ export default function General() {
         <Divider />
         <SwitchItem
           label={t("settings.general.showUnreadByDefault")}
-          icon={<CircleDot className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="amber">
+              <CircleDot className="p-1 fill-current" />
+            </SettingIcon>
+          }
           settingName="showUnreadByDefault"
           settingValue={showUnreadByDefault}
         />
         <Divider />
         <SwitchItem
           label={t("settings.general.markAsReadOnScroll")}
-          icon={<CircleCheck className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="red">
+              <CircleCheck />
+            </SettingIcon>
+          }
           settingName="markAsReadOnScroll"
           settingValue={markAsReadOnScroll}
         />
diff --git a/src/components/Settings/Readability.jsx b/src/components/Settings/Readability.jsx
index 34b0de8..5575924 100644
--- a/src/components/Settings/Readability.jsx
+++ b/src/components/Settings/Readability.jsx
@@ -21,6 +21,7 @@ import {
 import { Button, Divider } from "@heroui/react";
 import { resetSettings } from "@/stores/settingsStore.js";
 import { useTranslation } from "react-i18next";
+import SettingIcon from "@/components/ui/SettingIcon";
 
 export default function Readability() {
   const {
@@ -71,14 +72,22 @@ export default function Readability() {
       <ItemWrapper title={t("settings.readability.text")}>
         <SwitchItem
           label={t("settings.readability.autoHideToolbar")}
-          icon={<PanelTopDashed className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="amber">
+              <PanelTopDashed />
+            </SettingIcon>
+          }
           settingName="autoHideToolbar"
           settingValue={autoHideToolbar}
         />
         <Divider />
         <SelItem
           label={t("settings.readability.font")}
-          icon={<Type className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="blue">
+              <Type />
+            </SettingIcon>
+          }
           settingName="fontFamily"
           settingValue={fontFamily}
           options={fontOptions}
@@ -86,14 +95,22 @@ export default function Readability() {
         <Divider />
         <SwitchItem
           label={t("settings.readability.textAlignJustify")}
-          icon={<AlignJustify className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="green">
+              <AlignJustify />
+            </SettingIcon>
+          }
           settingName="alignJustify"
           settingValue={alignJustify}
         />
         <Divider />
         <SliderItem
           label={t("settings.readability.lineHeight")}
-          icon={<UnfoldVertical className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="purple">
+              <UnfoldVertical />
+            </SettingIcon>
+          }
           settingName="lineHeight"
           settingValue={lineHeight}
           max={2.5}
@@ -103,7 +120,11 @@ export default function Readability() {
         <Divider />
         <SliderItem
           label={t("settings.readability.fontSize")}
-          icon={<CaseSensitive className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="purple">
+              <CaseSensitive />
+            </SettingIcon>
+          }
           settingName="fontSize"
           settingValue={fontSize}
           max={24}
@@ -114,7 +135,9 @@ export default function Readability() {
         <SliderItem
           label={t("settings.readability.maxWidth")}
           icon={
-            <UnfoldHorizontal className="shrink-0 size-4 text-default-500" />
+            <SettingIcon variant="purple">
+              <UnfoldHorizontal />
+            </SettingIcon>
           }
           settingName="maxWidth"
           settingValue={maxWidth}
@@ -127,7 +150,9 @@ export default function Readability() {
         <GroupItem
           label={t("settings.readability.titleAlign")}
           icon={
-            <AlignStartVertical className="shrink-0 size-4 text-default-500" />
+            <SettingIcon variant="green">
+              <AlignStartVertical />
+            </SettingIcon>
           }
           settingName="titleAlignType"
           settingValue={titleAlignType}
@@ -139,7 +164,11 @@ export default function Readability() {
         <Divider />
         <SliderItem
           label={t("settings.readability.titleFontSize")}
-          icon={<CaseSensitive className="shrink-0 size-4 text-default-500" />}
+          icon={
+            <SettingIcon variant="purple">
+              <CaseSensitive />
+            </SettingIcon>
+          }
           settingName="titleFontSize"
           settingValue={titleFontSize}
           max={3.0}
diff --git a/src/components/Settings/components/Language.jsx b/src/components/Settings/components/Language.jsx
index 1f9b425..ba01849 100644
--- a/src/components/Settings/components/Language.jsx
+++ b/src/components/Settings/components/Language.jsx
@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { ItemWrapper } from "@/components/ui/settingItem.jsx";
-import { ChevronsUpDown, Earth } from "lucide-react";
+import { ChevronsUpDown, Globe } from "lucide-react";
 import {
   Button,
   Dropdown,
@@ -8,6 +8,7 @@ import {
   DropdownMenu,
   DropdownTrigger,
 } from "@heroui/react";
+import SettingIcon from "@/components/ui/SettingIcon";
 
 const languages = [
   { id: "zh-CN", name: "简体中文" },
@@ -21,7 +22,9 @@ export default function Language() {
     <ItemWrapper title={t("settings.general.language")}>
       <div className="flex justify-between items-center gap-2 bg-content1 dark:bg-content2/30 p-2">
         <div className="flex items-center gap-2">
-          <Earth className="shrink-0 size-4 text-default-500" />
+          <SettingIcon variant="blue">
+            <Globe />
+          </SettingIcon>
           <div className="text-sm text-foreground line-clamp-1">
             {t("settings.general.interfaceLanguage")}
           </div>
@@ -29,7 +32,7 @@ export default function Language() {
         <Dropdown>
           <DropdownTrigger>
             <Button
-              className="capitalize"
+              className="capitalize gap-1 pr-1.5 shadow-custom"
               variant="flat"
               size="sm"
               endContent={<ChevronsUpDown className="size-4 shrink-0" />}
diff --git a/src/components/Settings/components/Theme.jsx b/src/components/Settings/components/Theme.jsx
index bd45daf..f665bdc 100644
--- a/src/components/Settings/components/Theme.jsx
+++ b/src/components/Settings/components/Theme.jsx
@@ -17,6 +17,7 @@ import {
 } from "@heroui/react";
 import { setTheme, themes, themeState } from "@/stores/themeStore";
 import { useTranslation } from "react-i18next";
+import SettingIcon from "@/components/ui/SettingIcon";
 
 export default function Theme() {
   const { t } = useTranslation();
@@ -46,7 +47,9 @@ export default function Theme() {
     <ItemWrapper title={t("settings.appearance.theme")}>
       <div className={`flex justify-between items-center gap-2 ${bgColor} p-2`}>
         <div className="flex items-center gap-2">
-          <Paintbrush className="shrink-0 size-4 text-default-500" />
+          <SettingIcon variant="blue">
+            <Paintbrush />
+          </SettingIcon>
           <div className="text-sm text-foreground line-clamp-1">
             {t("settings.appearance.mode")}
           </div>
@@ -54,7 +57,7 @@ export default function Theme() {
         <Dropdown>
           <DropdownTrigger>
             <Button
-              className="capitalize"
+              className="capitalize gap-1 pr-1.5 shadow-custom"
               variant="flat"
               size="sm"
               endContent={<ChevronsUpDown className="size-4 shrink-0" />}
@@ -81,7 +84,9 @@ export default function Theme() {
       <Divider />
       <div className={`flex justify-between items-center gap-2 ${bgColor} p-2`}>
         <div className="flex items-center gap-2">
-          <Sun className="shrink-0 size-4 text-default-500" />
+          <SettingIcon variant="amber">
+            <Sun />
+          </SettingIcon>
           <div className="text-sm text-foreground line-clamp-1">
             {t("settings.appearance.lightTheme")}
           </div>
@@ -89,7 +94,7 @@ export default function Theme() {
         <Dropdown>
           <DropdownTrigger>
             <Button
-              className="capitalize"
+              className="capitalize gap-1 pr-1.5 shadow-custom"
               variant="flat"
               size="sm"
               endContent={<ChevronsUpDown className="size-4 shrink-0" />}
@@ -132,7 +137,9 @@ export default function Theme() {
       <Divider />
       <div className={`flex justify-between items-center gap-2 ${bgColor} p-2`}>
         <div className="flex items-center gap-2">
-          <MoonStar className="shrink-0 size-4 text-default-500" />
+          <SettingIcon variant="purple">
+            <MoonStar />
+          </SettingIcon>
           <div className="text-sm text-foreground line-clamp-1">
             {t("settings.appearance.darkTheme")}
           </div>
@@ -140,7 +147,7 @@ export default function Theme() {
         <Dropdown>
           <DropdownTrigger>
             <Button
-              className="capitalize"
+              className="capitalize gap-1 pr-1.5 shadow-custom"
               variant="flat"
               size="sm"
               endContent={<ChevronsUpDown className="size-4 shrink-0" />}
diff --git a/src/components/ui/SettingIcon.jsx b/src/components/ui/SettingIcon.jsx
new file mode 100644
index 0000000..65c401e
--- /dev/null
+++ b/src/components/ui/SettingIcon.jsx
@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+export default function SettingIcon({ variant = "default", children }) {
+  const colorVariants = {
+    default:
+      "from-default-300 to-default-400 dark:from-default-400 dark:to-default-300",
+    blue: "from-blue-400 to-blue-500",
+    purple: "from-purple-400 to-purple-500",
+    green: "from-green-400 to-green-500",
+    red: "from-red-400 to-red-500",
+    pink: "from-pink-400 to-pink-500",
+    amber: "from-amber-300 to-amber-500",
+    orange: "from-orange-400 to-orange-500",
+    cyan: "from-cyan-400 to-cyan-500",
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center shrink-0 size-6 rounded-md shadow-sm bg-gradient-to-b",
+        colorVariants[variant],
+      )}
+    >
+      <div className="flex items-center justify-center shrink-0 size-4 text-primary-foreground">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/settingItem.jsx b/src/components/ui/settingItem.jsx
index 3563455..c142444 100644
--- a/src/components/ui/settingItem.jsx
+++ b/src/components/ui/settingItem.jsx
@@ -20,8 +20,12 @@ const bgColor = "bg-content1 dark:bg-content2/30";
 export const ItemWrapper = ({ title, children }) => {
   return (
     <div className="settings-group">
-      <div className="text-xs text-content2-foreground ml-2 mb-1">{title}</div>
-      <div className="rounded-lg overflow-hidden border">{children}</div>
+      <div className="text-xs text-default-400 font-medium ml-2 mb-1">
+        {title}
+      </div>
+      <div className="rounded-xl overflow-hidden border shadow-sm">
+        {children}
+      </div>
     </div>
   );
 };
@@ -98,7 +102,7 @@ export function SelItem({ label, icon, settingName, settingValue, options }) {
       <Dropdown>
         <DropdownTrigger>
           <Button
-            className="capitalize"
+            className="capitalize gap-1 pr-1.5 shadow-custom"
             variant="flat"
             size="sm"
             endContent={<ChevronsUpDown className="size-4 shrink-0" />}
diff --git a/src/i18n/locales/zh-CN.js b/src/i18n/locales/zh-CN.js
index 17a6ef7..385223f 100644
--- a/src/i18n/locales/zh-CN.js
+++ b/src/i18n/locales/zh-CN.js
@@ -221,9 +221,9 @@ export default {
       grayscale: "灰度图标",
       articleList: "文章列表",
       imagePreviews: "图片预览",
-      none: "无",
-      small: "小",
-      large: "大",
+      none: "隐藏",
+      small: "小图",
+      large: "大图",
       showFavicon: "显示订阅图标",
       showTextPreview: "文本预览",
       showReadingTime: "估计阅读时间",