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

wip: update color palette

Browse Source
This commit is contained in:
Ren Amamiya
2023-10-10 08:25:31 +07:00
parent d20ee26e22
commit 043c1b1220
104 changed files with 747 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/relays/components/relayForm.tsx
View File

@@ -40,9 +40,9 @@ export function RelayForm() {
return (
<div className="flex flex-col gap-1">
<div className="flex h-10 items-center justify-between rounded-lg bg-zinc-200 pr-1.5 dark:bg-zinc-800">
<div className="flex h-10 items-center justify-between rounded-lg bg-neutral-200 pr-1.5 dark:bg-neutral-800">
<input
className="h-full w-full bg-transparent pl-3 pr-1.5 text-zinc-900 placeholder:text-zinc-600 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-400"
className="h-full w-full bg-transparent pl-3 pr-1.5 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-400"
type="url"
placeholder="wss://"
spellCheck={false}
@@ -55,7 +55,7 @@ export function RelayForm() {
<button
type="button"
onClick={() => createRelay()}
className="inline-flex h-6 w-6 items-center justify-center rounded bg-interor-500 text-white hover:bg-interor-600"
className="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500 text-white hover:bg-blue-600"
>
<PlusIcon className="h-4 w-4" />
</button>

24
src/app/relays/components/relayList.tsx
View File

@@ -44,32 +44,32 @@ export function RelayList() {
};
return (
<div className="col-span-2 border-r border-zinc-100 dark:border-zinc-900">
<div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center pb-10">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
<p>Loading relay...</p>
</div>
</div>
) : (
<VList className="scrollbar-none mt-20 h-full">
<div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900">
<h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
<VList className="mt-20 h-full scrollbar-none">
<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
<h3 className="bg-gradient-to-r from-blue-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
All relays used by your follows
</h3>
</div>
{[...data].map(([key, value]) => (
<div
key={key}
className="flex h-14 w-full items-center justify-between border-b border-zinc-100 px-3 dark:border-zinc-900"
className="flex h-14 w-full items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900"
>
<div className="inline-flex items-center gap-2 divide-x divide-zinc-100 dark:divide-zinc-900">
<div className="inline-flex items-center gap-2 divide-x divide-neutral-100 dark:divide-neutral-900">
<div className="inline-flex items-center gap-2">
<button
type="button"
onClick={() => inspectRelay(key)}
className="inline-flex h-6 items-center justify-center gap-1 rounded bg-zinc-200 px-1.5 text-sm font-medium text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
className="inline-flex h-6 items-center justify-center gap-1 rounded bg-neutral-200 px-1.5 text-sm font-medium text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
>
<ShareIcon className="h-3 w-3" />
Inspect
@@ -77,16 +77,16 @@ export function RelayList() {
<button
type="button"
onClick={() => connectRelay(key)}
className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-900 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800"
className="inline-flex h-6 w-6 items-center justify-center rounded text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
>
<PlusIcon className="h-3 w-3" />
</button>
</div>
<div className="inline-flex items-center gap-2 pl-3">
<span className="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
<span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">
Relay:{' '}
</span>
<span className="max-w-[200px] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
<span className="max-w-[200px] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
{key}
</span>
</div>
@@ -96,7 +96,7 @@ export function RelayList() {
<User key={item} pubkey={item} variant="stacked" />
))}
{value.length > 4 ? (
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-zinc-200 text-zinc-900 ring-1 ring-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700">
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
<span className="text-xs font-medium">+{value.length}</span>
</div>
) : null}

8
src/app/relays/components/userRelay.tsx
View File

@@ -34,7 +34,7 @@ export function UserRelay() {
{data.map((item) => (
<div
key={item}
className="group flex h-10 items-center justify-between rounded-lg bg-zinc-200 pl-3 pr-1.5 dark:bg-zinc-800"
className="group flex h-10 items-center justify-between rounded-lg bg-neutral-200 pl-3 pr-1.5 dark:bg-neutral-800"
>
<div className="inline-flex items-center gap-2.5">
{relayUrls.includes(item) ? (
@@ -48,16 +48,16 @@ export function UserRelay() {
<span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
</span>
)}
<p className="max-w-[20rem] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
<p className="max-w-[20rem] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
{item}
</p>
</div>
<button
type="button"
onClick={() => removeRelay(item)}
className="hidden h-6 w-6 items-center justify-center rounded hover:bg-zinc-300 group-hover:inline-flex dark:hover:bg-zinc-700"
className="hidden h-6 w-6 items-center justify-center rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
>
<CancelIcon className="h-4 w-4 text-zinc-900 dark:text-zinc-100" />
<CancelIcon className="h-4 w-4 text-neutral-900 dark:text-neutral-100" />
</button>
</div>
))}