general ui tweaks for settings

electh · Jan 29, 2025 · db03f19 · db03f19
1 parent a23b1da
commit db03f19
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 47 deletions.
diff --git 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,15 +58,23 @@ 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}
         />
       </ItemWrapper>
       <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,52 +86,80 @@ 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}
         />
       </ItemWrapper>
       <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}
         />
       </ItemWrapper>
       <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}
         />
       </ItemWrapper>
       <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
@@ -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
@@ -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,29 +72,45 @@ 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}
         />
         <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
@@ -1,13 +1,14 @@
 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,
   DropdownItem,
   DropdownMenu,
   DropdownTrigger,
 } from "@heroui/react";
+import SettingIcon from "@/components/ui/SettingIcon";
 
 const languages = [
   { id: "zh-CN", name: "简体中文" },
@@ -21,15 +22,17 @@ 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>
         </div>
         <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" />}