GLobal Styling part 1

frontend/src/pages/account/PlansAndBillingPage.tsx

@@ -8,10 +8,10 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { 
-  CreditCard, Package, TrendingUp, FileText, Wallet, ArrowUpCircle,
-  Loader2, AlertCircle, CheckCircle, Download, Zap, Globe, Users, X
-} from 'lucide-react';
+import {
+  CreditCardIcon, BoxIcon as PackageIcon, TrendingUpIcon, FileTextIcon, WalletIcon, ArrowUpIcon as ArrowUpCircleIcon,
+  Loader2Icon, AlertCircleIcon, CheckCircleIcon, DownloadIcon, ZapIcon, GlobeIcon, UsersIcon, XIcon
+} from '../../icons';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
@@ -346,11 +346,11 @@ export default function PlansAndBillingPage() {
         <PageMeta title="Plans & Billing" description="Manage your subscription and billing" />
         <PageHeader
           title="Plans & Billing"
-          badge={{ icon: <CreditCard className="w-4 h-4" />, color: 'blue' }}
+          badge={{ icon: <CreditCardIcon className="w-4 h-4" />, color: 'blue' }}
         />
         <div className="p-6">
           <div className="flex items-center justify-center h-64">
-            <Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
+            <Loader2Icon className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
           </div>
         </div>
       </>
@@ -381,7 +381,7 @@ export default function PlansAndBillingPage() {
       <PageHeader
         title={pageTitles[activeTab].title}
         description={pageTitles[activeTab].description}
-        badge={{ icon: <CreditCard className="w-4 h-4" />, color: 'blue' }}
+        badge={{ icon: <CreditCardIcon className="w-4 h-4" />, color: 'blue' }}
         parent="Plans & Billing"
       />
       <div className="p-6">
@@ -399,7 +399,7 @@ export default function PlansAndBillingPage() {
 
       {error && (
         <div className="mb-6 p-4 bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg flex items-center gap-3">
-          <AlertCircle className="w-5 h-5 text-error-600" />
+          <AlertCircleIcon className="w-5 h-5 text-error-600" />
           <p className="text-error-800 dark:text-error-200">{error}</p>
         </div>
       )}
@@ -416,7 +416,7 @@ export default function PlansAndBillingPage() {
                 <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Your Current Plan</h2>
                 {!hasActivePlan && (
                   <div className="p-4 mb-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200 flex items-start gap-3">
-                    <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
+                    <AlertCircleIcon className="w-5 h-5 mt-0.5 flex-shrink-0" />
                     <div>
                       <p className="font-medium">No Active Plan</p>
                       <p className="text-sm mt-1">Choose a plan below to activate your account and unlock all features.</p>
@@ -442,7 +442,7 @@ export default function PlansAndBillingPage() {
                   <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                     <div className="p-4 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 rounded-lg border border-brand-200 dark:border-brand-700">
                       <div className="flex items-center gap-2 text-sm text-brand-700 dark:text-brand-300 mb-1">
-                        <Zap className="w-4 h-4" />
+                        <ZapIcon className="w-4 h-4" />
                         Monthly Credits
                       </div>
                       <div className="text-2xl font-bold text-brand-600 dark:text-brand-400">
@@ -451,7 +451,7 @@ export default function PlansAndBillingPage() {
                     </div>
                     <div className="p-4 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 rounded-lg border border-success-200 dark:border-success-700">
                       <div className="flex items-center gap-2 text-sm text-success-700 dark:text-success-300 mb-1">
-                        <Wallet className="w-4 h-4" />
+                        <WalletIcon className="w-4 h-4" />
                         Current Balance
                       </div>
                       <div className="text-2xl font-bold text-success-600 dark:text-success-400">
@@ -460,7 +460,7 @@ export default function PlansAndBillingPage() {
                     </div>
                     <div className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-lg border border-purple-200 dark:border-purple-700">
                       <div className="flex items-center gap-2 text-sm text-purple-700 dark:text-purple-300 mb-1">
-                        <Package className="w-4 h-4" />
+                        <PackageIcon className="w-4 h-4" />
                         Renewal Date
                       </div>
                       <div className="text-lg font-bold text-purple-600 dark:text-purple-400">
@@ -478,7 +478,7 @@ export default function PlansAndBillingPage() {
                       tone="brand"
                       as={Link}
                       to="/account/plans/upgrade"
-                      startIcon={<ArrowUpCircle className="w-4 h-4" />}
+                      startIcon={<ArrowUpIcon className="w-4 h-4" />}
                     >
                       Upgrade Plan
                     </Button>
@@ -513,7 +513,7 @@ export default function PlansAndBillingPage() {
                     : ['AI Content Writer', 'Image Generation', 'Auto Publishing', 'Custom Prompts', 'Email Support', 'API Access'])
                     .map((feature: string, index: number) => (
                       <div key={index} className="flex items-start gap-2 text-sm">
-                        <CheckCircle className="w-4 h-4 text-success-600 dark:text-success-400 mt-0.5 flex-shrink-0" />
+                        <CheckCircleIcon className="w-4 h-4 text-success-600 dark:text-success-400 mt-0.5 flex-shrink-0" />
                         <span className="text-gray-700 dark:text-gray-300">{feature}</span>
                       </div>
                     ))}
@@ -544,7 +544,7 @@ export default function PlansAndBillingPage() {
                 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                   <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                     <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
-                      <Globe className="w-4 h-4" />
+                      <GlobeIcon className="w-4 h-4" />
                       Sites
                     </div>
                     <div className="text-2xl font-bold text-gray-900 dark:text-white">
@@ -553,7 +553,7 @@ export default function PlansAndBillingPage() {
                   </div>
                   <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                     <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
-                      <Users className="w-4 h-4" />
+                      <UsersIcon className="w-4 h-4" />
                       Team Members
                     </div>
                     <div className="text-2xl font-bold text-gray-900 dark:text-white">
@@ -562,7 +562,7 @@ export default function PlansAndBillingPage() {
                   </div>
                   <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                     <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
-                      <FileText className="w-4 h-4" />
+                      <FileTextIcon className="w-4 h-4" />
                       Content Words/mo
                     </div>
                     <div className="text-2xl font-bold text-gray-900 dark:text-white">
@@ -575,7 +575,7 @@ export default function PlansAndBillingPage() {
                   </div>
                   <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                     <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
-                      <Zap className="w-4 h-4" />
+                      <ZapIcon className="w-4 h-4" />
                       Monthly Credits
                     </div>
                     <div className="text-2xl font-bold text-gray-900 dark:text-white">
@@ -593,7 +593,7 @@ export default function PlansAndBillingPage() {
           <div className="space-y-6">
             {/* Upgrade Plans Section */}
             <div>
-              <div className="mx-auto" style={{ maxWidth: '1560px' }}>
+              <div className="mx-auto max-w-[1560px]">
                 <PricingTable1
                   title=""
                   plans={plans
@@ -616,24 +616,24 @@ export default function PlansAndBillingPage() {
               {/* Plan Change Policy */}
               <Card className="p-6 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 mt-6">
                 <h3 className="font-semibold text-brand-900 dark:text-brand-100 mb-2 flex items-center gap-2">
-                  <AlertCircle className="w-5 h-5" />
+                  <AlertCircleIcon className="w-5 h-5" />
                   Plan Change Policy
                 </h3>
                 <ul className="space-y-2 text-sm text-brand-800 dark:text-brand-200">
                   <li className="flex items-start gap-2">
-                    <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                    <CheckCircleIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                     Upgrades take effect immediately with prorated billing
                   </li>
                   <li className="flex items-start gap-2">
-                    <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                    <CheckCircleIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                     Downgrades take effect at the end of your current billing period
                   </li>
                   <li className="flex items-start gap-2">
-                    <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                    <CheckCircleIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                     Unused credits carry over when changing plans
                   </li>
                   <li className="flex items-start gap-2">
-                    <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                    <CheckCircleIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                     Cancel anytime - no long-term commitments
                   </li>
                 </ul>
@@ -677,7 +677,7 @@ export default function PlansAndBillingPage() {
                     {invoices.length === 0 ? (
                       <tr>
                         <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
-                          <FileText className="w-12 h-12 mx-auto mb-2 text-gray-400" />
+                          <FileTextIcon className="w-12 h-12 mx-auto mb-2 text-gray-400" />
                           No invoices yet
                         </td>
                       </tr>
@@ -702,7 +702,7 @@ export default function PlansAndBillingPage() {
                               variant="ghost" 
                               tone="brand"
                               size="sm"
-                              startIcon={<Download className="w-4 h-4" />}
+                              startIcon={<DownloadIcon className="w-4 h-4" />}
                               className="ml-auto"
                               onClick={() => handleDownloadInvoice(invoice.id)}
                             >
@@ -790,7 +790,7 @@ export default function PlansAndBillingPage() {
                 {paymentMethods.map((method) => (
                   <div key={method.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between">
                     <div className="flex items-center gap-4">
-                      <CreditCard className="w-8 h-8 text-gray-400" />
+                      <CreditCardIcon className="w-8 h-8 text-gray-400" />
                       <div>
                         <div className="font-medium text-gray-900 dark:text-white">{method.display_name}</div>
                         <div className="text-sm text-gray-600 dark:text-gray-400">{method.type}</div>
@@ -837,12 +837,12 @@ export default function PlansAndBillingPage() {
                 onClick={() => setShowCancelConfirm(false)}
                 className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
               >
-                <X className="w-5 h-5 text-gray-500" />
+                <XIcon className="w-5 h-5 text-gray-500" />
               </button>
             </div>
             <div className="p-6 space-y-4">
               <div className="flex items-start gap-3 p-4 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-lg">
-                <AlertCircle className="w-5 h-5 text-warning-600 dark:text-warning-400 mt-0.5 flex-shrink-0" />
+                <AlertCircleIcon className="w-5 h-5 text-warning-600 dark:text-warning-400 mt-0.5 flex-shrink-0" />
                 <div className="text-sm text-warning-800 dark:text-warning-200">
                   <p className="font-medium mb-1">Are you sure you want to cancel?</p>
                   <p>Your subscription will remain active until the end of your current billing period. After that:</p>
@@ -882,7 +882,7 @@ export default function PlansAndBillingPage() {
               >
                 {planLoadingId === currentSubscription?.id ? (
                   <>
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    <Loader2Icon className="w-4 h-4 mr-2 animate-spin" />
                     Cancelling...
                   </>
                 ) : (