+
{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'