From f2fc41018d23896070ff5234b24b32ac84c5219a Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Thu, 10 Aug 2023 17:18:53 +0700
Subject: [PATCH] update settings screen

---
 src/app/settings/account.tsx   |  6 +++---
 src/app/settings/general.tsx   |  4 ++--
 src/app/settings/shortcuts.tsx | 36 ++++++++++++++++------------------
 src/shared/settingsLayout.tsx  | 26 +++++++++++++-----------
 4 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/src/app/settings/account.tsx b/src/app/settings/account.tsx
index fa1a7b70..d91af1e7 100644
--- a/src/app/settings/account.tsx
+++ b/src/app/settings/account.tsx
@@ -36,7 +36,7 @@ export function AccountSettingsScreen() {
                 <input
                   readOnly
                   value={account.pubkey}
-                  className="relative w-2/3 rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
+                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
                 />
               </div>
               <div className="flex flex-col gap-1">
@@ -46,7 +46,7 @@ export function AccountSettingsScreen() {
                 <input
                   readOnly
                   value={account.npub}
-                  className="relative w-2/3 rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
+                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
                 />
               </div>
               <div className="flex flex-col gap-1">
@@ -61,7 +61,7 @@ export function AccountSettingsScreen() {
                     readOnly
                     type={type}
                     value={privkey}
-                    className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
+                    className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
                   />
                   <button
                     type="button"
diff --git a/src/app/settings/general.tsx b/src/app/settings/general.tsx
index f60911cb..7226c132 100644
--- a/src/app/settings/general.tsx
+++ b/src/app/settings/general.tsx
@@ -7,8 +7,8 @@ export function GeneralSettingsScreen() {
     <div className="h-full w-full px-3 pt-12">
       <div className="flex flex-col gap-2">
         <h1 className="text-lg font-semibold text-white">General</h1>
-        <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
-          <div className="flex h-full w-full flex-col divide-y divide-zinc-800">
+        <div className="w-full rounded-xl bg-white/10">
+          <div className="flex h-full w-full flex-col divide-y divide-white/5">
             <AutoStartSetting />
             <CacheTimeSetting />
             <VersionSetting />
diff --git a/src/app/settings/shortcuts.tsx b/src/app/settings/shortcuts.tsx
index c5d27dc7..b5ab0c86 100644
--- a/src/app/settings/shortcuts.tsx
+++ b/src/app/settings/shortcuts.tsx
@@ -5,79 +5,77 @@ export function ShortcutsSettingsScreen() {
     <div className="h-full w-full px-3 pt-12">
       <div className="flex flex-col gap-2">
         <h1 className="text-lg font-semibold text-white">Shortcuts</h1>
-        <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
-          <div className="flex h-full w-full flex-col divide-y divide-zinc-800">
+        <div className="w-full rounded-xl bg-white/10">
+          <div className="flex h-full w-full flex-col divide-y divide-white/5">
             <div className="inline-flex items-center justify-between px-5 py-4">
               <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
-                  Open composer
-                </span>
+                <span className="font-medium leading-none text-white">Open composer</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <span className="text-sm leading-none text-white/50">N</span>
                 </div>
               </div>
             </div>
             <div className="inline-flex items-center justify-between px-5 py-4">
               <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
+                <span className="font-medium leading-none text-white">
                   Add image block
                 </span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <span className="text-sm leading-none text-white/50">I</span>
                 </div>
               </div>
             </div>
             <div className="inline-flex items-center justify-between px-5 py-4">
               <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
+                <span className="font-medium leading-none text-white">
                   Add newsfeed block
                 </span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <span className="text-sm leading-none text-white/50">F</span>
                 </div>
               </div>
             </div>
             <div className="inline-flex items-center justify-between px-5 py-4">
               <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
+                <span className="font-medium leading-none text-white">
                   Open personal page
                 </span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <span className="text-sm leading-none text-white/50">P</span>
                 </div>
               </div>
             </div>
             <div className="inline-flex items-center justify-between px-5 py-4">
               <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
+                <span className="font-medium leading-none text-white">
                   Open notification
                 </span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
                   <span className="text-sm leading-none text-white/50">B</span>
                 </div>
               </div>
diff --git a/src/shared/settingsLayout.tsx b/src/shared/settingsLayout.tsx
index 90949243..ae63dd18 100644
--- a/src/shared/settingsLayout.tsx
+++ b/src/shared/settingsLayout.tsx
@@ -6,12 +6,12 @@ import { LumeBar } from '@shared/lumeBar';
 export function SettingsLayout() {
   return (
     <div className="flex h-screen w-screen">
-      <div className="relative flex shrink-0 flex-row">
-        <div className="relative flex w-[232px] flex-col gap-3 border-r border-zinc-900">
+      <div className="relative flex shrink-0 flex-row bg-black/80 pt-12">
+        <div className="relative flex w-[232px] flex-col gap-3">
           <div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
             <div className="flex flex-col gap-0.5 px-1.5">
               <div className="px-2.5">
-                <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
+                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
                   Settings
                 </h3>
               </div>
@@ -20,8 +20,8 @@ export function SettingsLayout() {
                   to="/settings/general"
                   className={({ isActive }) =>
                     twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
-                      isActive ? 'bg-zinc-900/50' : ''
+                      'flex h-9 items-center gap-2.5 rounded-md px-2.5',
+                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
                     )
                   }
                 >
@@ -31,8 +31,8 @@ export function SettingsLayout() {
                   to="/settings/shortcuts"
                   className={({ isActive }) =>
                     twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
-                      isActive ? 'bg-zinc-900/50' : ''
+                      'flex h-9 items-center gap-2.5 rounded-md px-2.5',
+                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
                     )
                   }
                 >
@@ -42,8 +42,8 @@ export function SettingsLayout() {
                   to="/settings/account"
                   className={({ isActive }) =>
                     twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
-                      isActive ? 'bg-zinc-900/50' : ''
+                      'flex h-9 items-center gap-2.5 rounded-md px-2.5',
+                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
                     )
                   }
                 >
@@ -57,9 +57,13 @@ export function SettingsLayout() {
           <LumeBar />
         </div>
       </div>
-      <div className="h-full w-full">
+      <div className="h-full w-full flex-1 bg-black/90">
         <Outlet />
-        <ScrollRestoration />
+        <ScrollRestoration
+          getKey={(location) => {
+            return location.pathname;
+          }}
+        />
       </div>
     </div>
   );