Darken zap dialog and add send control

This commit is contained in:
thePR0M3TH3AN committed 2025-10-05 18:45:03 -04:00
1 parent 0fd54abde8
commit 8fd5ce3c88
6 files changed
+157 -52

No files matched your search

+46 -32
View File
@@ -53,7 +53,7 @@
aria-label="Channel zap dialog"
>
<div
class="zap-popover__content w-72 max-w-[calc(100vw-2rem)] rounded-lg bg-gray-900/95 p-4 shadow-lg backdrop-blur"
class="zap-popover__content w-72 max-w-[calc(100vw-2rem)] rounded-lg p-4 shadow-lg"
>
<div class="mb-3 flex items-center justify-between gap-4">
<h3
@@ -85,37 +85,51 @@
</button>
to send zaps.
</p>
<label
for="zapAmountInput"
id="zapAmountLabel"
class="mb-2 block text-xs font-semibold uppercase tracking-wide text-gray-300"
>
Zap amount (sats)
</label>
<input
id="zapAmountInput"
type="number"
min="1"
step="1"
inputmode="numeric"
class="w-full rounded border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-gray-100 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400"
placeholder="Enter sats"
aria-labelledby="zapAmountLabel"
/>
<p
id="zapSplitSummary"
class="mt-3 text-sm text-gray-300"
aria-live="polite"
>
Enter an amount to view the split.
</p>
<p
id="zapStatus"
class="mt-2 text-xs text-gray-400"
role="status"
aria-live="polite"
></p>
<ul id="zapReceipts" class="mt-3 space-y-2 text-xs text-gray-300"></ul>
<form id="zapForm" class="space-y-3">
<div>
<label
for="zapAmountInput"
id="zapAmountLabel"
class="mb-2 block text-xs font-semibold uppercase tracking-wide text-gray-300"
>
Zap amount (sats)
</label>
<input
id="zapAmountInput"
type="number"
min="1"
step="1"
inputmode="numeric"
class="w-full rounded border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-gray-100 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400"
placeholder="Enter sats"
aria-labelledby="zapAmountLabel"
/>
</div>
<p
id="zapSplitSummary"
class="text-sm text-gray-300"
aria-live="polite"
>
Enter an amount to view the split.
</p>
<p
id="zapStatus"
class="text-xs text-gray-400"
role="status"
aria-live="polite"
></p>
<ul id="zapReceipts" class="space-y-2 text-xs text-gray-300"></ul>
<div class="flex items-center justify-end gap-2">
<button
type="submit"
id="zapSendBtn"
class="rounded bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
aria-label="Send a zap"
>
Send
</button>
</div>
</form>
</div>
</div>
</div>