4nk/story-research-zapwall
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Update PaymentModal to use custom Tailwind CSS theme colors

Browse Source
This commit is contained in:
Nicolas Cantu 2025-12-28 23:21:18 +01:00
parent 3153f1b27d
commit 7cfd235a00
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/PaymentModal.tsx
View File

@ -54,14 +54,14 @@ function PaymentHeader({
return (
<div className="flex justify-between items-center mb-4">
<div>
<h2 className="text-xl font-bold">Zap de {amount} sats</h2>
<h2 className="text-xl font-bold text-neon-cyan">Zap de {amount} sats</h2>
{timeLabel && (
<p className={`text-sm ${timeRemaining !== null && timeRemaining <= 60 ? 'text-red-600 font-semibold' : 'text-gray-600'}`}>
<p className={`text-sm ${timeRemaining !== null && timeRemaining <= 60 ? 'text-red-400 font-semibold' : 'text-cyber-accent/70'}`}>
Time remaining: {timeLabel}
</p>
)}
</div>
<button onClick={onClose} className="text-gray-500 hover:text-gray-700 text-2xl">
<button onClick={onClose} className="text-cyber-accent hover:text-neon-cyan text-2xl transition-colors">
×
</button>
</div>
@ -71,10 +71,10 @@ function PaymentHeader({
function InvoiceDisplay({ invoiceText, paymentUrl }: { invoiceText: string; paymentUrl: string }) {
return (
<div className="mb-4">
<p className="text-sm text-gray-600 mb-2">Lightning Invoice:</p>
<div className="bg-gray-100 p-3 rounded break-all text-sm font-mono mb-4">{invoiceText}</div>
<p className="text-sm text-cyber-accent mb-2">Lightning Invoice:</p>
<div className="bg-cyber-darker border border-neon-cyan/20 p-3 rounded break-all text-sm font-mono mb-4 text-neon-cyan">{invoiceText}</div>
<div className="flex justify-center mb-4">
<div className="bg-white p-4 rounded-lg border-2 border-gray-200">
<div className="bg-cyber-dark p-4 rounded-lg border-2 border-neon-cyan/30">
<QRCode
value={paymentUrl}
size={200}
@ -83,7 +83,7 @@ function InvoiceDisplay({ invoiceText, paymentUrl }: { invoiceText: string; paym
/>
</div>
</div>
<p className="text-xs text-gray-500 text-center mb-2">Scan with your Lightning wallet to pay</p>
<p className="text-xs text-cyber-accent/70 text-center mb-2">Scan with your Lightning wallet to pay</p>
</div>
)
}
@ -103,13 +103,13 @@ function PaymentActions({
onClick={() => {
void onCopy()
}}
className="flex-1 px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg font-medium transition-colors"
className="flex-1 px-4 py-2 bg-cyber-light border border-neon-cyan/30 hover:border-neon-cyan/50 hover:bg-cyber-dark text-cyber-accent hover:text-neon-cyan rounded-lg font-medium transition-colors"
>
{copied ? 'Copied!' : 'Copy Invoice'}
</button>
<button
onClick={onOpenWallet}
className="flex-1 px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg font-medium transition-colors"
className="flex-1 px-4 py-2 bg-neon-cyan/20 border border-neon-cyan/50 hover:bg-neon-cyan/30 hover:border-neon-cyan text-neon-cyan hover:text-neon-green rounded-lg font-medium transition-colors"
>
Pay with Alby
</button>
@ -122,9 +122,9 @@ function ExpiredNotice({ show }: { show: boolean }) {
return null
}
return (
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
<p className="text-sm text-red-700 font-semibold mb-2">This invoice has expired</p>
<p className="text-xs text-red-600">Please close this modal and try again to generate a new invoice.</p>
<div className="mt-4 p-3 bg-red-900/20 border border-red-400/50 rounded-lg">
<p className="text-sm text-red-400 font-semibold mb-2">This invoice has expired</p>
<p className="text-xs text-red-400/80">Please close this modal and try again to generate a new invoice.</p>
</div>
)
}
@ -177,7 +177,7 @@ export function PaymentModal({ invoice, onClose, onPaymentComplete }: PaymentMod
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto">
<div className="bg-cyber-dark border border-neon-cyan/30 rounded-lg p-6 max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto shadow-glow-cyan">
<AlbyInstaller />
<PaymentHeader amount={invoice.amount} timeRemaining={timeRemaining} onClose={onClose} />
<InvoiceDisplay invoiceText={invoice.invoice} paymentUrl={paymentUrl} />
@ -188,11 +188,11 @@ export function PaymentModal({ invoice, onClose, onPaymentComplete }: PaymentMod
/>
<ExpiredNotice show={timeRemaining !== null && timeRemaining <= 0} />
{errorMessage && (
<p className="text-xs text-red-600 mt-3 text-center" role="alert">
<p className="text-xs text-red-400 mt-3 text-center" role="alert">
{errorMessage}
</p>
)}
<p className="text-xs text-gray-500 mt-4 text-center">
<p className="text-xs text-cyber-accent/70 mt-4 text-center">
Payment will be automatically verified once completed
</p>
</div>

8
styles/globals.css
View File

@ -11,25 +11,25 @@
--color-midnight-700: #1f2435;
--color-midnight-800: #222737;
--color-midnight-900: #252a39;
--color-neon-cyan: #00ffff;
--color-neon-green: #00ff41;
--color-neon-blue: #0080ff;
--color-neon-purple: #bf00ff;
--color-neon-pink: #ff00ff;
--color-cyber-dark: #0a0a0f;
--color-cyber-darker: #050508;
--color-cyber-light: #1a1a2e;
--color-cyber-accent: #00d9ff;
--color-cyber-accent2: #00ff88;
--shadow-neon-cyan: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
--shadow-neon-green: 0 0 10px #00ff41, 0 0 20px #00ff41, 0 0 30px #00ff41;
--shadow-neon-blue: 0 0 10px #0080ff, 0 0 20px #0080ff, 0 0 30px #0080ff;
--shadow-glow-cyan: 0 0 5px #00ffff, 0 0 10px #00ffff;
--shadow-glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41;
--bg-image-cyber-grid: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
--bg-size-grid: 20px 20px;
}