general ui tweaks

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

Hide file tree

Showing 13 changed files with 35 additions and 30 deletions.
diff --git a/src/components/ArticleList/components/EditFeedModal.jsx b/src/components/ArticleList/components/EditFeedModal.jsx
@@ -292,7 +292,7 @@ export default function EditFeedModal() {
               type="submit"
               isLoading={loading}
               size="sm"
-              className="border-primary border shadow-custom-button bg-primary bg-gradient-to-b from-white/15 to-transparent"
+              className="border-primary border shadow-custom-button bg-primary bg-gradient-to-b from-white/15 to-transparent text-sm"
             >
               {t("common.save")}
             </Button>
@@ -301,7 +301,7 @@ export default function EditFeedModal() {
               onPress={onClose}
               size="sm"
               variant="flat"
-              className="border"
+              className="border text-sm"
             >
               {t("common.cancel")}
             </Button>

diff --git a/src/components/ArticleList/components/RenameModal.jsx b/src/components/ArticleList/components/RenameModal.jsx
@@ -71,7 +71,7 @@ export default function RenameModal() {
             type="submit"
             isLoading={loading}
             size="sm"
-            className="border-primary border shadow-custom-button bg-primary bg-gradient-to-b from-white/15 to-transparent"
+            className="border-primary border shadow-custom-button bg-primary bg-gradient-to-b from-white/15 to-transparent text-sm"
           >
             {t("common.save")}
           </Button>
@@ -80,7 +80,7 @@ export default function RenameModal() {
             onPress={onClose}
             size="sm"
             variant="flat"
-            className="border"
+            className="border text-sm"
           >
             {t("common.cancel")}
           </Button>

diff --git a/src/components/FeedList/components/AddCategoryModal.jsx b/src/components/FeedList/components/AddCategoryModal.jsx
@@ -72,7 +72,7 @@ export default function AddCategoryModal() {
             isLoading={loading}
             size="sm"
             fullWidth
-            className="border-primary border shadow-custom-button bg-primary bg-gradient-to-b from-white/15 to-transparent"
+            className="border-primary border shadow-custom-button bg-primary bg-gradient-to-b from-white/15 to-transparent text-sm"
           >
             {t("common.save")}
           </Button>
@@ -81,7 +81,7 @@ export default function AddCategoryModal() {
             onPress={onClose}
             size="sm"
             variant="flat"
-            className="border"
+            className="border text-sm"
           >
             {t("common.cancel")}
           </Button>

diff --git a/src/components/FeedList/components/AddFeedModal.jsx b/src/components/FeedList/components/AddFeedModal.jsx
@@ -240,7 +240,7 @@ export default function AddFeedModal() {
               type="submit"
               isLoading={loading}
               size="sm"
-              className="border-primary border shadow-custom-button bg-primary bg-gradient-to-b from-white/15 to-transparent"
+              className="border-primary border shadow-custom-button bg-primary bg-gradient-to-b from-white/15 to-transparent text-sm"
             >
               {t("common.save")}
             </Button>
@@ -249,7 +249,7 @@ export default function AddFeedModal() {
               onPress={onClose}
               size="sm"
               variant="flat"
-              className="border"
+              className="border text-sm"
             >
               {t("common.cancel")}
             </Button>

diff --git a/src/components/Settings/Settings.jsx b/src/components/Settings/Settings.jsx
@@ -72,9 +72,9 @@ export default function App() {
                     fullWidth
                     classNames={{
                       tabList:
-                        "bg-default-100/90 backdrop-blur-md shadow-custom-inner p-0 gap-0 rounded-small overflow-visible",
-                      tab: "py-1 h-8",
-                      cursor: "bg-content1 shadow-sm border",
+                        "bg-default-100/90 backdrop-blur-md shadow-custom-inner p-[1px] gap-0 rounded-small overflow-visible",
+                      tab: "py-1 h-7",
+                      cursor: "bg-content1 !shadow-custom-cursor rounded-small",
                     }}
                     selectedKey={activeTab}
                     onSelectionChange={(key) => {

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

diff --git a/src/components/ui/AlertDialog.jsx b/src/components/ui/AlertDialog.jsx
@@ -69,7 +69,7 @@ export default function AlertDialog({
             variant="flat"
             onPress={onClose}
             size="sm"
-            className="border"
+            className="border text-sm"
           >
             {cancelText}
           </Button>
@@ -78,7 +78,7 @@ export default function AlertDialog({
             onPress={handleConfirm}
             isLoading={loading}
             size="sm"
-            className="border-danger border shadow-custom-button bg-danger bg-gradient-to-b from-white/15 to-transparent"
+            className="border-danger border shadow-custom-button bg-danger bg-gradient-to-b from-white/15 to-transparent text-sm"
           >
             {confirmText}
           </Button>

diff --git a/src/components/ui/settingItem.jsx b/src/components/ui/settingItem.jsx
@@ -104,15 +104,17 @@ export const SwitchItem = ({
 
 export function SelItem({ label, icon, settingName, settingValue, options }) {
   return (
-    <div className={`flex justify-between items-center gap-2 ${bgColor} p-2`}>
+    <div
+      className={`flex justify-between items-center gap-2 ${bgColor} px-2 py-2.5`}
+    >
       <div className="flex items-center gap-2">
         {icon}
         <div className="text-sm text-foreground line-clamp-1">{label}</div>
       </div>
       <Dropdown>
         <DropdownTrigger>
           <Button
-            className="capitalize gap-1 pr-1.5 shadow-custom"
+            className="capitalize gap-1 pr-1.5 shadow-custom h-7 rounded-md"
             variant="flat"
             size="sm"
             endContent={<ChevronsUpDown className="size-4 shrink-0" />}
@@ -144,7 +146,7 @@ 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} p-2`}>
+    <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>
@@ -155,9 +157,9 @@ export function GroupItem({ label, icon, settingName, settingValue, options }) {
         variant="solid"
         classNames={{
           tabList:
-            "bg-default-100/90 backdrop-blur-md shadow-custom-inner p-0 gap-0 rounded-small overflow-visible",
-          tab: "py-1 h-8",
-          cursor: "bg-content1 shadow-sm border",
+            "bg-default-100/90 backdrop-blur-md shadow-custom-inner p-[1px] gap-0 rounded-small overflow-visible",
+          tab: "py-1 h-7",
+          cursor: "bg-content1 !shadow-custom-cursor rounded-small",
         }}
         selectedKey={settingValue}
         onSelectionChange={(value) => {

diff --git a/src/index.css b/src/index.css
@@ -9,12 +9,15 @@
     --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(0, 0, 0, 0.05), 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 #E1E6EC, inset 0 -5px 1px -1px rgba(0, 0, 0, 0.03);
   }
 
   .dark {
     --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-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/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx
@@ -23,10 +23,9 @@ export default function ErrorPage() {
           as="a"
           href="/"
           color="primary"
-          variant="shadow"
           size="sm"
           startContent={<House className="size-4" />}
-          className={"shadow-lg"}
+          className={"shadow-custom-button text-sm bg-primary bg-gradient-to-b from-white/15 to-transparent border-primary border"}
         >
           {t("error.backToHome")}
         </Button>

diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
@@ -101,7 +101,7 @@ export default function LoginPage() {
             </Link>
           </div>
           <Button
-            className="w-full"
+            className="w-full bg-primary bg-gradient-to-b from-white/15 to-transparent border-primary border shadow-custom-button"
             color="primary"
             type="submit"
             isLoading={loading}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -22,6 +22,7 @@ export default {
         "custom-sm": "var(--shadow-custom-sm)",
         "custom-button": "var(--shadow-custom-button)",
         "custom-inner": "var(--shadow-custom-inner)",
+        "custom-cursor": "var(--shadow-custom-cursor)",
       },
       keyframes: {
         "collapsible-down": {