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

wip: new ui

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-01 15:34:09 +07:00
parent e97d0281e2
commit 1ddcbf1654
21 changed files with 99 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,65 +81,61 @@ export function UnlockScreen() {
return ( return (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<div className="mx-auto w-full max-w-md"> <div className="mx-auto w-full max-w-md">
<div className="mb-8 text-center"> <div className="mb-6 text-center">
<h1 className="text-xl font-semibold text-zinc-100"> <h1 className="text-2xl font-semibold text-white">Enter password to unlock</h1>
Enter password to unlock
</h1>
</div> </div>
<div className="flex flex-col gap-4"> <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3"> <div className="flex flex-col gap-1">
<div className="flex flex-col gap-1"> <div className="relative">
<div className="relative"> <input
<input {...register('password', { required: true })}
{...register('password', { required: true })} type={passwordInput}
type={passwordInput} className="relative w-full rounded-lg bg-white/10 py-3 text-center text-white !outline-none placeholder:text-white/10"
className="relative w-full rounded-lg bg-zinc-800 py-3 text-center text-zinc-100 !outline-none placeholder:text-zinc-400" />
/>
<button
type="button"
onClick={() => showPassword()}
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
>
{passwordInput === 'password' ? (
<EyeOffIcon
width={20}
height={20}
className="text-zinc-500 group-hover:text-zinc-100"
/>
) : (
<EyeOnIcon
width={20}
height={20}
className="text-zinc-500 group-hover:text-zinc-100"
/>
)}
</button>
</div>
<span className="text-sm text-red-400">
{errors.password && <p>{errors.password.message}</p>}
</span>
</div>
<div className="flex flex-col items-center justify-center">
<button <button
type="submit" type="button"
disabled={!isDirty || !isValid} onClick={() => showPassword()}
className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600" className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
> >
{loading ? ( {passwordInput === 'password' ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" /> <EyeOffIcon
width={20}
height={20}
className="text-white/50 group-hover:text-white"
/>
) : ( ) : (
'Continue →' <EyeOnIcon
width={20}
height={20}
className="text-white/50 group-hover:text-white"
/>
)} )}
</button> </button>
<Link
to="/auth/reset"
className="inline-flex h-12 items-center justify-center text-center text-sm text-zinc-400"
>
Reset password
</Link>
</div> </div>
</form> <span className="text-sm text-red-400">
</div> {errors.password && <p>{errors.password.message}</p>}
</span>
</div>
<div className="flex flex-col items-center justify-center">
<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"
>
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
) : (
'Continue →'
)}
</button>
<Link
to="/auth/reset"
className="inline-flex h-14 items-center justify-center text-center text-white/50"
>
Reset password
</Link>
</div>
</form>
</div> </div>
</div> </div>
); );

11
src/app/space/components/blocks/following.tsx
View File

@@ -125,13 +125,12 @@ export function FollowingBlock() {
); );
return ( return (
<div className="relative w-[400px] shrink-0 border-r border-zinc-900"> <div
ref={parentRef}
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
>
<TitleBar title="Your Circle" /> <TitleBar title="Your Circle" />
<div <div className="h-full">
ref={parentRef}
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
style={{ contain: 'strict' }}
>
{status === 'loading' ? ( {status === 'loading' ? (
<div className="px-3 py-1.5"> <div className="px-3 py-1.5">
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3"> <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">

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

@@ -57,12 +57,11 @@ export function SpaceScreen() {
<div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden"> <div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
<FollowingBlock /> <FollowingBlock />
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900"> <div className="flex w-[350px] shrink-0 flex-col">
<div <div
data-tauri-drag-region data-tauri-drag-region
className="group flex h-11 w-full items-center justify-between overflow-hidden border-b border-zinc-900 px-3" className="group flex h-11 w-full items-center justify-between overflow-hidden px-3"
/> />
<div className="flex w-full flex-1 items-center justify-center p-3"> <div className="flex w-full flex-1 items-center justify-center p-3">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" /> <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
</div> </div>
@@ -71,18 +70,17 @@ export function SpaceScreen() {
blocks.map((block: Block) => renderBlock(block)) blocks.map((block: Block) => renderBlock(block))
)} )}
{isFetching && ( {isFetching && (
<div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900"> <div className="flex w-[350px] shrink-0 flex-col">
<div <div
data-tauri-drag-region data-tauri-drag-region
className="group flex h-11 w-full items-center justify-between overflow-hidden border-b border-zinc-900 px-3" className="group flex h-11 w-full items-center justify-between overflow-hidden px-3"
/> />
<div className="flex w-full flex-1 items-center justify-center p-3"> <div className="flex w-full flex-1 items-center justify-center p-3">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" /> <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
</div> </div>
</div> </div>
)} )}
<div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900"> <div className="flex w-[350px] shrink-0 flex-col">
<div className="inline-flex h-full w-full items-center justify-center"> <div className="inline-flex h-full w-full items-center justify-center">
<AddBlock /> <AddBlock />
</div> </div>

2
src/index.css
View File

@@ -15,7 +15,7 @@ button {
} }
.markdown { .markdown {
@apply prose prose-zinc max-w-none select-text hyphens-auto dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 prose-a:after:content-['_↗'] hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2; @apply prose max-w-none select-text hyphens-auto text-white dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 prose-a:after:content-['_↗'] hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
} }
.ProseMirror p.is-empty::before { .ProseMirror p.is-empty::before {

2
src/shared/appLayout.tsx
View File

@@ -8,7 +8,7 @@ export function AppLayout() {
<div className="shrink-0"> <div className="shrink-0">
<Navigation /> <Navigation />
</div> </div>
<div className="h-full w-full flex-1 bg-black"> <div className="h-full w-full flex-1 bg-black/90">
<Outlet /> <Outlet />
<ScrollRestoration /> <ScrollRestoration />
</div> </div>

8
src/shared/authLayout.tsx
View File

@@ -1,12 +1,10 @@
import { Outlet } from 'react-router-dom' import { Outlet } from 'react-router-dom';
export function AuthLayout() { export function AuthLayout() {
return ( return (
<div className="relative h-screen w-screen"> <div className="relative h-screen w-screen bg-black/90">
<div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region /> <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
<div className="relative flex min-h-0 w-full flex-1"> <Outlet />
<Outlet />
</div>
</div> </div>
); );
} }

8
src/shared/notes/actions.tsx
View File

@@ -36,7 +36,7 @@ export function NoteActions({
</div> </div>
{!noOpenThread && ( {!noOpenThread && (
<> <>
<div className="mx-2 block h-4 w-px bg-zinc-800" /> <div className="mx-2 block h-4 w-px bg-white/10" />
<Tooltip.Root delayDuration={150}> <Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild> <Tooltip.Trigger asChild>
<button <button
@@ -50,13 +50,13 @@ export function NoteActions({
} }
className="group inline-flex h-7 w-7 items-center justify-center" className="group inline-flex h-7 w-7 items-center justify-center"
> >
<ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" /> <ThreadIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
</button> </button>
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Portal> <Tooltip.Portal>
<Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-3.5 py-1.5 text-sm leading-none text-zinc-100 backdrop-blur-lg will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"> <Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Open thread Open thread
<Tooltip.Arrow className="fill-zinc-700" /> <Tooltip.Arrow className="fill-black" />
</Tooltip.Content> </Tooltip.Content>
</Tooltip.Portal> </Tooltip.Portal>
</Tooltip.Root> </Tooltip.Root>

6
src/shared/notes/actions/reaction.tsx
View File

@@ -66,13 +66,13 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
{reaction ? ( {reaction ? (
<img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" /> <img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
) : ( ) : (
<ReactionIcon className="h-5 w-5 text-zinc-300 group-hover:text-red-400" /> <ReactionIcon className="h-5 w-5 text-white group-hover:text-red-400" />
)} )}
</button> </button>
</Popover.Trigger> </Popover.Trigger>
<Popover.Portal> <Popover.Portal>
<Popover.Content <Popover.Content
className="select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-1 py-1 text-sm leading-none text-zinc-100 will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade" className="select-none rounded-md bg-black px-1 py-1 text-sm will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
sideOffset={0} sideOffset={0}
side="top" side="top"
> >
@@ -133,7 +133,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
/> />
</button> </button>
</div> </div>
<Popover.Arrow className="fill-zinc-700" /> <Popover.Arrow className="fill-black" />
</Popover.Content> </Popover.Content>
</Popover.Portal> </Popover.Portal>
</Popover.Root> </Popover.Root>

6
src/shared/notes/actions/reply.tsx
View File

@@ -23,13 +23,13 @@ export function NoteReply({
onClick={() => setReply(id, pubkey, root)} onClick={() => setReply(id, pubkey, root)}
className="group inline-flex h-7 w-7 items-center justify-center" className="group inline-flex h-7 w-7 items-center justify-center"
> >
<ReplyIcon className="h-5 w-5 text-zinc-300 group-hover:text-green-500" /> <ReplyIcon className="h-5 w-5 text-white group-hover:text-green-500" />
</button> </button>
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Portal> <Tooltip.Portal>
<Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-3.5 py-1.5 text-sm leading-none text-zinc-100 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"> <Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Quick reply Quick reply
<Tooltip.Arrow className="fill-zinc-700" /> <Tooltip.Arrow className="fill-black" />
</Tooltip.Content> </Tooltip.Content>
</Tooltip.Portal> </Tooltip.Portal>
</Tooltip.Root> </Tooltip.Root>

6
src/shared/notes/actions/repost.tsx
View File

@@ -25,13 +25,13 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
onClick={() => submit()} onClick={() => submit()}
className="group inline-flex h-7 w-7 items-center justify-center" className="group inline-flex h-7 w-7 items-center justify-center"
> >
<RepostIcon className="h-5 w-5 text-zinc-300 group-hover:text-blue-400" /> <RepostIcon className="h-5 w-5 text-white group-hover:text-blue-400" />
</button> </button>
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Portal> <Tooltip.Portal>
<Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-3.5 py-1.5 text-sm leading-none text-zinc-100 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"> <Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Repost Repost
<Tooltip.Arrow className="fill-zinc-700" /> <Tooltip.Arrow className="fill-black" />
</Tooltip.Content> </Tooltip.Content>
</Tooltip.Portal> </Tooltip.Portal>
</Tooltip.Root> </Tooltip.Root>

2
src/shared/notes/kinds/kind1.tsx
View File

@@ -17,7 +17,7 @@ export function NoteKind_1({
return ( return (
<div className="h-min w-full px-3 py-1.5"> <div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3"> <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="relative flex flex-col"> <div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} /> <User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-6 flex items-start gap-3"> <div className="relative z-20 -mt-6 flex items-start gap-3">

2
src/shared/notes/kinds/kind1063.tsx
View File

@@ -13,7 +13,7 @@ export function NoteKind_1063({ event }: { event: LumeEvent }) {
return ( return (
<div className="h-min w-full px-3 py-1.5"> <div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3"> <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="flex flex-col"> <div className="flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} /> <User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-6 flex items-start gap-3"> <div className="relative z-20 -mt-6 flex items-start gap-3">

2
src/shared/notes/kinds/repost.tsx
View File

@@ -33,7 +33,7 @@ export function Repost({ event }: { event: LumeEvent }) {
return ( return (
<div className="h-min w-full px-3 py-1.5"> <div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3"> <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="isolate flex flex-col -space-y-4 overflow-hidden"> <div className="isolate flex flex-col -space-y-4 overflow-hidden">
<RepostUser pubkey={event.pubkey} /> <RepostUser pubkey={event.pubkey} />

2
src/shared/notes/kinds/sub.tsx
View File

@@ -24,7 +24,7 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
return ( return (
<> <>
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" /> <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
<div className="mb-5 flex flex-col"> <div className="mb-5 flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} /> <User pubkey={data.pubkey} time={data.created_at} />
<div className="relative z-20 -mt-6 flex items-start gap-3"> <div className="relative z-20 -mt-6 flex items-start gap-3">

2
src/shared/notes/kinds/thread.tsx
View File

@@ -19,7 +19,7 @@ export function NoteThread({
return ( return (
<div className="h-min w-full px-3 py-1.5"> <div className="h-min w-full px-3 py-1.5">
<div className="overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3"> <div className="overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="relative">{root && <SubNote id={root} />}</div> <div className="relative">{root && <SubNote id={root} />}</div>
<div className="relative">{reply && <SubNote id={reply} root={root} />}</div> <div className="relative">{reply && <SubNote id={reply} root={root} />}</div>
<div className="relative flex flex-col"> <div className="relative flex flex-col">

2
src/shared/notes/kinds/unsupport.tsx
View File

@@ -6,7 +6,7 @@ import { LumeEvent } from '@utils/types';
export function NoteKindUnsupport({ event }: { event: LumeEvent }) { export function NoteKindUnsupport({ event }: { event: LumeEvent }) {
return ( return (
<div className="h-min w-full px-3 py-1.5"> <div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3"> <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="flex flex-col"> <div className="flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} /> <User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-6 flex items-start gap-3"> <div className="relative z-20 -mt-6 flex items-start gap-3">

15
src/shared/notes/metadata.tsx
View File

@@ -79,8 +79,8 @@ export function NoteMetadata({ id }: { id: string }) {
<div> <div>
{data.replies > 0 ? ( {data.replies > 0 ? (
<> <>
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" /> <div className="absolute left-[18px] top-14 h-[calc(100%-6.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
<div className="relative z-10 flex items-center gap-3 bg-zinc-900 pb-3"> <div className="relative z-10 flex items-center gap-3 pb-3">
<div className="mt-2 inline-flex h-6 w-11 shrink-0 items-center justify-center"> <div className="mt-2 inline-flex h-6 w-11 shrink-0 items-center justify-center">
<div className="isolate flex -space-x-1 overflow-hidden"> <div className="isolate flex -space-x-1 overflow-hidden">
{data.users?.map((user, index) => ( {data.users?.map((user, index) => (
@@ -94,14 +94,13 @@ export function NoteMetadata({ id }: { id: string }) {
onClick={() => onClick={() =>
add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: id }) add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: id })
} }
className="text-zinc-500" className="text-white/50"
> >
<span className="font-semibold text-zinc-300">{data.replies}</span>{' '} <span className="font-semibold text-white">{data.replies}</span> replies
replies
</button> </button>
<span className="text-zinc-500">·</span> <span className="text-white/50">·</span>
<p className="text-zinc-500"> <p className="text-white/50">
<span className="font-semibold text-zinc-300"> <span className="font-semibold text-white">
{compactNumber.format(data.zap)} {compactNumber.format(data.zap)}
</span>{' '} </span>{' '}
zaps zaps

10
src/shared/notes/preview/link.tsx
View File

@@ -7,7 +7,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
const domain = new URL(urls[0]); const domain = new URL(urls[0]);
return ( return (
<div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800"> <div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="h-44 w-full animate-pulse bg-zinc-700" /> <div className="h-44 w-full animate-pulse bg-zinc-700" />
@@ -21,7 +21,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
</div> </div>
) : ( ) : (
<a <a
className="flex flex-col rounded-lg border-t border-zinc-700/50" className="flex flex-col rounded-lg"
href={urls[0]} href={urls[0]}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
@@ -43,15 +43,15 @@ export function LinkPreview({ urls }: { urls: string[] }) {
/> />
)} )}
<div className="flex flex-col gap-2 px-3 py-3"> <div className="flex flex-col gap-2 px-3 py-3">
<h5 className="line-clamp-1 font-medium leading-none text-zinc-200"> <h5 className="line-clamp-1 font-medium leading-none text-white">
{data.title} {data.title}
</h5> </h5>
{data.description && ( {data.description && (
<p className="line-clamp-3 break-all text-sm text-zinc-400"> <p className="line-clamp-3 break-all text-sm text-white/50">
{data.description} {data.description}
</p> </p>
)} )}
<span className="mt-2.5 text-sm leading-none text-zinc-500"> <span className="mt-2.5 text-sm leading-none text-white/50">
{domain.hostname} {domain.hostname}
</span> </span>
</div> </div>

2
src/shared/titleBar.tsx
View File

@@ -8,7 +8,7 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
return ( return (
<div <div
data-tauri-drag-region data-tauri-drag-region
className="group flex h-11 w-full shrink-0 items-center justify-between overflow-hidden border-b border-zinc-900 px-3" className="group flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
> >
<div className="w-6" /> <div className="w-6" />
<h3 className="text-sm font-medium text-zinc-200">{title}</h3> <h3 className="text-sm font-medium text-zinc-200">{title}</h3>

6
src/shared/user.tsx
View File

@@ -81,12 +81,12 @@ export function User({
shortenKey(pubkey)} shortenKey(pubkey)}
</h5> </h5>
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<span className="leading-none text-zinc-500">{createdAt}</span> <span className="leading-none text-white/50">{createdAt}</span>
<button <button
type="button" type="button"
className="inline-flex h-5 w-max items-center justify-center rounded px-1 hover:bg-zinc-800" className="inline-flex h-5 w-max items-center justify-center rounded px-1 hover:bg-white/20"
> >
<VerticalDotsIcon className="h-4 w-4 rotate-90 transform text-zinc-200" /> <VerticalDotsIcon className="h-4 w-4 rotate-90 transform text-white/50" />
</button> </button>
</div> </div>
</div> </div>

2
src/utils/types.d.ts vendored
View File

@@ -16,7 +16,7 @@ export interface LumeEvent extends NDKEvent {
content: Content; content: Content;
} }
export interface Account { export interface Account extends NDKUserProfile {
id: number; id: number;
npub: string; npub: string;
pubkey: string; pubkey: string;