general ui tweaks

electh · Feb 1, 2025 · 269f12e · 269f12e
1 parent ae975d2
commit 269f12e
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 75 deletions.
diff --git a/src/components/Settings/Appearance.jsx b/src/components/Settings/Appearance.jsx
@@ -12,11 +12,8 @@ import {
   CircleDashed,
   Clock,
   LayoutList,
-  ListOrdered,
-  MonitorPlay,
   Rss,
   Square,
-  SquareCode,
   Text,
 } from "lucide-react";
 import Theme from "./components/Theme";
@@ -31,10 +28,7 @@ export default function Appearance() {
     showFavicon,
     showTextPreview,
     showReadingTime,
-    showLineNumbers,
-    forceDarkCodeTheme,
     reduceMotion,
-    useNativeVideoPlayer,
   } = useStore(settingsState);
   const { t } = useTranslation();
   return (
@@ -117,41 +111,7 @@ export default function Appearance() {
           settingValue={showReadingTime}
         />
       </ItemWrapper>
-      <ItemWrapper title={t("settings.appearance.videoPlayer")}>
-        <SwitchItem
-          label={t("settings.appearance.useNativeVideoPlayer")}
-          icon={
-            <SettingIcon variant="red">
-              <MonitorPlay />
-            </SettingIcon>
-          }
-          settingName="useNativeVideoPlayer"
-          settingValue={useNativeVideoPlayer}
-        />
-      </ItemWrapper>
-      <ItemWrapper title={t("settings.appearance.codeBlock")}>
-        <SwitchItem
-          label={t("settings.appearance.showLineNumbers")}
-          icon={
-            <SettingIcon variant="default">
-              <ListOrdered />
-            </SettingIcon>
-          }
-          settingName="showLineNumbers"
-          settingValue={showLineNumbers}
-        />
-        <Divider />
-        <SwitchItem
-          label={t("settings.appearance.forceDarkCodeTheme")}
-          icon={
-            <SettingIcon variant="default">
-              <SquareCode />
-            </SettingIcon>
-          }
-          settingName="forceDarkCodeTheme"
-          settingValue={forceDarkCodeTheme}
-        />
-      </ItemWrapper>
+
       <ItemWrapper title={t("settings.appearance.motion")}>
         <SwitchItem
           label={t("settings.appearance.reduceMotion")}

diff --git a/src/components/Settings/Readability.jsx b/src/components/Settings/Readability.jsx
@@ -5,7 +5,10 @@ import {
   AlignLeft,
   AlignStartVertical,
   CaseSensitive,
+  ListOrdered,
+  MonitorPlay,
   PanelTopDashed,
+  SquareCode,
   Type,
   UnfoldHorizontal,
   UnfoldVertical,
@@ -33,6 +36,9 @@ export default function Readability() {
     titleFontSize,
     titleAlignType,
     autoHideToolbar,
+    showLineNumbers,
+    forceDarkCodeTheme,
+    useNativeVideoPlayer,
   } = useStore(settingsState);
   const { t } = useTranslation();
   const fontOptions = [
@@ -69,6 +75,36 @@ export default function Readability() {
   ];
   return (
     <>
+      <ItemWrapper title={t("settings.readability.articleTitle")}>
+        <GroupItem
+          label={t("settings.readability.titleAlign")}
+          icon={
+            <SettingIcon variant="green">
+              <AlignStartVertical />
+            </SettingIcon>
+          }
+          settingName="titleAlignType"
+          settingValue={titleAlignType}
+          options={[
+            { value: "left", icon: <AlignLeft className="size-4" /> },
+            { value: "center", icon: <AlignCenter className="size-4" /> },
+          ]}
+        />
+        <Divider />
+        <SliderItem
+          label={t("settings.readability.titleFontSize")}
+          icon={
+            <SettingIcon variant="purple">
+              <CaseSensitive />
+            </SettingIcon>
+          }
+          settingName="titleFontSize"
+          settingValue={titleFontSize}
+          max={3.0}
+          min={1.0}
+          step={0.2}
+        />
+      </ItemWrapper>
       <ItemWrapper title={t("settings.readability.text")}>
         <SwitchItem
           label={t("settings.readability.autoHideToolbar")}
@@ -146,34 +182,39 @@ export default function Readability() {
           step={5}
         />
       </ItemWrapper>
-      <ItemWrapper title={t("settings.readability.articleTitle")}>
-        <GroupItem
-          label={t("settings.readability.titleAlign")}
+      <ItemWrapper title={t("settings.appearance.videoPlayer")}>
+        <SwitchItem
+          label={t("settings.appearance.useNativeVideoPlayer")}
           icon={
-            <SettingIcon variant="green">
-              <AlignStartVertical />
+            <SettingIcon variant="red">
+              <MonitorPlay />
             </SettingIcon>
           }
-          settingName="titleAlignType"
-          settingValue={titleAlignType}
-          options={[
-            { value: "left", icon: <AlignLeft className="size-4" /> },
-            { value: "center", icon: <AlignCenter className="size-4" /> },
-          ]}
+          settingName="useNativeVideoPlayer"
+          settingValue={useNativeVideoPlayer}
+        />
+      </ItemWrapper>
+      <ItemWrapper title={t("settings.appearance.codeBlock")}>
+        <SwitchItem
+          label={t("settings.appearance.showLineNumbers")}
+          icon={
+            <SettingIcon variant="default">
+              <ListOrdered />
+            </SettingIcon>
+          }
+          settingName="showLineNumbers"
+          settingValue={showLineNumbers}
         />
         <Divider />
-        <SliderItem
-          label={t("settings.readability.titleFontSize")}
+        <SwitchItem
+          label={t("settings.appearance.forceDarkCodeTheme")}
           icon={
-            <SettingIcon variant="purple">
-              <CaseSensitive />
+            <SettingIcon variant="default">
+              <SquareCode />
             </SettingIcon>
           }
-          settingName="titleFontSize"
-          settingValue={titleFontSize}
-          max={3.0}
-          min={1.0}
-          step={0.2}
+          settingName="forceDarkCodeTheme"
+          settingValue={forceDarkCodeTheme}
         />
       </ItemWrapper>
       <Button color="danger" variant="flat" onPress={resetSettings}>

diff --git a/src/components/Settings/components/Language.jsx b/src/components/Settings/components/Language.jsx
@@ -32,8 +32,8 @@ export default function Language() {
         <Dropdown>
           <DropdownTrigger>
             <Button
-              className="capitalize gap-1 pr-1.5 shadow-custom rounded-md h-7"
-              variant="flat"
+              className="capitalize gap-1 pr-1.5 rounded-md h-7 bg-content1 dark:bg-default !shadow-custom-cursor"
+              variant="solid"
               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
@@ -45,7 +45,9 @@ export default function Theme() {
 
   return (
     <ItemWrapper title={t("settings.appearance.theme")}>
-      <div className={`flex justify-between items-center gap-2 ${bgColor} px-2 py-2.5`}>
+      <div
+        className={`flex justify-between items-center gap-2 ${bgColor} px-2 py-2.5`}
+      >
         <div className="flex items-center gap-2">
           <SettingIcon variant="blue">
             <Paintbrush />
@@ -57,8 +59,8 @@ export default function Theme() {
         <Dropdown>
           <DropdownTrigger>
             <Button
-              className="capitalize gap-1 pr-1.5 shadow-custom rounded-md h-7"
-              variant="flat"
+              className="capitalize gap-1 pr-1.5 rounded-md h-7 bg-content1 dark:bg-default !shadow-custom-cursor"
+              variant="solid"
               size="sm"
               endContent={<ChevronsUpDown className="size-4 shrink-0" />}
             >
@@ -82,7 +84,9 @@ export default function Theme() {
         </Dropdown>
       </div>
       <Divider />
-      <div className={`flex justify-between items-center gap-2 ${bgColor} px-2 py-2.5`}>
+      <div
+        className={`flex justify-between items-center gap-2 ${bgColor} px-2 py-2.5`}
+      >
         <div className="flex items-center gap-2">
           <SettingIcon variant="amber">
             <Sun />
@@ -94,8 +98,8 @@ export default function Theme() {
         <Dropdown>
           <DropdownTrigger>
             <Button
-              className="capitalize gap-1 pr-1.5 shadow-custom rounded-md h-7"
-              variant="flat"
+              className="capitalize gap-1 pr-1.5 rounded-md h-7 bg-content1 dark:bg-default !shadow-custom-cursor"
+              variant="solid"
               size="sm"
               endContent={<ChevronsUpDown className="size-4 shrink-0" />}
             >
@@ -135,7 +139,9 @@ export default function Theme() {
         </Dropdown>
       </div>
       <Divider />
-      <div className={`flex justify-between items-center gap-2 ${bgColor} px-2 py-2.5`}>
+      <div
+        className={`flex justify-between items-center gap-2 ${bgColor} px-2 py-2.5`}
+      >
         <div className="flex items-center gap-2">
           <SettingIcon variant="purple">
             <MoonStar />
@@ -147,8 +153,8 @@ export default function Theme() {
         <Dropdown>
           <DropdownTrigger>
             <Button
-              className="capitalize gap-1 pr-1.5 shadow-custom rounded-md h-7"
-              variant="flat"
+              className="capitalize gap-1 pr-1.5 rounded-md h-7 bg-content1 dark:bg-default !shadow-custom-cursor"
+              variant="solid"
               size="sm"
               endContent={<ChevronsUpDown className="size-4 shrink-0" />}
             >

diff --git a/src/components/ui/settingItem.jsx b/src/components/ui/settingItem.jsx
@@ -114,8 +114,8 @@ export function SelItem({ label, icon, settingName, settingValue, options }) {
       <Dropdown>
         <DropdownTrigger>
           <Button
-            className="capitalize gap-1 pr-1.5 shadow-custom h-7 rounded-md"
-            variant="flat"
+            className="capitalize gap-1 pr-1.5 h-7 rounded-md bg-content1 dark:bg-default !shadow-custom-cursor"
+            variant="solid"
             size="sm"
             endContent={<ChevronsUpDown className="size-4 shrink-0" />}
           >
@@ -146,7 +146,9 @@ export function SelItem({ label, icon, settingName, settingValue, options }) {
 
 export function GroupItem({ label, icon, settingName, settingValue, options }) {
   return (
-    <div className={`flex justify-between items-center gap-2 ${bgColor} px-2 h-12`}>
+    <div
+      className={`flex justify-between items-center gap-2 ${bgColor} px-2 h-12`}
+    >
       <div className="flex items-center gap-2">
         {icon}
         <div className="text-sm text-foreground">{label}</div>

diff --git a/src/index.css b/src/index.css
@@ -16,6 +16,8 @@
     --shadow-custom: 0 0 5px 0 rgba(0, 0, 0, 0.05),
     0 2px 10px 0 rgba(0, 0, 0, 0.2), inset 0 0 1px 0 hsla(0, 0%, 100%, 0.15),
     0 0 1px 0 rgba(255, 255, 255, 0.6);
+    --shadow-custom-sm: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+    --shadow-custom-button: 0 1px 2px 0 rgba(0, 0, 0, 0.15), inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.1);
     --shadow-custom-inner: inset 0 0 2px 0 rgba(255, 255, 255, 0.15), inset 0 0 4px 0 rgba(0, 0, 0, 0.05), inset 0 0 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-custom-cursor: 0 3px 6px 0 rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 -5px 1px -1px rgba(255, 255, 255, 0.01), inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
   }

diff --git a/src/stores/settingsStore.js b/src/stores/settingsStore.js
@@ -59,6 +59,9 @@ export const resetSettings = () => {
     "titleFontSize",
     "titleAlignType",
     "autoHideToolbar",
+    "showLineNumbers",
+    "forceDarkCodeTheme",
+    "useNativeVideoPlayer",
   ];
   const currentSettings = settingsState.get();
   const newSettings = { ...currentSettings };