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

wip: ui

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

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

@@ -28,7 +28,7 @@ export function NoteActions({
return (
<Tooltip.Provider>
<div className="-ml-1 mt-2 inline-flex w-full items-center">
<div className="-ml-1 mt-3 inline-flex w-full items-center">
<div className="inline-flex items-center gap-2">
<NoteReply id={id} pubkey={pubkey} root={root} />
<NoteReaction id={id} pubkey={pubkey} />

10
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-white/80"
className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
>
<HorizontalDotsIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
<HorizontalDotsIcon className="h-5 w-5 group-hover:text-interor-600" />
</button>
</DropdownMenu.Trigger>
</Tooltip.Trigger>
@@ -49,7 +49,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => copyLink()}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
>
Copy shareable link
</button>
@@ -58,7 +58,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => copyID()}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
>
Copy ID
</button>
@@ -66,7 +66,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<DropdownMenu.Item asChild>
<Link
to={`/users/${pubkey}`}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
>
View profile
</Link>

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

@@ -62,12 +62,12 @@ 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-white/80"
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
>
{reaction ? (
<img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
) : (
<ReactionIcon className="h-5 w-5 text-white/80 group-hover:text-red-400" />
<ReactionIcon className="h-5 w-5 group-hover:text-red-400" />
)}
</button>
</Popover.Trigger>

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

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

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

@@ -44,12 +44,12 @@ 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-white/80"
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
>
<RepostIcon
className={twMerge(
'h-5 w-5 group-hover:text-blue-500',
isRepost ? 'text-blue-500' : 'text-white/80'
isRepost ? 'text-blue-500' : ''
)}
/>
</button>
@@ -62,7 +62,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
<AlertDialog.Portal className="relative z-10">
<AlertDialog.Portal>
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl">
@@ -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-fuchsia-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-interor-500"
>
{isLoading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-white" />

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

@@ -93,9 +93,9 @@ 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-white/80"
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
>
<ZapIcon className="h-5 w-5 text-white/80 group-hover:text-orange-400" />
<ZapIcon className="h-5 w-5 group-hover:text-orange-400" />
</button>
</Dialog.Trigger>
<Dialog.Portal>
@@ -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-fuchsia-500 px-4 font-medium text-white hover:bg-fuchsia-600"
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"
>
{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-fuchsia-500 px-4 font-medium hover:bg-fuchsia-600"
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium hover:bg-interor-600"
>
<p>Create Lightning invoice</p>
</button>

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

@@ -21,7 +21,7 @@ export function TextNote(props: { content?: string }) {
return (
<div>
<ReactMarkdown
className="markdown"
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"
remarkPlugins={[remarkGfm]}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
unwrapDisallowed={true}