sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): profile page light mode color fixes
Some checks failed
Build and Deploy / Backend Tests (push) Has been cancelled
Details
Build and Deploy / Frontend Build Check (push) Has been cancelled
Details
Build and Deploy / Build Docker Images (push) Has been cancelled
Details
Build and Deploy / Deploy to Server (push) Has been cancelled
Details

Browse Source 
- 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>
This commit is contained in:
Sepehr Ramezani
2026-05-01 16:48:15 +02:00
parent 1ed4aaaaa7
commit 16ac7ca2b9
1 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/app/dashboard/profile/page.tsx
View File

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