From 7cfd235a00b0930f22b95b7f5261650917282daa Mon Sep 17 00:00:00 2001
From: Nicolas Cantu <nicolas.cantu@pm.me>
Date: Sun, 28 Dec 2025 23:21:18 +0100
Subject: [PATCH] Fix: Update PaymentModal to use custom Tailwind CSS theme
 colors

---
 components/PaymentModal.tsx | 30 +++++++++++++++---------------
 styles/globals.css          |  8 ++++----
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/components/PaymentModal.tsx b/components/PaymentModal.tsx
index 268b45b..c0430d7 100644
--- a/components/PaymentModal.tsx
+++ b/components/PaymentModal.tsx
@@ -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>
diff --git a/styles/globals.css b/styles/globals.css
index 0ab9942..759abeb 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -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;
 }