Update Settings UI. (#803)

ShokoAnime · Jan 24, 2024 · bf0603b · bf0603b
1 parent bb28054
commit bf0603b
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 7 deletions.
diff --git a/src/css/theme-shoko-gray.css b/src/css/theme-shoko-gray.css
@@ -31,6 +31,9 @@
   --panel-icon-important: #10c469;
   --panel-icon-warning: #f9c851;
   --panel-input: #1e2027;
+  --panel-menu-item-background: #85c3ff1a;
+  --panel-menu-item-background-hover: #bacfe41a;
+  --panel-menu-item-text: #a9d5ff;
   --panel-tags: #3f4762;
   --panel-text: #cfd8e3;
   --panel-text-danger: #ff6c6c;

diff --git a/src/pages/login/LoginPage.tsx b/src/pages/login/LoginPage.tsx
@@ -126,7 +126,7 @@ function LoginPage() {
         position="bottom-right"
         autoClose={4000}
         transition={Slide}
-        className="mt-20 !w-[29.5rem]"
+        className="mt-20 w-auto"
         closeButton={false}
         icon={false}
       />

diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
@@ -33,7 +33,7 @@ function MainPage() {
           position={toastPosition}
           autoClose={4000}
           transition={Slide}
-          className="mt-20 !w-[29.5rem]"
+          className="mt-20 w-auto"
           closeButton={false}
           icon={false}
         />

diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
@@ -101,13 +101,13 @@ function SettingsPage() {
       <div className="relative top-0 z-10 flex w-72 flex-col gap-y-4 rounded-md border border-panel-border bg-panel-background-transparent p-8 font-semibold">
         <div className="sticky top-8">
           <div className="mb-8 text-center text-xl opacity-100">Settings</div>
-          <div className="flex flex-col items-center">
+          <div className="flex flex-col items-center gap-y-2">
             {items.map(item => (
               <NavLink
                 to={item.path}
                 className={({ isActive }) => (isActive
-                  ? 'w-full text-center bg-button-primary text-button-primary-text border-2 !border-button-primary-border rounded-md hover:bg-button-primary-hover py-4 px-2'
-                  : 'w-full text-center py-4 px-2')}
+                  ? 'w-full text-center bg-panel-menu-item-background py-2 px-2 rounded-md text-panel-menu-item-text'
+                  : 'w-full text-center py-2 px-2 rounded-md hover:bg-panel-menu-item-background-hover')}
                 key={item.path}
               >
                 {item.name}

diff --git a/src/pages/settings/tabs/ApiKeys.tsx b/src/pages/settings/tabs/ApiKeys.tsx
@@ -27,7 +27,7 @@ const UserApiTokens = ({ token }: { token: AuthToken }) => {
 
   return (
     <div className="flex flex-row items-center justify-between">
-      <div className="flex w-[90%] flex-col gap-y-1">
+      <div className="flex w-[90%] flex-col">
         {token.Device}
       </div>
       <Button buttonType="danger" className="px-2 py-1 text-sm" onClick={onDeleteClick} loading={isPending}>
@@ -92,7 +92,7 @@ const ApiKeys = () => {
 
       <div className="flex flex-col gap-y-4">
         <div className="font-semibold">Generate API Key</div>
-        <div className="flex flex-row justify-between gap-x-2 border-b-2 border-panel-border pb-8">
+        <div className="flex flex-row justify-between gap-x-2 border-b border-panel-border pb-8">
           <Input
             id="key-input"
             endIcons={createdToken

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -68,6 +68,9 @@ module.exports = {
         'panel-icon-important': 'var(--panel-icon-important)',
         'panel-icon-warning': 'var(--panel-icon-warning)',
         'panel-input': 'var(--panel-input)',
+        'panel-menu-item-background': 'var(--panel-menu-item-background)',
+        'panel-menu-item-background-hover': 'var(--panel-menu-item-background-hover)',
+        'panel-menu-item-text': 'var(--panel-menu-item-text)',
         'panel-tags': 'var(--panel-tags)',
         'panel-text': 'var(--panel-text)',
         'panel-text-danger': 'var(--panel-text-danger)',