From 16ac7ca2b9c9a843dcbae39e9b60febb71927112 Mon Sep 17 00:00:00 2001
From: Sepehr Ramezani <sepehr@Mac-mini-de-Sepehr.local>
Date: Fri, 1 May 2026 16:48:15 +0200
Subject: [PATCH] fix(ui): profile page light mode color fixes

- Replace all accent colors with primary (accent is near-white in light mode)
- Add dark: variants for status colors (emerald, red, amber) that were dark-only
- Fix usage bar fill color from bg-accent to bg-primary
- Fix alert boxes with proper light/dark variants (bg-amber-50/dark:bg-amber-500/10)
- Fix danger zone title with dark: variant
- Fix info banner with proper muted background

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/app/dashboard/profile/page.tsx | 38 ++++++++++-----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/dashboard/profile/page.tsx b/frontend/src/app/dashboard/profile/page.tsx
index 124bad3..c66dc7f 100644
--- a/frontend/src/app/dashboard/profile/page.tsx
+++ b/frontend/src/app/dashboard/profile/page.tsx
@@ -73,8 +73,8 @@ function UsageBar({ label, used, limit, icon }: UsageBarProps) {
         <div className="flex items-center gap-2 text-muted-foreground">{icon} {label}</div>
         <span className={cn(
           'font-mono text-xs font-medium',
-          isUnlimited ? 'text-emerald-400' :
-          p >= 90 ? 'text-red-400' : p >= 70 ? 'text-amber-400' : 'text-muted-foreground'
+          isUnlimited ? 'text-emerald-600 dark:text-emerald-400' :
+          p >= 90 ? 'text-red-600 dark:text-red-400' : p >= 70 ? 'text-amber-600 dark:text-amber-400' : 'text-muted-foreground'
         )}>
           {isUnlimited ? '∞' : `${used} / ${limit}`}
         </span>
@@ -84,7 +84,7 @@ function UsageBar({ label, used, limit, icon }: UsageBarProps) {
           <div
             className={cn(
               'h-full rounded-full transition-all duration-700',
-              p >= 90 ? 'bg-red-500' : p >= 70 ? 'bg-amber-500' : 'bg-accent'
+              p >= 90 ? 'bg-red-500' : p >= 70 ? 'bg-amber-500' : 'bg-primary'
             )}
             style={{ width: `${p}%` }}
           />
@@ -172,7 +172,7 @@ export default function ProfilePage() {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <RefreshCw className="w-8 h-8 text-accent animate-spin" />
+        <RefreshCw className="w-8 h-8 text-primary animate-spin" />
       </div>
     );
   }
@@ -261,7 +261,7 @@ export default function ProfilePage() {
             <Card>
               <CardHeader className="pb-3">
                 <CardTitle className="text-base flex items-center gap-2">
-                  <CreditCard className="w-4 h-4 text-accent" />
+                  <CreditCard className="w-4 h-4 text-primary" />
                   Mon abonnement
                 </CardTitle>
               </CardHeader>
@@ -293,7 +293,7 @@ export default function ProfilePage() {
                 </div>
 
                 {!isFreePlan && user?.subscription_ends_at && (
-                  <div className="flex items-center gap-2 p-3 rounded-lg bg-secondary/40 text-sm">
+                  <div className="flex items-center gap-2 p-3 rounded-lg bg-muted text-sm">
                     <Info className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                     <span className="text-muted-foreground">
                       {isCanceling
@@ -334,7 +334,7 @@ export default function ProfilePage() {
             {!isFreePlan && !isCanceling && (
               <Card className="border-red-900/30">
                 <CardHeader className="pb-3">
-                  <CardTitle className="text-base flex items-center gap-2 text-red-400">
+                  <CardTitle className="text-base flex items-center gap-2 text-red-600 dark:text-red-400">
                     <ShieldAlert className="w-4 h-4" />
                     Zone danger
                   </CardTitle>
@@ -377,7 +377,7 @@ export default function ProfilePage() {
             <Card>
               <CardHeader className="pb-3">
                 <CardTitle className="text-base flex items-center gap-2">
-                  <BadgeCheck className="w-4 h-4 text-accent" />
+                  <BadgeCheck className="w-4 h-4 text-primary" />
                   Utilisation ce mois-ci
                   <span className="ml-auto text-xs text-muted-foreground font-normal">
                     Réinitialisation le {nextResetDate()}
@@ -399,20 +399,20 @@ export default function ProfilePage() {
                 />
 
                 {extraCredits > 0 && (
-                  <div className="flex items-center gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20 text-sm">
-                    <Info className="w-4 h-4 text-amber-400 flex-shrink-0" />
-                    <span className="text-amber-300">
+                  <div className="flex items-center gap-3 p-3 rounded-lg bg-amber-50 border border-amber-200 dark:bg-amber-500/10 dark:border-amber-500/20 text-sm">
+                    <Info className="w-4 h-4 text-amber-600 dark:text-amber-400 flex-shrink-0" />
+                    <span className="text-amber-700 dark:text-amber-300">
                       {extraCredits} crédit{extraCredits > 1 ? 's' : ''} supplémentaire{extraCredits > 1 ? 's' : ''} disponible{extraCredits > 1 ? 's' : ''}
                     </span>
                   </div>
                 )}
 
                 {usage?.upgrade_required && (
-                  <div className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-sm">
-                    <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0 mt-0.5" />
+                  <div className="flex items-start gap-3 p-3 rounded-lg bg-red-50 border border-red-200 dark:bg-red-500/10 dark:border-red-500/20 text-sm">
+                    <AlertTriangle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
                     <div className="flex-1">
-                      <p className="text-red-300 font-medium">Quota atteint</p>
-                      <p className="text-red-400 text-xs mt-0.5">Passez à un forfait supérieur pour continuer à traduire.</p>
+                      <p className="text-red-700 dark:text-red-300 font-medium">Quota atteint</p>
+                      <p className="text-red-600 dark:text-red-400 text-xs mt-0.5">Passez à un forfait supérieur pour continuer à traduire.</p>
                     </div>
                     <Button asChild size="sm" className="bg-red-600 hover:bg-red-500 flex-shrink-0">
                       <Link href="/pricing"><ArrowRight className="w-3.5 h-3.5" /></Link>
@@ -437,7 +437,7 @@ export default function ProfilePage() {
               <Card>
                 <CardHeader className="pb-3">
                   <CardTitle className="text-base flex items-center gap-2">
-                    <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+                    <CheckCircle2 className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                     Inclus dans votre forfait
                   </CardTitle>
                 </CardHeader>
@@ -445,7 +445,7 @@ export default function ProfilePage() {
                   <div className="grid grid-cols-1 gap-2">
                     {user.plan_limits.features.map((f: string, i: number) => (
                       <div key={i} className="flex items-start gap-2 text-sm">
-                        <CheckCircle2 className="w-4 h-4 text-emerald-400 flex-shrink-0 mt-0.5" />
+                        <CheckCircle2 className="w-4 h-4 text-emerald-600 dark:text-emerald-400 flex-shrink-0 mt-0.5" />
                         <span className="text-muted-foreground">{f}</span>
                       </div>
                     ))}
@@ -458,7 +458,7 @@ export default function ProfilePage() {
             <Card>
               <CardHeader className="pb-3">
                 <CardTitle className="text-base flex items-center gap-2">
-                  <Globe className="w-4 h-4 text-accent" />
+                  <Globe className="w-4 h-4 text-primary" />
                   Préférences
                 </CardTitle>
               </CardHeader>
@@ -476,7 +476,7 @@ export default function ProfilePage() {
                         className={cn(
                           'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
                           locale === lang.value
-                            ? 'bg-accent/10 border-accent/40 text-accent'
+                            ? 'bg-primary/10 border-primary/40 text-primary'
                             : 'bg-transparent border-border text-muted-foreground hover:text-foreground hover:border-border/80'
                         )}
                       >