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

4
src/shared/accounts/active.tsx
View File

@@ -55,14 +55,14 @@ export function ActiveAccount() {
}
return (
<div className="flex flex-col gap-1 rounded-lg bg-zinc-100 p-1 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800">
<div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
<Image
src={user?.picture || user?.image}
alt={db.account.npub}
className="aspect-square h-full w-full rounded-md"
/>
<span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-400 ring-2 ring-zinc-50 dark:ring-zinc-950" />
<span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-400 ring-2 ring-neutral-50 dark:ring-neutral-950" />
</Link>
<div className="inline-flex items-center justify-center rounded-md">
<HorizontalDotsIcon className="h-4 w-4" />

6
src/shared/button.tsx
View File

@@ -16,15 +16,15 @@ export function Button({
switch (preset) {
case 'small':
preClass =
'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-interor-500';
'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-blue-600';
break;
case 'publish':
preClass =
'w-min h-9 px-4 bg-interor-500 rounded-md text-sm font-medium text-white hover:bg-interor-600';
'w-min h-9 px-4 bg-blue-500 rounded-md text-sm font-medium text-white hover:bg-blue-600';
break;
case 'large':
preClass =
'h-11 w-full bg-interor-500 rounded-lg font-medium text-white hover:bg-interor-600';
'h-11 w-full bg-blue-500 rounded-lg font-medium text-white hover:bg-blue-600';
break;
case 'large-alt':
preClass =

4
src/shared/composer/composer.tsx
View File

@@ -124,7 +124,7 @@ export function Composer() {
autoCorrect="off"
autoCapitalize="off"
className={twMerge(
'scrollbar-none markdown max-h-[500px] overflow-y-auto break-all pr-2 outline-none',
'markdown max-h-[500px] overflow-y-auto break-all pr-2 outline-none scrollbar-none',
expand ? 'min-h-[500px]' : reply.id ? 'min-h-min' : 'min-h-[120px]'
)}
/>
@@ -150,7 +150,7 @@ export function Composer() {
<button
onClick={() => submit()}
disabled={editor && editor.isEmpty}
className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-interor-500 px-2 font-semibold hover:bg-interor-600 disabled:opacity-50"
className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-blue-500 px-2 font-semibold hover:bg-blue-600 disabled:opacity-50"
>
{loading === true ? (
<LoaderIcon className="h-5 w-5 animate-spin text-white" />

12
src/shared/composer/modal.tsx
View File

@@ -28,7 +28,7 @@ export function ComposerModal() {
<Dialog.Trigger asChild>
<button
type="button"
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-zinc-300 hover:bg-interor-600 dark:bg-zinc-700 dark:hover:bg-interor-600"
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-neutral-300 hover:bg-blue-600 dark:bg-neutral-700 dark:hover:bg-blue-600"
>
<ComposeIcon className="h-5 w-5 text-black dark:text-white" />
</button>
@@ -38,15 +38,15 @@ export function ComposerModal() {
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div
className={twMerge(
'relative h-min w-full rounded-xl bg-zinc-100 dark:bg-zinc-900',
'relative h-min w-full rounded-xl bg-neutral-100 dark:bg-neutral-900',
expand ? 'max-w-4xl' : 'max-w-2xl'
)}
>
<div className="flex items-center justify-between px-4 py-4">
<div className="flex items-center gap-2">
<ComposerUser pubkey={db.account.pubkey} />
<ChevronRightIcon className="h-4 w-4 text-zinc-400 dark:text-zinc-600" />
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-zinc-200 pl-3 pr-1.5 text-sm font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100">
<ChevronRightIcon className="h-4 w-4 text-neutral-400 dark:text-neutral-600" />
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-neutral-200 pl-3 pr-1.5 text-sm font-medium text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100">
New Post
<ChevronDownIcon className="h-4 w-4" />
</div>
@@ -55,11 +55,11 @@ export function ComposerModal() {
<button
type="button"
onClick={() => toggleExpand()}
className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-200 hover:text-zinc-500 dark:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-400"
className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-400 hover:bg-neutral-200 hover:text-neutral-500 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-400"
>
<ExpandIcon className="h-5 w-5" />
</button>
<Dialog.Close className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-200 hover:text-zinc-500 dark:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-400">
<Dialog.Close className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-400 hover:bg-neutral-200 hover:text-neutral-500 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-400">
<CancelIcon className="h-5 w-5" />
</Dialog.Close>
</div>

2
src/shared/layouts/app.tsx
View File

@@ -5,7 +5,7 @@ import { Navigation } from '@shared/navigation';
export function AppLayout() {
return (
<div className="flex h-screen w-screen flex-col bg-zinc-50 dark:bg-zinc-950">
<div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
<WindowTitlebar />
<div className="flex h-full min-h-0 w-full">
<div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">

4
src/shared/layouts/auth.tsx
View File

@@ -3,9 +3,9 @@ import { WindowTitlebar } from 'tauri-controls';
export function AuthLayout() {
return (
<div className="relative h-screen w-screen bg-zinc-50 dark:bg-zinc-950">
<div className="relative h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
<WindowTitlebar />
<div className="bg-zinc-50 dark:bg-zinc-950">
<div className="bg-neutral-50 dark:bg-neutral-950">
<Outlet />
</div>
</div>

6
src/shared/layouts/settings.tsx
View File

@@ -8,7 +8,7 @@ export function SettingsLayout() {
<div className="flex h-screen w-screen">
<div className="relative flex h-full w-[232px] flex-col">
<div data-tauri-drag-region className="h-11 w-full shrink-0" />
<div className="scrollbar-none flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32">
<div className="flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32 scrollbar-none">
<div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4">
<Link
to="/"
@@ -27,7 +27,7 @@ export function SettingsLayout() {
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
? 'border-blue-500 bg-white/5 text-white'
: 'border-transparent text-white/80'
)
}
@@ -43,7 +43,7 @@ export function SettingsLayout() {
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
? 'border-blue-500 bg-white/5 text-white'
: 'border-transparent text-white/80'
)
}

2
src/shared/logout.tsx
View File

@@ -54,7 +54,7 @@ export function Logout() {
<button
type="button"
onClick={() => logout()}
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-blue-600"
>
Logout
</button>

2
src/shared/navigation.tsx
View File

@@ -126,7 +126,7 @@ export function Navigation() {
<ComposerModal />
<Link
to="/nwc"
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-zinc-100 hover:bg-interor-600 dark:bg-zinc-900 dark:hover:bg-interor-600"
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-blue-600 dark:bg-neutral-900 dark:hover:bg-blue-600"
>
<NwcIcon className="h-5 w-5" />
</Link>

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

@@ -45,7 +45,7 @@ export function NoteActions({
to={`/notes/text/${id}`}
className="group inline-flex h-7 w-7 items-center justify-center"
>
<FocusIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
<FocusIcon className="h-5 w-5 text-white/80 group-hover:text-blue-400" />
</Link>
</Tooltip.Trigger>
<Tooltip.Portal>
@@ -68,7 +68,7 @@ export function NoteActions({
}
className="group inline-flex h-7 w-7 items-center justify-center"
>
<ThreadIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
<ThreadIcon className="h-5 w-5 text-white/80 group-hover:text-blue-400" />
</button>
</Tooltip.Trigger>
<Tooltip.Portal>

4
src/shared/notes/actions/more.tsx
View File

@@ -30,9 +30,9 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<DropdownMenu.Trigger asChild>
<button
type="button"
className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
>
<HorizontalDotsIcon className="h-5 w-5 group-hover:text-interor-600" />
<HorizontalDotsIcon className="h-5 w-5 group-hover:text-blue-500" />
</button>
</DropdownMenu.Trigger>
</Tooltip.Trigger>

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

@@ -62,7 +62,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
<Popover.Trigger asChild>
<button
type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
>
{reaction ? (
<img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />

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

@@ -21,7 +21,7 @@ export function NoteReply({
<button
type="button"
onClick={() => setReply(id, pubkey, root)}
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
>
<ReplyIcon className="h-5 w-5 group-hover:text-green-500" />
</button>

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

@@ -44,7 +44,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<AlertDialog.Trigger asChild>
<button
type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
>
<RepostIcon
className={twMerge(
@@ -84,7 +84,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => submit()}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-blue-600"
>
{isLoading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-white" />

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

@@ -93,7 +93,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<Dialog.Trigger asChild>
<button
type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
>
<ZapIcon className="h-5 w-5 group-hover:text-orange-400" />
</button>
@@ -186,7 +186,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => createZapRequest()}
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium text-white hover:bg-interor-600"
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
>
{isCompleted ? (
<p>Successfully tipped</p>
@@ -210,7 +210,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => createZapRequest()}
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium hover:bg-interor-600"
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium hover:bg-blue-600"
>
<p>Create Lightning invoice</p>
</button>

2
src/shared/notes/child.tsx
View File

@@ -63,7 +63,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
Lume cannot find this post with your current relays, but you can view it
via njump.me.{' '}
<Link to={noteLink} className="text-fuchsia-500">
<Link to={noteLink} className="text-blue-500">
Learn more
</Link>
</div>

1
src/shared/notes/index.ts
View File

@@ -23,5 +23,6 @@ export * from './skeleton';
export * from './actions';
export * from './mentions/hashtag';
export * from './mentions/boost';
export * from './mentions/invoice';
export * from './stats';
export * from './wrapper';

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

@@ -61,7 +61,7 @@ export function FileNote(props: { event?: NDKEvent }) {
<Link
to={url}
target="_blank"
className="break-all font-normal text-fuchsia-500 hover:text-fuchsia-600"
className="break-all font-normal text-blue-500 hover:text-blue-500"
>
{url}
</Link>

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

@@ -65,7 +65,7 @@ export function Repost({
<div
className={twMerge(
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
!lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
)}
>
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
@@ -104,7 +104,7 @@ export function Repost({
<div
className={twMerge(
'relative overflow-hidden rounded-xl px-3 py-3',
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
!lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
)}
>
<div className="relative flex flex-col">
@@ -123,7 +123,7 @@ export function Repost({
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
Lume cannot find this post with your current relays, but you can view
it via njump.me.{' '}
<Link to={noteLink} className="text-fuchsia-500">
<Link to={noteLink} className="text-blue-500">
Learn more
</Link>
</div>
@@ -142,7 +142,7 @@ export function Repost({
<div
className={twMerge(
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
!lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
)}
>
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />

8
src/shared/notes/kinds/text.tsx
View File

@@ -6,6 +6,7 @@ import {
Boost,
Hashtag,
ImagePreview,
Invoice,
LinkPreview,
MentionNote,
MentionUser,
@@ -21,7 +22,7 @@ export function TextNote(props: { content?: string }) {
return (
<div>
<ReactMarkdown
className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2"
className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
remarkPlugins={[remarkGfm]}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
unwrapDisallowed={true}
@@ -36,7 +37,7 @@ export function TextNote(props: { content?: string }) {
return (
<div>
<ReactMarkdown
className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2"
className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
remarkPlugins={[remarkGfm]}
components={{
a: ({ href }) => {
@@ -60,6 +61,9 @@ export function TextNote(props: { content?: string }) {
if (key.startsWith('boost')) {
return <Boost boost={key.replace('boost-', '')} />;
}
if (key.startsWith('lnbc')) {
return <Invoice invoice={key.replace('lnbc-', '')} />;
}
},
}}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}

8
src/shared/notes/kinds/unknown.tsx
View File

@@ -3,15 +3,15 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
export function UnknownNote(props: { event?: NDKEvent }) {
return (
<div className="mt-2 flex w-full flex-col gap-2">
<div className="inline-flex flex-col rounded-md bg-zinc-200 px-2 py-2 dark:bg-zinc-800">
<span className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<div className="inline-flex flex-col rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
<span className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Kind: {props.event.kind}
</span>
<p className="text-sm text-zinc-800 dark:text-zinc-200">
<p className="text-sm text-neutral-800 dark:text-neutral-200">
Unsupport kind on newsfeed
</p>
</div>
<div className="select-text whitespace-pre-line break-all text-zinc-800 dark:text-zinc-200">
<div className="select-text whitespace-pre-line break-all text-neutral-800 dark:text-neutral-200">
<p>{props.event.content.toString()}</p>
</div>
</div>

4
src/shared/notes/mentions/boost.tsx
View File

@@ -1,5 +1,3 @@
export function Boost({ boost }: { boost: string }) {
return (
<span className="break-words text-fuchsia-400 hover:text-fuchsia-500">{boost}</span>
);
return <span className="break-words text-blue-400 hover:text-blue-500">{boost}</span>;
}

2
src/shared/notes/mentions/hashtag.tsx
View File

@@ -24,7 +24,7 @@ export function Hashtag({ tag }: { tag: string }) {
content: tag.replace('#', ''),
})
}
className="break-all text-interor-500 hover:text-interor-600"
className="break-all text-blue-500 hover:text-blue-500"
>
{tag}
</span>

9
src/shared/notes/mentions/invoice.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { QRCodeSVG } from 'qrcode.react';
export function Invoice({ invoice }: { invoice: string }) {
return (
<div className="mt-2 flex items-center rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800">
<QRCodeSVG value={invoice} includeMargin={true} className="rounded-lg" />
</div>
);
}

2
src/shared/notes/mentions/note.tsx
View File

@@ -71,7 +71,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
Lume cannot find this post with your current relays, but you can view it via
njump.me.{' '}
<Link to={noteLink} className="text-fuchsia-500">
<Link to={noteLink} className="text-blue-500">
Learn more
</Link>
</div>

2
src/shared/notes/mentions/user.tsx
View File

@@ -30,7 +30,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
content: pubkey,
})
}
className="break-words text-interor-500 hover:text-interor-600"
className="break-words text-blue-500 hover:text-blue-500"
>
{'@' +
(user?.name ||

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

@@ -31,7 +31,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
<p className="text-sm text-white/50">
Can&apos;t fetch open graph, click to open webpage
</p>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100">
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100">
{domain.hostname}
</span>
</div>
@@ -48,15 +48,15 @@ export function LinkPreview({ urls }: { urls: string[] }) {
/>
)}
<div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
<h5 className="line-clamp-1 text-base font-semibold text-zinc-900 dark:text-zinc-100">
<h5 className="line-clamp-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
{data.title}
</h5>
{data.description && (
<p className="line-clamp-3 break-all text-sm text-zinc-500 dark:text-zinc-400">
<p className="line-clamp-3 break-all text-sm text-neutral-500 dark:text-neutral-400">
{data.description}
</p>
)}
<span className="mt-2.5 text-sm text-zinc-500 dark:text-zinc-400">
<span className="mt-2.5 text-sm text-neutral-500 dark:text-neutral-400">
{domain.hostname}
</span>
</div>

2
src/shared/notes/replies/item.tsx
View File

@@ -7,7 +7,7 @@ export function Reply({ event, root }: { event: NDKEventWithReplies; root?: stri
return (
<div className="relative h-min w-full">
{event?.replies?.length > 0 && (
<div className="absolute -left-3 top-0 h-[calc(100%-1.2rem)] w-px bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300" />
<div className="absolute -left-3 top-0 h-[calc(100%-1.2rem)] w-px bg-gradient-to-t from-blue-200 via-red-200 to-orange-300" />
)}
<div className="relative z-10">
<div className="relative flex flex-col">

18
src/shared/notes/stats.tsx
View File

@@ -61,23 +61,23 @@ export function NoteStats({ id }: { id: string }) {
return (
<div className="mt-3 flex w-full flex-wrap gap-2">
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
<div className="flex flex-1 flex-col rounded-lg bg-neutral-100 px-3 py-2 dark:bg-neutral-900">
<div className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{compactNumber.format(data.reactions)}
</div>
<div className="text-sm text-zinc-500 dark:text-zinc-300">Reactions</div>
<div className="text-sm text-neutral-500 dark:text-neutral-300">Reactions</div>
</div>
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
<div className="flex flex-1 flex-col rounded-lg bg-neutral-100 px-3 py-2 dark:bg-neutral-900">
<div className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{compactNumber.format(data.reposts)}
</div>
<div className="text-sm text-zinc-500 dark:text-zinc-300">Reposts</div>
<div className="text-sm text-neutral-500 dark:text-neutral-300">Reposts</div>
</div>
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
<div className="flex flex-1 flex-col rounded-lg bg-neutral-100 px-3 py-2 dark:bg-neutral-900">
<div className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{compactNumber.format(data.zaps)}
</div>
<div className="text-sm text-zinc-500 dark:text-zinc-300">Zaps</div>
<div className="text-sm text-neutral-500 dark:text-neutral-300">Zaps</div>
</div>
</div>
);

2
src/shared/notes/wrapper.tsx
View File

@@ -24,7 +24,7 @@ export function NoteWrapper({
<div
className={twMerge(
'relative overflow-hidden rounded-xl px-3 py-4',
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
!lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
)}
>
<div className="relative">{root && <ChildNote id={root} />}</div>

4
src/shared/titleBar.tsx
View File

@@ -11,14 +11,14 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
return (
<div className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3">
<div className="w-6" />
<h3 className="text-sm font-medium tracking-wide text-zinc-900 dark:text-zinc-100">
<h3 className="text-sm font-medium tracking-wide text-neutral-900 dark:text-neutral-100">
{title}
</h3>
{id ? (
<button
type="button"
onClick={() => remove(db, id)}
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-zinc-900 backdrop-blur-xl hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-900"
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-neutral-900 backdrop-blur-xl hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
>
<CancelIcon className="h-3 w-3" />
</button>

38
src/shared/user.tsx
View File

@@ -84,14 +84,14 @@ export const User = memo(function User({
</Avatar.Fallback>
</Avatar.Root>
<div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name ||
user?.display_name ||
user?.displayName ||
displayNpub(pubkey, 16)}
</h5>
<span className="text-zinc-500 dark:text-zinc-300">·</span>
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
<span className="text-neutral-500 dark:text-neutral-300">·</span>
<span className="text-neutral-500 dark:text-neutral-300">{createdAt}</span>
</div>
</div>
);
@@ -119,7 +119,7 @@ export const User = memo(function User({
</Avatar.Root>
<div className="flex h-full flex-col items-start justify-between">
<div className="flex flex-col items-start gap-1 text-start">
<p className="max-w-[15rem] truncate text-lg font-semibold text-zinc-900 dark:text-zinc-100">
<p className="max-w-[15rem] truncate text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || user?.display_name || user?.displayName}
</p>
<ReactMarkdown
@@ -137,7 +137,7 @@ export const User = memo(function User({
<Link
to={user?.website}
target="_blank"
className="inline-flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100/70"
className="inline-flex items-center gap-2 text-sm text-neutral-900 dark:text-neutral-100/70"
>
<WorldIcon className="h-4 w-4" />
<p className="max-w-[10rem] truncate">{user?.website}</p>
@@ -170,10 +170,10 @@ export const User = memo(function User({
</Avatar.Fallback>
</Avatar.Root>
<div className="flex w-full flex-col items-start">
<h3 className="max-w-[15rem] truncate font-medium text-zinc-900 dark:text-zinc-100">
<h3 className="max-w-[15rem] truncate font-medium text-neutral-900 dark:text-neutral-100">
{user?.name || user?.display_name || user?.displayName}
</h3>
<p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/70">
<p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/70">
{user?.nip05 || user?.username || displayNpub(pubkey, 16)}
</p>
</div>
@@ -250,7 +250,7 @@ export const User = memo(function User({
</Avatar.Fallback>
</Avatar.Root>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[10rem] truncate font-medium text-zinc-900 dark:text-zinc-100/80">
<h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100/80">
{user?.name ||
user?.display_name ||
user?.displayName ||
@@ -284,10 +284,10 @@ export const User = memo(function User({
</Avatar.Fallback>
</Avatar.Root>
<div className="flex flex-1 flex-col">
<h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
<h5 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || user?.display_name || user?.displayName || 'Anon'}
</h5>
<div className="inline-flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-300">
<div className="inline-flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-300">
<span>{createdAt}</span>
<span>·</span>
<span>{displayNpub(pubkey, 16)}</span>
@@ -320,19 +320,19 @@ export const User = memo(function User({
</Avatar.Root>
</HoverCard.Trigger>
<div className="flex flex-1 items-center gap-2">
<h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
<h5 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name ||
user?.display_name ||
user?.displayName ||
displayNpub(pubkey, 16)}
</h5>
<span className="text-zinc-500 dark:text-zinc-300">·</span>
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
<span className="text-neutral-500 dark:text-neutral-300">·</span>
<span className="text-neutral-500 dark:text-neutral-300">{createdAt}</span>
</div>
</div>
<HoverCard.Portal>
<HoverCard.Content
className="w-[300px] overflow-hidden rounded-xl border border-white/10 bg-white/10 backdrop-blur-3xl focus:outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all"
className="w-[300px] overflow-hidden rounded-xl border border-white/10 bg-white/10 backdrop-blur-3xl data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all focus:outline-none"
sideOffset={5}
>
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
@@ -365,16 +365,16 @@ export const User = memo(function User({
<NIP05
pubkey={pubkey}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300"
className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-300"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300">
<span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-300">
{displayNpub(pubkey, 16)}
</span>
)}
</div>
<div>
<p className="line-clamp-3 break-all text-sm leading-tight text-zinc-900 dark:text-zinc-100">
<p className="line-clamp-3 break-all text-sm leading-tight text-neutral-900 dark:text-neutral-100">
{user?.about}
</p>
</div>
@@ -383,13 +383,13 @@ export const User = memo(function User({
<div className="flex items-center gap-2 px-3 py-3">
<Link
to={`/users/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-blue-600"
>
View profile
</Link>
<Link
to={`/chats/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-blue-600"
>
Message
</Link>

6
src/shared/userProfile.tsx
View File

@@ -62,7 +62,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => unfollowUser(pubkey)}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
>
Unfollow
</button>
@@ -70,14 +70,14 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => followUser(pubkey)}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
>
Follow
</button>
)}
<Link
to={`/chats/${pubkey}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
>
Message
</Link>

12
src/shared/widgets/eventLoader.tsx
View File

@@ -42,29 +42,29 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
return (
<div className="mb-3 px-3">
<div className="h-max w-full rounded-lg bg-zinc-100 p-3 dark:bg-zinc-900">
<div className="h-max w-full rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
<div className="flex flex-col items-center gap-3">
{firstTime ? (
<div>
<span className="text-4xl">👋</span>
<h3 className="mt-2 font-semibold leading-tight text-zinc-100 dark:text-zinc-900">
<h3 className="mt-2 font-semibold leading-tight text-neutral-100 dark:text-neutral-900">
Hello, this is the first time you&apos;re using Lume
</h3>
<p className="text-sm text-zinc-500">
<p className="text-sm text-neutral-500">
Lume is downloading all events since the last 24 hours. It will auto
refresh when it done, please be patient
</p>
</div>
) : (
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
Downloading all events while you&apos;re away...
</h3>
</div>
)}
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800">
<div
className="flex flex-col justify-center overflow-hidden bg-interor-600 transition-all duration-1000 ease-smooth"
className="flex flex-col justify-center overflow-hidden bg-blue-500 transition-all duration-1000 ease-smooth"
role="progressbar"
style={{ width: `${progress}%` }}
/>

8
src/shared/widgets/global/articles.tsx
View File

@@ -47,7 +47,7 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading article...
</p>
</div>
@@ -57,17 +57,17 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no articles.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item) => renderItem(item))}
<div className="h-16" />
</VList>

8
src/shared/widgets/global/files.tsx
View File

@@ -49,7 +49,7 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading file sharing event...
</p>
</div>
@@ -59,17 +59,17 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no file sharing events.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item) => renderItem(item))}
<div className="h-16" />
</VList>

8
src/shared/widgets/global/hashtag.tsx
View File

@@ -79,7 +79,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading event related to the hashtag {params.title}...
</p>
</div>
@@ -89,17 +89,17 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no events related to {params.title}.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget or try with other hashtag
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item) => renderItem(item))}
<div className="h-16" />
</VList>

16
src/shared/widgets/local/articles.tsx
View File

@@ -49,7 +49,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading article...
</p>
</div>
@@ -59,38 +59,38 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no articles.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? (
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<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" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

16
src/shared/widgets/local/feeds.tsx
View File

@@ -85,7 +85,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading newsfeed...
</p>
</div>
@@ -95,38 +95,38 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no posts.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? (
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<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" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

16
src/shared/widgets/local/files.tsx
View File

@@ -49,7 +49,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading file sharing event...
</p>
</div>
@@ -59,38 +59,38 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no file sharing events.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? (
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<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" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

16
src/shared/widgets/local/follows.tsx
View File

@@ -84,7 +84,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading post...
</p>
</div>
@@ -94,38 +94,38 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no posts.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? (
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<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" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

12
src/shared/widgets/local/network.tsx
View File

@@ -106,14 +106,14 @@ export function LocalNetworkWidget() {
<div className="flex-1">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />
</div>
</div>
) : dbEvents.length === 0 ? (
<EventLoader firstTime={true} />
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{!isFetched ? <EventLoader firstTime={false} /> : null}
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
@@ -121,21 +121,21 @@ export function LocalNetworkWidget() {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<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" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

6
src/shared/widgets/local/thread.tsx
View File

@@ -44,16 +44,16 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="scrollbar-none h-full overflow-y-auto">
<div className="h-full overflow-y-auto scrollbar-none">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />
</div>
</div>
) : (
<div className="h-min w-full px-3">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div className="mt-2">{renderKind(data)}</div>
<NoteActions

10
src/shared/widgets/local/user.tsx
View File

@@ -81,26 +81,26 @@ export function LocalUserWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="scrollbar-none h-full overflow-y-auto">
<div className="h-full overflow-y-auto scrollbar-none">
<div className="px-3 pt-1.5">
<UserProfile pubkey={params.content} />
</div>
<div>
<h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
<h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />
</div>
</div>
) : data.length === 0 ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-zinc-100 px-3 py-6 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-6 dark:bg-neutral-900">
<div className="flex flex-col items-center gap-4">
<p className="text-center text-sm text-zinc-900 dark:text-zinc-100">
<p className="text-center text-sm text-neutral-900 dark:text-neutral-100">
No new post from 24 hours ago
</p>
</div>

6
src/shared/widgets/nostrBand/trendingAccounts.tsx
View File

@@ -40,7 +40,7 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-300">
Loading trending accounts...
</p>
</div>
@@ -50,14 +50,14 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
Sorry, an unexpected error has occurred.
</h3>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item: Profile) => (
<NostrBandUserProfile key={item.pubkey} data={item} />
))}

6
src/shared/widgets/nostrBand/trendingNotes.tsx
View File

@@ -41,7 +41,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-300">
Loading trending posts...
</p>
</div>
@@ -51,14 +51,14 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
Sorry, an unexpected error has occurred.
</h3>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item) => (
<NoteWrapper key={item.event.id} event={item.event}>
<TextNote content={item.event.content} />

26
src/shared/widgets/nostrBandUserProfile.tsx
View File

@@ -65,7 +65,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
if (!profile) {
return (
<div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-5 py-5 dark:bg-neutral-900">
<p>Can&apos;t fetch profile</p>
</div>
);
@@ -73,7 +73,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
return (
<div className="h-min w-full px-3 pb-3">
<div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-5 py-5 dark:bg-neutral-900">
<div className="flex items-center justify-between">
<div className="inline-flex items-center gap-2">
<Image
@@ -81,10 +81,10 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
className="h-11 w-11 shrink-0 rounded-lg object-cover"
/>
<div className="inline-flex flex-col">
<h3 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
<h3 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{profile.display_name || profile.name}
</h3>
<p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/50">
<p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/50">
{profile.nip05 || shortenKey(data.pubkey)}
</p>
</div>
@@ -94,7 +94,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button
type="button"
onClick={() => unfollowUser(data.pubkey)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-200 text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-white dark:bg-neutral-800 dark:text-neutral-100 dark:hover:text-white"
>
<UnfollowIcon className="h-4 w-4" />
</button>
@@ -102,7 +102,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button
type="button"
onClick={() => followUser(data.pubkey)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-200 text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-white dark:bg-neutral-800 dark:text-neutral-100 dark:hover:text-white"
>
<FollowIcon className="h-4 w-4" />
</button>
@@ -110,7 +110,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
</div>
</div>
<div className="mt-2">
<p className="whitespace-pre-line break-words text-zinc-900 dark:text-zinc-100">
<p className="whitespace-pre-line break-words text-neutral-900 dark:text-neutral-100">
{profile.about || profile.bio}
</p>
</div>
@@ -120,30 +120,30 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
) : (
<div className="flex w-full items-center gap-8">
<div className="inline-flex flex-col gap-1">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
{userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
</span>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
Followers
</span>
</div>
<div className="inline-flex flex-col gap-1">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
{userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
</span>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
Following
</span>
</div>
<div className="inline-flex flex-col gap-1">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
{userStats.stats[data.pubkey].zaps_received
? compactNumber.format(
userStats.stats[data.pubkey].zaps_received.msats / 1000
)
: 0}
</span>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
Zaps received
</span>
</div>

18
src/shared/widgets/other/learnNostr.tsx
View File

@@ -24,10 +24,10 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title="The Joy of Nostr" />
<div className="scrollbar-none h-full overflow-y-auto px-3 pb-20">
<div className="h-full overflow-y-auto px-3 pb-20 scrollbar-none">
{resources.map((resource, index) => (
<div key={index} className="mb-6">
<h3 className="mb-2 text-sm font-medium text-zinc-500 dark:text-zinc-400">
<h3 className="mb-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
{resource.title}
</h3>
<div className="flex flex-col gap-2">
@@ -37,24 +37,26 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
key={index}
type="button"
onClick={() => open(item.id)}
className="flex items-center justify-between rounded-xl bg-zinc-100 px-4 py-3 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800"
className="flex items-center justify-between rounded-xl bg-neutral-100 px-4 py-3 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
<div className="flex flex-col items-start">
<h5 className="font-semibold text-zinc-900 dark:text-zinc-100">
<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
{item.title}
</h5>
{seens.has(item.id) ? (
<p className="text-sm text-green-500">Readed</p>
) : (
<p className="text-sm text-zinc-500 dark:text-zinc-400">Unread</p>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
Unread
</p>
)}
</div>
<ArrowRightIcon className="h-5 w-5 text-zinc-100 dark:text-zinc-900" />
<ArrowRightIcon className="h-5 w-5 text-neutral-100 dark:text-neutral-900" />
</button>
))
) : (
<div className="flex h-14 items-center justify-center rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
<div className="flex h-14 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
More resources are coming, stay tuned.
</p>
</div>

12
src/shared/widgets/tmp/feeds.tsx
View File

@@ -44,7 +44,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
return (
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
<div className="w-full px-5">
<h3 className="mb-4 text-center font-semibold text-zinc-900 dark:text-zinc-100">
<h3 className="mb-4 text-center font-semibold text-neutral-900 dark:text-neutral-100">
Choose account you want to add to group feeds
</h3>
<div className="mb-0 flex flex-col gap-2">
@@ -53,16 +53,16 @@ export function XfeedsWidget({ params }: { params: Widget }) {
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-300"
className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-300"
/>
</div>
<div className="scrollbar-none flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-zinc-200 py-2 dark:bg-zinc-800">
<div className="flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-neutral-200 py-2 scrollbar-none dark:bg-neutral-800">
{db.account.network.map((item: string) => (
<button
key={item}
type="button"
onClick={() => toggleGroup(item)}
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-zinc-300 dark:hover:bg-zinc-700"
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-neutral-300 dark:hover:bg-neutral-700"
>
<User pubkey={item} variant="simple" />
{groups.includes(item) && (
@@ -78,7 +78,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
type="submit"
disabled={groups.length < 1}
onClick={submit}
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"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
>
<span className="w-5" />
<span>Add {groups.length} account to group feed</span>
@@ -87,7 +87,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
<button
type="button"
onClick={cancel}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-zinc-900 hover:bg-zinc-200 focus:outline-none disabled:opacity-50 dark:text-zinc-100 dark:hover:bg-zinc-800"
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-neutral-900 hover:bg-neutral-200 focus:outline-none disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-800"
>
Cancel
</button>

6
src/shared/widgets/tmp/hashtag.tsx
View File

@@ -72,7 +72,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<input
{...register('hashtag', { required: true, minLength: 1 })}
placeholder="#bitcoin"
className="relative h-12 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-300"
className="relative h-12 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-300"
/>
<span className="text-sm text-red-400">
{errors.hashtag && <p>{errors.hashtag.message}</p>}
@@ -82,7 +82,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
>
<span className="w-5" />
<span>Create</span>
@@ -91,7 +91,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<button
type="button"
onClick={cancel}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-zinc-900 hover:bg-zinc-200 focus:outline-none disabled:opacity-50 dark:text-zinc-100 dark:hover:bg-zinc-800"
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-neutral-900 hover:bg-neutral-200 focus:outline-none disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-800"
>
Cancel
</button>

2
src/shared/widgets/wrapper.tsx
View File

@@ -21,7 +21,7 @@ export function WidgetWrapper({
minWidth={420}
minHeight={'100vh'}
className={twMerge(
'h-full border-r border-zinc-100 pb-10 dark:border-zinc-900',
'h-full border-r border-neutral-100 pb-10 dark:border-neutral-900',
className
)}
enable={{ right: true }}