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

wip: ui

Browse Source
This commit is contained in:
Ren Amamiya
2023-10-08 09:31:11 +07:00
parent cb91373d33
commit bce76bd41c
66 changed files with 216 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/auth/create/step-1.tsx
View File

@@ -1,7 +1,7 @@
import { downloadDir } from '@tauri-apps/api/path';
import { writeText } from '@tauri-apps/plugin-clipboard-manager';
import { message, save } from '@tauri-apps/plugin-dialog';
import { writeTextFile } from '@tauri-apps/plugin-fs';
import { downloadDir } from '@tauri-apps/api/path';
import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
import { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
@@ -132,7 +132,7 @@ export function CreateStep1Screen() {
<button
type="button"
onClick={() => download()}
className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
{downloaded ? 'Downloaded' : 'Download account keys'}
</button>

2
src/app/auth/create/step-2.tsx
View File

@@ -127,7 +127,7 @@ export function CreateStep2Screen() {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
{loading ? (
<>

2
src/app/auth/create/step-3.tsx
View File

@@ -150,7 +150,7 @@ export function CreateStep3Screen() {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
{loading ? (
<>

2
src/app/auth/import/step-1.tsx
View File

@@ -133,7 +133,7 @@ export function ImportStep1Screen() {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
{loading ? (
<>

2
src/app/auth/import/step-2.tsx
View File

@@ -127,7 +127,7 @@ export function ImportStep2Screen() {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
{loading ? (
<>

2
src/app/auth/import/step-3.tsx
View File

@@ -62,7 +62,7 @@ export function ImportStep3Screen() {
<div className="flex flex-col gap-2">
<button
type="button"
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
onClick={() => submit()}
>
{loading ? (

2
src/app/auth/migrate.tsx
View File

@@ -157,7 +157,7 @@ export function MigrateScreen() {
<button
type="submit"
disabled={!isDirty || !isValid}
className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50"
>
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />

2
src/app/auth/onboarding/step-1.tsx
View File

@@ -109,7 +109,7 @@ export function OnboardStep1Screen() {
type="button"
onClick={submit}
disabled={loading || follows.length === 0}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
>
{loading ? (
<>

2
src/app/auth/onboarding/step-2.tsx
View File

@@ -123,7 +123,7 @@ export function OnboardStep2Screen() {
type="button"
onClick={submit}
disabled={loading || tags.size === 0 || tags.size > 3}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
>
{loading ? (
<>

2
src/app/auth/onboarding/step-3.tsx
View File

@@ -158,7 +158,7 @@ export function OnboardStep3Screen() {
type="button"
disabled={loading}
onClick={() => submit()}
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
>
{loading ? (
<>

2
src/app/auth/reset.tsx
View File

@@ -159,7 +159,7 @@ export function ResetScreen() {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
className="inline-flex h-12 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50"
>
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-white" />

2
src/app/auth/unlock.tsx
View File

@@ -100,7 +100,7 @@ export function UnlockScreen() {
<button
type="button"
onClick={() => setShowPassword((prev) => !prev)}
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded-full p-1 backdrop-blur-xl hover:bg-black/10 dark:hover:bg-white/10"
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded-lg p-1 backdrop-blur-xl hover:bg-black/10 dark:hover:bg-white/10"
>
{showPassword ? (
<EyeOffIcon className="group-hover:text-dark h-5 w-5 text-black/50 dark:text-white/50 dark:group-hover:text-white" />

2
src/app/auth/welcome.tsx
View File

@@ -16,7 +16,7 @@ export function WelcomeScreen() {
<div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10">
<Link
to="/auth/import"
className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-4 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-4 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
<span className="w-5" />
<span>Login with private key</span>

14
src/app/chats/chat.tsx
View File

@@ -71,23 +71,25 @@ export function ChatScreen() {
return (
<div className="h-full w-full p-3">
<div className="rounded-lg border-t border-white/5 bg-white/10 backdrop-blur-xl">
<div className="rounded-lg bg-zinc-100 backdrop-blur-xl dark:bg-zinc-900">
<div className="flex h-full flex-col justify-between overflow-hidden">
<div className="flex h-16 shrink-0 items-center border-b border-white/10 px-3">
<div className="flex h-16 shrink-0 items-center border-b border-zinc-200 px-3 dark:border-zinc-800">
<User pubkey={pubkey} variant="simple" />
</div>
<div className="h-full w-full flex-1 px-3 py-3">
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center">
<div className="flex flex-col items-center gap-1.5">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/50">Loading messages</p>
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
Loading messages
</p>
</div>
</div>
) : data.length === 0 ? (
<div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
<h3 className="mb-2 text-4xl">🙌</h3>
<p className="leading-none text-white/50">
<p className="leading-none text-zinc-500 dark:text-zinc-300">
You two didn&apos;t talk yet, let&apos;s send first message
</p>
</div>
@@ -97,7 +99,7 @@ export function ChatScreen() {
</VList>
)}
</div>
<div className="z-50 shrink-0 rounded-b-lg border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl">
<div className="shrink-0 rounded-b-lg border-t border-zinc-300 bg-zinc-200 p-3 backdrop-blur-xl dark:border-zinc-700 dark:bg-zinc-800">
<ChatForm
receiverPubkey={pubkey}
userPubkey={db.account.pubkey}

6
src/app/chats/components/chatForm.tsx
View File

@@ -47,7 +47,7 @@ export function ChatForm({
return (
<div className="flex items-center gap-2">
<MediaUploader setState={setValue} />
<div className="flex w-full items-center justify-between rounded-full bg-white/20 px-3">
<div className="flex w-full items-center justify-between rounded-full bg-zinc-300 px-3 dark:bg-zinc-700">
<input
value={value}
onChange={(e) => setValue(e.target.value)}
@@ -57,12 +57,12 @@ export function ChatForm({
autoCorrect="off"
autoCapitalize="off"
placeholder="Message"
className="h-10 flex-1 resize-none bg-transparent px-3 text-white placeholder:text-white/80 focus:outline-none"
className="h-10 flex-1 resize-none bg-transparent px-3 text-zinc-900 placeholder:text-zinc-500 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-300"
/>
<button
type="button"
onClick={submit}
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-white/80"
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-zinc-500 dark:text-zinc-300"
>
<EnterIcon className="h-5 w-5" />
Send

16
src/app/chats/components/chatListItem.tsx
View File

@@ -44,10 +44,10 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex items-center gap-2.5 px-3 py-1.5 hover:bg-white/10',
'flex items-center gap-2.5 px-3 py-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-800',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
? 'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100'
: 'text-zinc-500 dark:text-zinc-300'
)
}
>
@@ -64,22 +64,20 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
<img
src={svgURI}
alt={event.pubkey}
className="h-10 w-10 rounded-lg bg-white"
className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/>
</Avatar.Fallback>
</Avatar.Root>
<div className="flex w-full flex-col">
<div className="max-w-[10rem] truncate font-semibold text-white">
<div className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
{user?.name ||
user?.display_name ||
user?.displayName ||
displayNpub(event.pubkey, 16)}
</div>
<div className="flex w-full items-center justify-between">
<div className="max-w-[10rem] truncate text-sm text-white/70">
{decryptedContent}
</div>
<div className="text-sm text-white/70">{createdAt}</div>
<div className="max-w-[10rem] truncate text-sm">{decryptedContent}</div>
<div className="text-sm">{createdAt}</div>
</div>
</div>
</NavLink>

2
src/app/chats/components/mediaUploader.tsx
View File

@@ -29,7 +29,7 @@ export function MediaUploader({
<button
type="button"
onClick={() => uploadMedia()}
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-xl hover:bg-white/20"
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-zinc-300 text-zinc-500 hover:bg-zinc-400 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
>
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin" />

8
src/app/chats/components/message.tsx
View File

@@ -25,14 +25,16 @@ export function ChatMessage({
<div
className={twMerge(
'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
self ? 'ml-auto rounded-l-xl bg-fuchsia-500' : 'rounded-r-xl bg-white/10'
self
? 'ml-auto rounded-l-xl bg-interor-500'
: 'rounded-r-xl bg-zinc-200 dark:bg-zinc-800'
)}
>
{!richContent ? (
<p>Decrypting...</p>
<p className="text-zinc-900 dark:text-zinc-100">Decrypting...</p>
) : (
<div>
<p className="select-text whitespace-pre-line text-white">
<p className="select-text whitespace-pre-line text-zinc-900 dark:text-zinc-100">
{richContent.parsed}
</p>
<div>

2
src/app/explore/components/userGroupNode.tsx
View File

@@ -18,7 +18,7 @@ export function UserGroupNode({ data }) {
) : (
<GroupTitle pubkey={data.pubkey} />
)}
<div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-fuchsia-500/10 p-4">
<div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-interor-500/10 p-4">
{data.list.map((user: string) => (
<UserWithDrawer key={user} pubkey={user} />
))}

6
src/app/explore/components/userWithDrawer.tsx
View File

@@ -97,7 +97,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
<button
type="button"
onClick={() => unfollowUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
>
Unfollow
</button>
@@ -105,14 +105,14 @@ export const UserWithDrawer = memo(function UserWithDrawer({
<button
type="button"
onClick={() => followUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
>
Follow
</button>
)}
<Link
to={`/chats/${pubkey}`}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
>
Message
</Link>

2
src/app/nwc/components/alby.tsx
View File

@@ -121,7 +121,7 @@ export function NWCAlby() {
<button
type="button"
onClick={() => initAlby()}
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
>
{isLoading ? (
<>

2
src/app/nwc/components/other.tsx
View File

@@ -139,7 +139,7 @@ export function NWCOther() {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
>
{isLoading ? (
<>

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-white/10 pr-1.5">
<div className="flex h-10 items-center justify-between rounded-lg bg-zinc-200 pr-1.5 dark:bg-zinc-800">
<input
className="h-full w-full bg-transparent pl-3 pr-1.5 placeholder:text-white/70 focus:outline-none"
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"
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-fuchsia-500 text-white hover:bg-fuchsia-600"
className="inline-flex h-6 w-6 items-center justify-center rounded bg-interor-500 text-white hover:bg-interor-600"
>
<PlusIcon className="h-4 w-4" />
</button>

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

@@ -44,17 +44,17 @@ export function RelayList() {
};
return (
<div className="col-span-2 border-r border-white/5">
<div className="col-span-2 border-r border-zinc-100 dark:border-zinc-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-white" />
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-100 dark:text-zinc-900" />
<p>Loading relay...</p>
</div>
</div>
) : (
<VList className="scrollbar-hide mt-20 h-full">
<div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3">
<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">
All relays used by your follows
</h3>
@@ -62,14 +62,14 @@ export function RelayList() {
{[...data].map(([key, value]) => (
<div
key={key}
className="flex h-14 w-full items-center justify-between border-b border-white/5 px-3"
className="flex h-14 w-full items-center justify-between border-b border-zinc-100 px-3 dark:border-zinc-900"
>
<div className="inline-flex items-center gap-2 divide-x divide-white/10">
<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">
<button
type="button"
onClick={() => inspectRelay(key)}
className="inline-flex h-6 items-center justify-center gap-1 rounded bg-white/10 px-1.5 text-sm font-medium hover:bg-white/20"
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"
>
<ShareIcon className="h-3 w-3" />
Inspect
@@ -77,14 +77,16 @@ export function RelayList() {
<button
type="button"
onClick={() => connectRelay(key)}
className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/10"
className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-100 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-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-white/70">Relay: </span>
<span className="max-w-[200px] truncate text-sm font-medium text-white">
<span className="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
Relay:{' '}
</span>
<span className="max-w-[200px] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
{key}
</span>
</div>
@@ -94,8 +96,8 @@ 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-black/80 ring-1 ring-white/10 backdrop-blur-xl">
<span className="text-xs font-semibold">+{value.length}</span>
<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">
<span className="text-xs font-medium">+{value.length}</span>
</div>
) : null}
</div>

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-white/10 pl-3 pr-1.5"
className="group flex h-10 items-center justify-between rounded-lg bg-zinc-200 pl-3 pr-1.5 dark:bg-zinc-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 leading-none">
<p className="max-w-[20rem] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
{item}
</p>
</div>
<button
type="button"
onClick={() => removeRelay(item)}
className="hidden h-6 w-6 items-center justify-center rounded hover:bg-white/10 group-hover:inline-flex"
className="hidden h-6 w-6 items-center justify-center rounded hover:bg-zinc-300 group-hover:inline-flex dark:hover:bg-zinc-700"
>
<CancelIcon className="h-4 w-4 text-white" />
<CancelIcon className="h-4 w-4 text-zinc-900 dark:text-zinc-100" />
</button>
</div>
))}

6
src/app/relays/index.tsx
View File

@@ -6,8 +6,10 @@ export function RelaysScreen() {
<div className="grid h-full w-full grid-cols-3">
<RelayList />
<div className="col-span-1">
<div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3">
<h3 className="font-semibold text-white">Connected relays</h3>
<div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900">
<h3 className="font-semibold text-zinc-900 dark:text-zinc-100">
Connected relays
</h3>
</div>
<UserRelay />
</div>

4
src/app/relays/relay.tsx
View File

@@ -110,7 +110,7 @@ export function RelayScreen() {
href={`https://nips.be/${item}`}
target="_blank"
rel="noreferrer"
className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-interor-500"
>
{item}
</a>
@@ -145,7 +145,7 @@ export function RelayScreen() {
href={resolvedRelay.payments_url}
target="_blank"
rel="noreferrer"
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-fuchsia-500 text-sm font-medium hover:bg-fuchsia-600"
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-interor-500 text-sm font-medium hover:bg-interor-600"
>
Open payment website
</a>

2
src/app/settings/components/cacheTime.tsx
View File

@@ -30,7 +30,7 @@ export function CacheTimeSetting() {
<button
type="button"
onClick={() => update()}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-fuchsia-500"
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-interor-500"
>
<CheckCircleIcon className="h-4 w-4 text-white" />
</button>

4
src/app/space/components/toggle.tsx
View File

@@ -12,14 +12,14 @@ export function ToggleWidgetList() {
<div className="flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center">
<div className="relative">
<div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
<HandArrowDownIcon className="text-white/5" />
<HandArrowDownIcon className="text-zinc-100 dark:text-zinc-900" />
</div>
<button
type="button"
onClick={() =>
setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
}
className="inline-flex h-9 items-center gap-2 rounded-lg border-t border-white/10 bg-white/20 px-3 text-white hover:bg-white/30"
className="inline-flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-3 text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
>
<PlusIcon className="h-4 w-4 text-white" />
<p className="text-sm font-semibold leading-none">Add widget</p>

42
src/app/space/components/widgetList.tsx
View File

@@ -33,22 +33,22 @@ export function WidgetList({ params }: { params: Widget }) {
(kind: number) => {
switch (kind) {
case WidgetKinds.tmp.xfeed:
return <GroupFeedsIcon className="h-5 w-5 text-white" />;
return <GroupFeedsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.local.follows:
return <FollowsIcon className="h-5 w-5 text-white" />;
return <FollowsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.local.files:
case WidgetKinds.global.files:
return <FileIcon className="h-5 w-5 text-white" />;
return <FileIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.local.articles:
case WidgetKinds.global.articles:
return <ArticleIcon className="h-5 w-5 text-white" />;
return <ArticleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.tmp.xhashtag:
return <HashtagIcon className="h-5 w-4 text-white" />;
return <HashtagIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.nostrBand.trendingAccounts:
case WidgetKinds.nostrBand.trendingNotes:
return <TrendingIcon className="h-5 w-4 text-white" />;
return <TrendingIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.other.learnNostr:
return <ThreadsIcon className="h-5 w-4 text-white" />;
return <ThreadsIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
default:
return null;
}
@@ -59,14 +59,16 @@ export function WidgetList({ params }: { params: Widget }) {
const renderItem = useCallback(
(row: WidgetGroup, index: number) => {
return (
<div key={index} className="flex flex-col gap-3">
<h3 className="font-medium text-white/50">{row.title}</h3>
<div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10">
<div key={index} className="flex flex-col gap-2">
<h3 className="text-sm font-semibold text-zinc-500 dark:text-zinc-300">
{row.title}
</h3>
<div className="flex flex-col divide-y divide-zinc-200 overflow-hidden rounded-xl bg-zinc-100 dark:divide-zinc-800 dark:bg-zinc-900">
{row.data.map((item, index) => (
<button
onClick={() => openWidget(item)}
key={index}
className="flex items-center gap-2.5 px-4 hover:bg-white/10"
className="group flex items-center gap-2.5 px-4 hover:bg-zinc-200 dark:hover:bg-zinc-800"
>
{item.icon ? (
<div className="h-10 w-10 shrink-0 rounded-md">
@@ -77,13 +79,15 @@ export function WidgetList({ params }: { params: Widget }) {
/>
</div>
) : (
<div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10">
<div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-zinc-200 group-hover:bg-zinc-300 dark:bg-zinc-800 dark:group-hover:bg-zinc-700">
{renderIcon(item.kind)}
</div>
)}
<div className="inline-flex h-16 w-full flex-col items-start justify-center gap-1">
<h5 className="line-clamp-1 font-medium leading-none">{item.title}</h5>
<p className="line-clamp-1 text-xs leading-none text-white/50">
<div className="inline-flex h-16 w-full flex-col items-start justify-center">
<h5 className="line-clamp-1 text-sm font-medium text-zinc-900 dark:text-zinc-100">
{item.title}
</h5>
<p className="line-clamp-1 text-xs text-zinc-500 dark:text-zinc-300">
{item.description}
</p>
</div>
@@ -97,21 +101,21 @@ export function WidgetList({ params }: { params: Widget }) {
);
return (
<div className="relative h-full shrink-0 grow-0 basis-[400px] bg-white/10">
<div className="relative h-full shrink-0 grow-0 basis-[400px]">
<TitleBar id={params.id} title="Add widget" />
<div className="scrollbar-hide h-full overflow-y-auto pb-20">
<div className="flex flex-col gap-6 px-3">
{DefaultWidgets.map((row: WidgetGroup, index: number) =>
renderItem(row, index)
)}
<div className="border-t border-white/5 pt-6">
<div className="border-t border-zinc-200 pt-6 dark:border-zinc-800">
<button
type="button"
disabled
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-white/5 text-sm font-medium text-white/50"
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-zinc-100 text-sm font-medium text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100"
>
Build your own widget{' '}
<div className="-rotate-3 transform rounded-md border border-white/20 bg-white/10 px-1.5 py-1">
<div className="-rotate-3 transform-gpu rounded-md border border-zinc-300 bg-zinc-200 px-1.5 py-1 dark:border-zinc-700 dark:bg-zinc-800">
<span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
Coming soon
</span>

2
src/app/space/index.tsx
View File

@@ -88,7 +88,7 @@ export function SpaceScreen() {
{!widgets ? (
<div className="flex shrink-0 grow-0 basis-[400px] flex-col">
<div className="flex w-full flex-1 items-center justify-center p-3">
<LoaderIcon className="h-5 w-5 animate-spin text-white/10" />
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</div>
</div>
) : (

46
src/app/users/components/modal.tsx
View File

@@ -138,22 +138,22 @@ export function EditProfileModal() {
<Dialog.Trigger asChild>
<button
type="button"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
>
Edit profile
</button>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<Dialog.Overlay className="fixed inset-0 z-50 bg-white dark:bg-black" />
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
<div className="relative h-min w-full max-w-xl rounded-xl bg-zinc-100 dark:bg-zinc-900">
<div className="h-min w-full shrink-0 rounded-t-xl border-b border-zinc-200 px-5 py-5 dark:border-zinc-800">
<div className="flex items-center justify-between">
<Dialog.Title className="text-lg font-semibold leading-none text-white">
<Dialog.Title className="text-lg font-semibold leading-none text-zinc-900 dark:text-zinc-100">
Edit profile
</Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
<CancelIcon className="h-4 w-4 text-white/50" />
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-zinc-900 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800">
<CancelIcon className="h-4 w-4" />
</Dialog.Close>
</div>
</div>
@@ -170,7 +170,7 @@ export function EditProfileModal() {
className="h-full w-full object-cover"
/>
) : (
<div className="h-full w-full bg-white" />
<div className="h-full w-full bg-black dark:bg-white" />
)}
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
<BannerUploader setBanner={setBanner} />
@@ -193,7 +193,7 @@ export function EditProfileModal() {
<div className="flex flex-col gap-1">
<label
htmlFor="name"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
>
Name
</label>
@@ -204,13 +204,13 @@ export function EditProfileModal() {
minLength: 4,
})}
spellCheck={false}
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="nip05"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
>
NIP-05
</label>
@@ -221,17 +221,17 @@ export function EditProfileModal() {
minLength: 4,
})}
spellCheck={false}
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/>
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
{nip05.verified ? (
<span className="inline-flex h-6 items-center gap-1 rounded bg-green-500 px-2 text-sm font-medium">
<CheckCircleIcon className="h-4 w-4 text-white" />
<span className="inline-flex h-6 items-center gap-1 rounded bg-green-500 px-2 text-sm font-medium text-white">
<CheckCircleIcon className="h-4 w-4 text-black dark:text-white" />
Verified
</span>
) : (
<span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 px-2 text-sm font-medium">
<UnverifiedIcon className="h-4 w-4 text-white" />
<span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 px-2 text-sm font-medium text-white">
<UnverifiedIcon className="h-4 w-4 text-black dark:text-white" />
Unverified
</span>
)}
@@ -246,20 +246,20 @@ export function EditProfileModal() {
<div className="flex flex-col gap-1">
<label
htmlFor="about"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
>
Bio
</label>
<textarea
{...register('about')}
spellCheck={false}
className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
className="relative h-20 w-full resize-none rounded-lg bg-zinc-200 px-3 py-2 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="website"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
>
Website
</label>
@@ -267,13 +267,13 @@ export function EditProfileModal() {
type={'text'}
{...register('website', { required: false })}
spellCheck={false}
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="website"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
>
Lightning address
</label>
@@ -281,14 +281,14 @@ export function EditProfileModal() {
type={'text'}
{...register('lud16', { required: false })}
spellCheck={false}
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/>
</div>
<div>
<button
type="submit"
disabled={!isValid}
className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-interor-500 font-medium text-white hover:bg-interor-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
>
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />

22
src/app/users/components/profile.tsx
View File

@@ -58,36 +58,36 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
className="h-full w-full object-cover"
/>
) : (
<div className="h-full w-full bg-black" />
<div className="h-full w-full bg-zinc-100 dark:bg-zinc-900" />
)}
</div>
<div className="-mt-7 flex w-full flex-col items-center px-5">
<Image
src={user.picture || user.image}
alt={pubkey}
className="h-14 w-14 rounded-lg ring-2 ring-black"
className="h-14 w-14 rounded-lg ring-2 ring-zinc-100 dark:ring-zinc-900"
/>
<div className="mt-2 flex flex-1 flex-col gap-6">
<div className="flex flex-col items-center gap-1">
<div className="inline-flex flex-col items-center gap-1.5">
<h5 className="text-center text-xl font-semibold leading-none">
<div className="inline-flex flex-col items-center">
<h5 className="text-center text-xl font-semibold text-zinc-900 dark:text-zinc-100">
{user.name || user.display_name || user.displayName || 'No name'}
</h5>
{user.nip05 ? (
<NIP05
pubkey={pubkey}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm leading-none text-white/50"
className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
<span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-400">
{displayNpub(pubkey, 16)}
</span>
)}
</div>
<div className="flex flex-col gap-6">
{user.about || user.bio ? (
<p className="mt-2 max-w-[500px] select-text break-words text-center text-white">
<p className="mt-2 max-w-[500px] select-text break-words text-center text-zinc-900 dark:text-zinc-100">
{user.about || user.bio}
</p>
) : (
@@ -101,7 +101,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => unfollowUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
>
Unfollow
</button>
@@ -109,20 +109,20 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => followUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
>
Follow
</button>
)}
<Link
to={`/chats/${pubkey}`}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
>
Message
</Link>
{db.account.pubkey === pubkey && (
<>
<span className="mx-2 inline-flex h-4 w-px bg-white/10 backdrop-blur-xl" />
<span className="mx-2 inline-flex h-4 w-px bg-zinc-200 dark:bg-zinc-800" />
<EditProfileModal />
</>
)}

26
src/app/users/components/stats.tsx
View File

@@ -16,7 +16,7 @@ export function UserStats({ pubkey }: { pubkey: string }) {
if (status === 'loading') {
return (
<div className="flex w-full items-center justify-center">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</div>
);
}
@@ -28,32 +28,40 @@ export function UserStats({ pubkey }: { pubkey: string }) {
return (
<div className="flex w-full items-center justify-center gap-10">
<div className="inline-flex flex-col items-center gap-1">
<span className="font-semibold leading-none text-white">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
</span>
<span className="text-sm leading-none text-white/50">Followers</span>
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
Followers
</span>
</div>
<div className="inline-flex flex-col items-center gap-1">
<span className="font-semibold leading-none text-white">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
</span>
<span className="text-sm leading-none text-white/50">Following</span>
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
Following
</span>
</div>
<div className="inline-flex flex-col items-center gap-1">
<span className="font-semibold leading-none text-white">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{data.stats[pubkey].zaps_received
? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
: 0}
</span>
<span className="text-sm leading-none text-white/50">Zaps received</span>
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
Zaps received
</span>
</div>
<div className="inline-flex flex-col items-center gap-1">
<span className="font-semibold leading-none text-white">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{data.stats[pubkey].zaps_sent
? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
: 0}
</span>
<span className="text-sm leading-none text-white/50">Zaps sent</span>
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
Zaps sent
</span>
</div>
</div>
);

6
src/app/users/index.tsx
View File

@@ -68,7 +68,7 @@ export function UserScreen() {
);
return (
<div className="scrollbar-hide relative h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl">
<div className="scrollbar-hide relative h-full w-full overflow-y-auto">
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
<UserProfile pubkey={pubkey} />
<div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
@@ -84,9 +84,9 @@ export function UserScreen() {
</div>
) : data.length === 0 ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
<div className="rounded-xl bg-zinc-100 px-3 py-6 dark:bg-zinc-900">
<div className="flex flex-col items-center gap-4">
<p className="text-center text-sm font-medium text-white">
<p className="text-center text-sm font-medium text-zinc-900 dark:text-zinc-100">
User doesn&apos;t have any posts in the last 48 hours.
</p>
</div>