stlyes fixes

frontend/src/components/billing/PendingPaymentBanner.tsx

@@ -115,15 +115,15 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
   // If no invoice found, show simplified banner
   if (!invoice) {
     return (
-      <div className={`relative border-l-4 border-amber-500 bg-amber-50 dark:bg-amber-900/20 ${className}`}>
+      <div className={`relative border-l-4 border-warning-500 bg-warning-50 dark:bg-warning-900/20 ${className}`}>
         <div className="p-4">
           <div className="flex items-start gap-4">
-            <AlertCircle className="w-6 h-6 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+            <AlertCircle className="w-6 h-6 text-warning-600 dark:text-warning-400 flex-shrink-0 mt-0.5" />
             <div className="flex-1">
-              <h3 className="font-semibold text-amber-900 dark:text-amber-100">
+              <h3 className="font-semibold text-warning-900 dark:text-warning-100">
                 Payment Required
               </h3>
-              <p className="mt-1 text-sm text-amber-800 dark:text-amber-200">
+              <p className="mt-1 text-sm text-warning-800 dark:text-warning-200">
                 Your account is pending payment. Please complete your payment to activate your subscription.
               </p>
               <div className="mt-3 flex gap-2">
@@ -141,9 +141,9 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
             </div>
             <button
               onClick={handleDismiss}
-              className="p-1 hover:bg-amber-100 dark:hover:bg-amber-800/40 rounded transition-colors"
+              className="p-1 hover:bg-warning-100 dark:hover:bg-warning-800/40 rounded transition-colors"
             >
-              <X className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+              <X className="w-5 h-5 text-warning-600 dark:text-warning-400" />
             </button>
           </div>
         </div>
@@ -167,59 +167,59 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
 
   return (
     <>
-      <div className={`relative border-l-4 ${isOverdue ? 'border-red-500 bg-red-50 dark:bg-red-900/20' : 'border-amber-500 bg-amber-50 dark:bg-amber-900/20'} ${className}`}>
+      <div className={`relative border-l-4 ${isOverdue ? 'border-error-500 bg-error-50 dark:bg-error-900/20' : 'border-warning-500 bg-warning-50 dark:bg-warning-900/20'} ${className}`}>
         <div className="p-4">
           <div className="flex items-start gap-4">
             <AlertCircle 
-              className={`w-6 h-6 flex-shrink-0 mt-0.5 ${isOverdue ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400'}`} 
+              className={`w-6 h-6 flex-shrink-0 mt-0.5 ${isOverdue ? 'text-error-600 dark:text-error-400' : 'text-warning-600 dark:text-warning-400'}`} 
             />
             <div className="flex-1">
               <div className="flex items-center gap-2">
-                <h3 className={`font-semibold ${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
+                <h3 className={`font-semibold ${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'}`}>
                   {isOverdue ? 'Payment Overdue' : 'Payment Required'}
                 </h3>
                 {isDueSoon && !isOverdue && (
-                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-amber-200 text-amber-900 dark:bg-amber-700 dark:text-amber-100">
+                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-warning-200 text-warning-900 dark:bg-warning-700 dark:text-warning-100">
                     Due Soon
                   </span>
                 )}
               </div>
               
-              <p className={`mt-1 text-sm ${isOverdue ? 'text-red-800 dark:text-red-200' : 'text-amber-800 dark:text-amber-200'}`}>
+              <p className={`mt-1 text-sm ${isOverdue ? 'text-error-800 dark:text-error-200' : 'text-warning-800 dark:text-warning-200'}`}>
                 Your subscription is pending payment confirmation. Complete your payment to activate your account and unlock all features.
               </p>
 
               {/* Invoice Details */}
               <div className="mt-3 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                 <div>
-                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
+                  <span className={`block font-medium ${isOverdue ? 'text-error-700 dark:text-error-300' : 'text-warning-700 dark:text-warning-300'}`}>
                     Invoice
                   </span>
-                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
+                  <span className={`${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'}`}>
                     #{invoice.invoice_number}
                   </span>
                 </div>
                 <div>
-                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
+                  <span className={`block font-medium ${isOverdue ? 'text-error-700 dark:text-error-300' : 'text-warning-700 dark:text-warning-300'}`}>
                     Amount
                   </span>
-                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
+                  <span className={`${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'}`}>
                     {invoice.currency} {invoice.total_amount}
                   </span>
                 </div>
                 <div>
-                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
+                  <span className={`block font-medium ${isOverdue ? 'text-error-700 dark:text-error-300' : 'text-warning-700 dark:text-warning-300'}`}>
                     Status
                   </span>
-                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'} capitalize`}>
+                  <span className={`${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'} capitalize`}>
                     {invoice.status}
                   </span>
                 </div>
                 <div>
-                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
+                  <span className={`block font-medium ${isOverdue ? 'text-error-700 dark:text-error-300' : 'text-warning-700 dark:text-warning-300'}`}>
                     {isOverdue ? 'Was Due' : 'Due Date'}
                   </span>
-                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
+                  <span className={`${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'}`}>
                     {formatDate(invoice.due_date)}
                   </span>
                 </div>
@@ -248,8 +248,8 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
               onClick={handleDismiss}
               className={`p-1 rounded transition-colors ${
                 isOverdue 
-                  ? 'hover:bg-red-100 dark:hover:bg-red-800/40 text-red-600 dark:text-red-400'
-                  : 'hover:bg-amber-100 dark:hover:bg-amber-800/40 text-amber-600 dark:text-amber-400'
+                  ? 'hover:bg-error-100 dark:hover:bg-error-800/40 text-error-600 dark:text-error-400'
+                  : 'hover:bg-warning-100 dark:hover:bg-warning-800/40 text-warning-600 dark:text-warning-400'
               }`}
             >
               <X className="w-5 h-5" />