fix

frontend/src/pages/Settings/CreditsAndBilling.tsx

@@ -113,11 +113,14 @@ const CreditsAndBilling: React.FC = () => {
             Manage your credits, view transactions, and monitor usage
           </p>
         </div>
-        <Button variant="primary" onClick={() => {
-          // TODO: Link to purchase credits page
-          toast?.info('Purchase credits feature coming soon');
-        }}>
-          <DollarLineIcon className="w-4 h-4 mr-2" />
+        <Button
+          variant="primary"
+          startIcon={<DollarLineIcon className="w-4 h-4" />}
+          onClick={() => {
+            // TODO: Link to purchase credits page
+            toast?.info('Purchase credits feature coming soon');
+          }}
+        >
           Purchase Credits
         </Button>
       </div>
@@ -127,31 +130,27 @@ const CreditsAndBilling: React.FC = () => {
         <EnhancedMetricCard
           title="Current Balance"
           value={balance?.credits || 0}
-          icon={BoltIcon}
-          color="amber"
-          iconColor="text-amber-500"
+          icon={<BoltIcon />}
+          accentColor="orange"
         />
         <EnhancedMetricCard
           title="Monthly Included"
           value={balance?.monthly_credits_included || 0}
           subtitle={balance?.subscription_plan || 'Free'}
-          icon={CheckCircleIcon}
-          color="green"
-          iconColor="text-green-500"
+          icon={<CheckCircleIcon />}
+          accentColor="green"
         />
         <EnhancedMetricCard
           title="Bonus Credits"
           value={balance?.bonus_credits || 0}
-          icon={DollarLineIcon}
-          color="blue"
-          iconColor="text-blue-500"
+          icon={<DollarLineIcon />}
+          accentColor="blue"
         />
         <EnhancedMetricCard
           title="Total This Month"
           value={usageLogs.reduce((sum, log) => sum + log.credits_used, 0)}
-          icon={TimeIcon}
-          color="purple"
-          iconColor="text-purple-500"
+          icon={<TimeIcon />}
+          accentColor="purple"
         />
       </div>
 
@@ -201,7 +200,7 @@ const CreditsAndBilling: React.FC = () => {
                 <div key={transaction.id} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                   <div className="flex-1">
                     <div className="flex items-center gap-2">
-                      <Badge variant={getTransactionTypeColor(transaction.transaction_type)}>
+                      <Badge tone={getTransactionTypeColor(transaction.transaction_type) as any}>
                         {transaction.transaction_type}
                       </Badge>
                       <span className="text-sm text-gray-900 dark:text-white">
@@ -290,7 +289,7 @@ const CreditsAndBilling: React.FC = () => {
                       {new Date(transaction.created_at).toLocaleDateString()}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
-                      <Badge variant={getTransactionTypeColor(transaction.transaction_type)}>
+                      <Badge tone={getTransactionTypeColor(transaction.transaction_type) as any}>
                         {transaction.transaction_type}
                       </Badge>
                     </td>