diff --git a/package-lock.json b/package-lock.json index 5720229d..5f3c1d06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "imwald", - "version": "23.13.8", + "version": "23.15.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "imwald", - "version": "23.13.8", + "version": "23.15.1", "license": "MIT", "dependencies": { "@asciidoctor/core": "^3.0.4", diff --git a/package.json b/package.json index bf1988de..2eef8234 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "imwald", - "version": "23.15.0", + "version": "23.15.1", "description": "Imwald — a user-friendly Nostr client focused on relay feed browsing, publications, and relay discovery", "private": true, "type": "module", diff --git a/src/components/Note/Superchat.tsx b/src/components/Note/Superchat.tsx index d78e6a5a..c57bd214 100644 --- a/src/components/Note/Superchat.tsx +++ b/src/components/Note/Superchat.tsx @@ -4,6 +4,7 @@ import { openNoteFromFetchOrCache } from '@/lib/navigation-related-events' import { parsePaytoTagType } from '@/lib/payto' import { relayHintsFromEventTags } from '@/lib/relay-list-builder' import { getPaymentNotificationInfo, getSuperchatReferenceFetchId } from '@/lib/superchat' +import { superchatTitleClass } from '@/lib/superchat-ui' import { toProfile } from '@/lib/link' import { cn } from '@/lib/utils' import { Event } from 'nostr-tools' @@ -137,7 +138,7 @@ export default function Superchat({ className="px-2.5 py-1.5 text-lg" imgClassName="size-5" /> - {t('Superchat')} + {t('Superchat')} ) : ( diff --git a/src/components/Note/Zap.tsx b/src/components/Note/Zap.tsx index 4112edde..07db65c2 100644 --- a/src/components/Note/Zap.tsx +++ b/src/components/Note/Zap.tsx @@ -6,6 +6,7 @@ import { formatAmount } from '@/lib/lightning' import { openNoteFromFetchOrCache } from '@/lib/navigation-related-events' import { relayHintsFromEventTags } from '@/lib/relay-list-builder' import { getSuperchatPaytoType } from '@/lib/superchat' +import { superchatTitleClass } from '@/lib/superchat-ui' import { toProfile } from '@/lib/link' import { cn } from '@/lib/utils' import { Event } from 'nostr-tools' @@ -161,7 +162,7 @@ export default function Zap({ className="px-2.5 py-1.5 text-lg" imgClassName="size-5" /> - {t('Superchat')} + {t('Superchat')} {amount != null ? ( {formatAmount(amount)} {t('sats')} diff --git a/src/components/PaytoDialog/LightningInvoiceSection.tsx b/src/components/PaytoDialog/LightningInvoiceSection.tsx index 469ac478..46dcb0df 100644 --- a/src/components/PaytoDialog/LightningInvoiceSection.tsx +++ b/src/components/PaytoDialog/LightningInvoiceSection.tsx @@ -13,6 +13,7 @@ import { parseGroupedIntegerInput } from '@/lib/lightning' import { buildPaytoUri, formatPaytoTagValue } from '@/lib/payto' +import { superchatLightningAccentClass } from '@/lib/superchat-ui' import { cn } from '@/lib/utils' import { useZap } from '@/providers/ZapProvider' import lightning from '@/services/lightning.service' @@ -211,7 +212,7 @@ export default function LightningInvoiceSection({ size="default" className={cn( 'h-10 min-w-0 px-1.5 text-sm tabular-nums sm:text-base', - active && 'ring-1 ring-yellow-400/50' + active && 'ring-1 ring-amber-600/45 dark:ring-yellow-400/50' )} onClick={() => setSats(preset)} > @@ -268,7 +269,7 @@ export default function LightningInvoiceSection({ {creating ? ( ) : ( - + )} {t('Create invoice')} diff --git a/src/components/PaytoDialog/index.tsx b/src/components/PaytoDialog/index.tsx index 5f9032bb..7f992d25 100644 --- a/src/components/PaytoDialog/index.tsx +++ b/src/components/PaytoDialog/index.tsx @@ -31,6 +31,7 @@ import { resolvePaytoPaymentOpenHandlers, resolvePaytoProfileUrl } from '@/lib/payto' +import { superchatLightningAccentClass } from '@/lib/superchat-ui' import { cn } from '@/lib/utils' import { useNostr } from '@/providers/NostrProvider' import { mergePostPaymentContext, type PostPaymentContext } from '@/lib/post-payment-context' @@ -194,7 +195,7 @@ export default function PaytoDialog({ > - {isLightning && } + {isLightning && } {label} diff --git a/src/components/PaytoTypeIcon/index.tsx b/src/components/PaytoTypeIcon/index.tsx index b3ad8023..2a47c27a 100644 --- a/src/components/PaytoTypeIcon/index.tsx +++ b/src/components/PaytoTypeIcon/index.tsx @@ -4,6 +4,7 @@ import { getPaytoLogoPath, isLightningPaytoType } from '@/lib/payto' +import { superchatLightningAccentClass } from '@/lib/superchat-ui' import { cn } from '@/lib/utils' import { HelpCircle, Zap as ZapIcon } from 'lucide-react' @@ -27,7 +28,10 @@ export default function PaytoTypeIcon({ aria-hidden > {isLightning ? ( - + ) : logoPath ? ( ) : iconChar != null ? ( diff --git a/src/components/Profile/ProfileWallSuperchats.tsx b/src/components/Profile/ProfileWallSuperchats.tsx index a51f5107..1dc6b1e3 100644 --- a/src/components/Profile/ProfileWallSuperchats.tsx +++ b/src/components/Profile/ProfileWallSuperchats.tsx @@ -1,6 +1,7 @@ import Superchat from '@/components/Note/Superchat' import Zap from '@/components/Note/Zap' import { ExtendedKind } from '@/constants' +import { superchatSectionHeadingClass } from '@/lib/superchat-ui' import { cn } from '@/lib/utils' import { Skeleton } from '@/components/ui/skeleton' import { Event } from 'nostr-tools' @@ -34,7 +35,7 @@ export default function ProfileWallSuperchats({ return (
-

+

{t('Superchats')}

@@ -120,8 +125,7 @@ function TurnIntoSuperchatButtonInner({ type="button" variant={prominent ? 'default' : 'secondary'} className={cn( - prominent && - 'h-auto min-h-11 w-full gap-2 border-yellow-400/50 bg-yellow-400/20 py-2.5 text-base font-semibold text-yellow-100 shadow-[0_0_16px_rgba(250,204,21,0.25)] hover:bg-yellow-400/30', + prominent && superchatProminentButtonClass, className )} disabled={checking || publishing} diff --git a/src/components/ZapDialog/ZapSatsAmountInput.tsx b/src/components/ZapDialog/ZapSatsAmountInput.tsx index 4ad9f279..d6c81761 100644 --- a/src/components/ZapDialog/ZapSatsAmountInput.tsx +++ b/src/components/ZapDialog/ZapSatsAmountInput.tsx @@ -5,6 +5,7 @@ import { shouldHighlightLeadingSatsGroups, splitSatsGroupedParts } from '@/lib/lightning' +import { superchatSatsLeadingHighlightClass } from '@/lib/superchat-ui' import { cn } from '@/lib/utils' const inputTypography = @@ -35,7 +36,7 @@ export default function ZapSatsAmountInput({ {parts.map((part, index) => ( {part} diff --git a/src/components/ZapDialog/index.tsx b/src/components/ZapDialog/index.tsx index e8c6cf13..4f18945f 100644 --- a/src/components/ZapDialog/index.tsx +++ b/src/components/ZapDialog/index.tsx @@ -23,6 +23,7 @@ import { useZap } from '@/providers/ZapProvider' import { useBtcUsdRate } from '@/hooks/useBtcUsdRate' import { clampZapSats, formatSatsGrouped, shouldHighlightLeadingSatsGroups } from '@/lib/lightning' import { formatBtcFromSats, formatUsdFromSats } from '@/lib/sats-fiat' +import { superchatAmountHighlightClass, superchatLightningAccentClass } from '@/lib/superchat-ui' import { cn } from '@/lib/utils' import lightning from '@/services/lightning.service' import noteStatsService from '@/services/note-stats.service' @@ -482,8 +483,7 @@ function ZapDialogContent({ > {btcEquivalent} @@ -537,7 +537,7 @@ function ZapDialogContent({ id="zap-lightning-address" className="flex min-w-0 items-center gap-2 text-sm text-muted-foreground" > - + {lightningAddressOptions[0]} @@ -548,7 +548,10 @@ function ZapDialogContent({ {selectedLightning ? ( - + {selectedLightning} @@ -560,7 +563,10 @@ function ZapDialogContent({ {lightningAddressOptions.map((addr) => ( - + {addr} diff --git a/src/lib/superchat-ui.ts b/src/lib/superchat-ui.ts new file mode 100644 index 00000000..329f64ad --- /dev/null +++ b/src/lib/superchat-ui.ts @@ -0,0 +1,31 @@ +/** Shared superchat accent styles — readable in light and dark mode. */ + +/** “Superchat” label in thread / notification cards. */ +export const superchatTitleClass = + 'font-semibold text-amber-700 dark:text-amber-300' + +/** Profile wall section heading (“Superchats”). */ +export const superchatSectionHeadingClass = + 'text-xs font-semibold uppercase tracking-wider text-amber-800/90 dark:text-amber-200/90' + +/** Recipient-confirmed state text. */ +export const superchatConfirmedTextClass = + 'text-sm font-medium text-amber-800 dark:text-amber-200' + +/** Recipient-confirmed box (prominent notification layout). */ +export const superchatConfirmedBoxClass = + 'rounded-md border border-amber-600/35 bg-amber-500/10 px-3 py-2 text-center dark:border-amber-400/40 dark:bg-amber-400/10' + +/** Full-width “Turn this into a superchat!” CTA. */ +export const superchatProminentButtonClass = + 'h-auto min-h-11 w-full gap-2 border-amber-600/45 bg-amber-500/15 py-2.5 text-base font-semibold text-amber-950 shadow-[0_0_16px_rgba(245,158,11,0.2)] hover:bg-amber-500/25 dark:border-yellow-400/50 dark:bg-yellow-400/20 dark:text-yellow-50 dark:shadow-[0_0_16px_rgba(250,204,21,0.25)] dark:hover:bg-yellow-400/30' + +/** Large zap amount / BTC equivalent highlight in ZapDialog. */ +export const superchatAmountHighlightClass = + 'rounded-md bg-amber-500/20 px-2 py-0.5 font-semibold text-amber-950 ring-1 ring-amber-600/45 shadow-[0_0_12px_rgba(245,158,11,0.25)] dark:bg-yellow-400/25 dark:text-yellow-100 dark:ring-yellow-400/70 dark:shadow-[0_0_12px_rgba(250,204,21,0.45)]' + +/** Leading digit group highlight on large sats input. */ +export const superchatSatsLeadingHighlightClass = 'text-amber-600 dark:text-yellow-400' + +/** Lightning bolt accent (zap address rows, payto icons). */ +export const superchatLightningAccentClass = 'text-amber-600 dark:text-yellow-400'