nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-29 16:30:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

update zap modal to match new ui

Browse Source
This commit is contained in:
Ren Amamiya 2023-08-13 15:30:33 +07:00
parent 3b02b3f554
commit 33fd7512e7
3 changed files with 35 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/main.yml vendored
View File

@ -2,7 +2,7 @@ name: 'publish'
on: on:
push: push:
branches: branches:
- release - main
env: env:
CARGO_INCREMENTAL: 0 CARGO_INCREMENTAL: 0

BIN
public/zap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

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

@ -35,14 +35,14 @@ export function NoteZap({ id }: { id: string }) {
type="button" type="button"
className="group inline-flex h-7 w-7 items-center justify-center" className="group inline-flex h-7 w-7 items-center justify-center"
> >
<ZapIcon className="h-5 w-5 text-zinc-300 group-hover:text-orange-400" /> <ZapIcon className="h-5 w-5 text-white group-hover:text-orange-400" />
</button> </button>
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal className="relative z-10"> <Dialog.Portal className="relative z-10">
<Dialog.Overlay className="fixed inset-0 z-[1000px] bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" /> <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center data-[state=open]:animate-contentShow"> <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<Dialog.Content className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900"> <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
<div className="relative h-min w-full shrink-0 border-b border-zinc-800 px-5 py-3"> <div className="relative h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
<div className="flex flex-col items-center gap-1.5"> <div className="flex flex-col items-center gap-1.5">
<Dialog.Title className="font-medium leading-none text-white"> <Dialog.Title className="font-medium leading-none text-white">
Zap (Beta) Zap (Beta)
@ -51,16 +51,11 @@ export function NoteZap({ id }: { id: string }) {
Send tip with Bitcoin via Lightning Send tip with Bitcoin via Lightning
</Dialog.Description> </Dialog.Description>
</div> </div>
<Dialog.Close asChild> <Dialog.Close className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
<button <CancelIcon className="h-4 w-4 text-white/50" />
type="button"
className="absolute right-3 top-3 inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
>
<CancelIcon className="h-4 w-4 text-zinc-300" />
</button>
</Dialog.Close> </Dialog.Close>
</div> </div>
<div className="overflow-y-auto overflow-x-hidden px-5 pb-5"> <div className="overflow-y-auto overflow-x-hidden px-5 py-5">
{!invoice ? ( {!invoice ? (
<> <>
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
@ -68,16 +63,12 @@ export function NoteZap({ id }: { id: string }) {
type="button" type="button"
onClick={() => setAmount(21000)} onClick={() => setAmount(21000)}
className={twMerge( className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800', 'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(21000) && 'bg-zinc-800'}` `${selected(21000) && 'bg-white/10'}`
)} )}
> >
<img <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
className="h-12 w-12" <span className="text-sm font-medium leading-none text-white/80">
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
alt="High Voltage"
/>
<span className="text-sm font-medium leading-none text-zinc-200">
21 sats 21 sats
</span> </span>
</button> </button>
@ -85,16 +76,12 @@ export function NoteZap({ id }: { id: string }) {
type="button" type="button"
onClick={() => setAmount(69000)} onClick={() => setAmount(69000)}
className={twMerge( className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800', 'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(69000) && 'bg-zinc-800'}` `${selected(69000) && 'bg-white/10'}`
)} )}
> >
<img <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
className="h-12 w-12" <span className="text-sm font-medium leading-none text-white/80">
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
alt="High Voltage"
/>
<span className="text-sm font-medium leading-none text-zinc-200">
69 sats 69 sats
</span> </span>
</button> </button>
@ -102,16 +89,12 @@ export function NoteZap({ id }: { id: string }) {
type="button" type="button"
onClick={() => setAmount(100000)} onClick={() => setAmount(100000)}
className={twMerge( className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800', 'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(100000) && 'bg-zinc-800'}` `${selected(100000) && 'bg-white/10'}`
)} )}
> >
<img <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
className="h-12 w-12" <span className="text-sm font-medium leading-none text-white/80">
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
alt="High Voltage"
/>
<span className="text-sm font-medium leading-none text-zinc-200">
100 sats 100 sats
</span> </span>
</button> </button>
@ -119,16 +102,12 @@ export function NoteZap({ id }: { id: string }) {
type="button" type="button"
onClick={() => setAmount(200000)} onClick={() => setAmount(200000)}
className={twMerge( className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800', 'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(200000) && 'bg-zinc-800'}` `${selected(200000) && 'bg-white/10'}`
)} )}
> >
<img <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
className="h-12 w-12" <span className="text-sm font-medium leading-none text-white/80">
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
alt="High Voltage"
/>
<span className="text-sm font-medium leading-none text-zinc-200">
200 sats 200 sats
</span> </span>
</button> </button>
@ -136,16 +115,12 @@ export function NoteZap({ id }: { id: string }) {
type="button" type="button"
onClick={() => setAmount(500000)} onClick={() => setAmount(500000)}
className={twMerge( className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800', 'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(500000) && 'bg-zinc-800'}` `${selected(500000) && 'bg-white/10'}`
)} )}
> >
<img <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
className="h-12 w-12" <span className="text-sm font-medium leading-none text-white/80">
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
alt="High Voltage"
/>
<span className="text-sm font-medium leading-none text-zinc-200">
500 sats 500 sats
</span> </span>
</button> </button>
@ -153,16 +128,12 @@ export function NoteZap({ id }: { id: string }) {
type="button" type="button"
onClick={() => setAmount(1000000)} onClick={() => setAmount(1000000)}
className={twMerge( className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800', 'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(1000000) && 'bg-zinc-800'}` `${selected(1000000) && 'bg-white/10'}`
)} )}
> >
<img <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
className="h-12 w-12" <span className="text-sm font-medium leading-none text-white/80">
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
alt="High Voltage"
/>
<span className="text-sm font-medium leading-none text-zinc-200">
1000 sats 1000 sats
</span> </span>
</button> </button>
@ -191,8 +162,8 @@ export function NoteZap({ id }: { id: string }) {
</div> </div>
)} )}
</div> </div>
</Dialog.Content> </div>
</div> </Dialog.Content>
</Dialog.Portal> </Dialog.Portal>
</Dialog.Root> </Dialog.Root>
); );