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/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>