reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update settings screen

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-10 17:18:53 +07:00
parent 8024c09642
commit f2fc41018d
4 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/settings/account.tsx
View File

@@ -36,7 +36,7 @@ export function AccountSettingsScreen() {
<input <input
readOnly readOnly
value={account.pubkey} 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>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
@@ -46,7 +46,7 @@ export function AccountSettingsScreen() {
<input <input
readOnly readOnly
value={account.npub} 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>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
@@ -61,7 +61,7 @@ export function AccountSettingsScreen() {
readOnly readOnly
type={type} type={type}
value={privkey} 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 <button
type="button" type="button"

4
src/app/settings/general.tsx
View File

@@ -7,8 +7,8 @@ export function GeneralSettingsScreen() {
<div className="h-full w-full px-3 pt-12"> <div className="h-full w-full px-3 pt-12">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h1 className="text-lg font-semibold text-white">General</h1> <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="w-full rounded-xl bg-white/10">
<div className="flex h-full w-full flex-col divide-y divide-zinc-800"> <div className="flex h-full w-full flex-col divide-y divide-white/5">
<AutoStartSetting /> <AutoStartSetting />
<CacheTimeSetting /> <CacheTimeSetting />
<VersionSetting /> <VersionSetting />

36
src/app/settings/shortcuts.tsx
View File

@@ -5,79 +5,77 @@ export function ShortcutsSettingsScreen() {
<div className="h-full w-full px-3 pt-12"> <div className="h-full w-full px-3 pt-12">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h1 className="text-lg font-semibold text-white">Shortcuts</h1> <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="w-full rounded-xl bg-white/10">
<div className="flex h-full w-full flex-col divide-y divide-zinc-800"> <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="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <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 composer</span>
Open composer
</span>
</div> </div>
<div className="flex items-center gap-2"> <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" /> <CommandIcon width={12} height={12} className="text-white/50" />
</div> </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> <span className="text-sm leading-none text-white/50">N</span>
</div> </div>
</div> </div>
</div> </div>
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <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 Add image block
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <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" /> <CommandIcon width={12} height={12} className="text-white/50" />
</div> </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> <span className="text-sm leading-none text-white/50">I</span>
</div> </div>
</div> </div>
</div> </div>
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <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 Add newsfeed block
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <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" /> <CommandIcon width={12} height={12} className="text-white/50" />
</div> </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> <span className="text-sm leading-none text-white/50">F</span>
</div> </div>
</div> </div>
</div> </div>
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <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 Open personal page
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <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" /> <CommandIcon width={12} height={12} className="text-white/50" />
</div> </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> <span className="text-sm leading-none text-white/50">P</span>
</div> </div>
</div> </div>
</div> </div>
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <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 Open notification
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <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" /> <CommandIcon width={12} height={12} className="text-white/50" />
</div> </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> <span className="text-sm leading-none text-white/50">B</span>
</div> </div>
</div> </div>

26
src/shared/settingsLayout.tsx
View File

@@ -6,12 +6,12 @@ import { LumeBar } from '@shared/lumeBar';
export function SettingsLayout() { export function SettingsLayout() {
return ( return (
<div className="flex h-screen w-screen"> <div className="flex h-screen w-screen">
<div className="relative flex shrink-0 flex-row"> <div className="relative flex shrink-0 flex-row bg-black/80 pt-12">
<div className="relative flex w-[232px] flex-col gap-3 border-r border-zinc-900"> <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="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="flex flex-col gap-0.5 px-1.5">
<div className="px-2.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 Settings
</h3> </h3>
</div> </div>
@@ -20,8 +20,8 @@ export function SettingsLayout() {
to="/settings/general" to="/settings/general"
className={({ isActive }) => className={({ isActive }) =>
twMerge( twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200', 'flex h-9 items-center gap-2.5 rounded-md px-2.5',
isActive ? 'bg-zinc-900/50' : '' isActive ? 'bg-white/10 text-white' : 'text-white/80'
) )
} }
> >
@@ -31,8 +31,8 @@ export function SettingsLayout() {
to="/settings/shortcuts" to="/settings/shortcuts"
className={({ isActive }) => className={({ isActive }) =>
twMerge( twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200', 'flex h-9 items-center gap-2.5 rounded-md px-2.5',
isActive ? 'bg-zinc-900/50' : '' isActive ? 'bg-white/10 text-white' : 'text-white/80'
) )
} }
> >
@@ -42,8 +42,8 @@ export function SettingsLayout() {
to="/settings/account" to="/settings/account"
className={({ isActive }) => className={({ isActive }) =>
twMerge( twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200', 'flex h-9 items-center gap-2.5 rounded-md px-2.5',
isActive ? 'bg-zinc-900/50' : '' isActive ? 'bg-white/10 text-white' : 'text-white/80'
) )
} }
> >
@@ -57,9 +57,13 @@ export function SettingsLayout() {
<LumeBar /> <LumeBar />
</div> </div>
</div> </div>
<div className="h-full w-full"> <div className="h-full w-full flex-1 bg-black/90">
<Outlet /> <Outlet />
<ScrollRestoration /> <ScrollRestoration
getKey={(location) => {
return location.pathname;
}}
/>
</div> </div>
</div> </div>
); );