From 1ed4aaaaa79e88edfb19fd6892aeb05f0a13ced6 Mon Sep 17 00:00:00 2001
From: Sepehr Ramezani <sepehr@Mac-mini-de-Sepehr.local>
Date: Fri, 1 May 2026 16:40:45 +0200
Subject: [PATCH] fix(ui): light mode visibility + sidebar layout

- Replace accent with primary for upgrade banner (invisible on white bg)
- Fix sidebar actions (theme/logout) stuck at bottom with mt-auto
- Use primary color for user avatar fallback in light mode

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/app/dashboard/DashboardSidebar.tsx    | 134 +++++++++---------
 frontend/src/app/dashboard/profile/page.tsx   |   8 +-
 2 files changed, 73 insertions(+), 69 deletions(-)

diff --git a/frontend/src/app/dashboard/DashboardSidebar.tsx b/frontend/src/app/dashboard/DashboardSidebar.tsx
index 6c1eb96..c35d386 100644
--- a/frontend/src/app/dashboard/DashboardSidebar.tsx
+++ b/frontend/src/app/dashboard/DashboardSidebar.tsx
@@ -36,76 +36,80 @@ export function DashboardSidebar() {
       <Separator />
 
       {/* Navigation */}
-      <nav className="flex flex-1 flex-col gap-1 px-3 py-4">
-        {navItems.map((item) => {
-          const isActive = pathname === item.href;
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={cn(
-                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-                isActive
-                  ? 'bg-secondary text-foreground'
-                  : 'text-muted-foreground hover:bg-secondary/60 hover:text-foreground'
-              )}
-            >
-              <item.icon className="size-4 shrink-0" />
-              {t(item.labelKey)}
-            </Link>
-          );
-        })}
+      <nav className="flex-1 overflow-y-auto px-3 py-4">
+        <div className="flex flex-col gap-1">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-secondary text-foreground'
+                    : 'text-muted-foreground hover:bg-secondary/60 hover:text-foreground'
+                )}
+              >
+                <item.icon className="size-4 shrink-0" />
+                {t(item.labelKey)}
+              </Link>
+            );
+          })}
+        </div>
       </nav>
 
-      <Separator />
+      {/* Bottom section: user + actions */}
+      <div className="mt-auto border-t border-border">
+        {/* User section */}
+        {!isLoading && user && (
+          <>
+            <div className="flex items-center gap-2.5 px-4 py-3">
+              <Avatar className="size-8 shrink-0">
+                <AvatarFallback className="bg-primary text-primary-foreground text-xs font-semibold">
+                  {getInitials(user.name)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <span className="truncate text-sm font-medium leading-none text-foreground">{user.name}</span>
+                <span className="truncate text-xs leading-none text-muted-foreground">{user.email}</span>
+                <Badge
+                  variant="secondary"
+                  className={cn(
+                    'mt-0.5 w-fit text-xs',
+                    user.tier !== 'free' && user.tier && 'border border-primary/20 bg-primary/10 text-primary'
+                  )}
+                >
+                  {translateTier(t, user.tier)}
+                </Badge>
+              </div>
+            </div>
+            <Separator />
+          </>
+        )}
 
-      {/* User section */}
-      {!isLoading && user && (
-        <div className="flex items-center gap-2.5 px-4 py-3">
-          <Avatar className="size-8 shrink-0">
-            <AvatarFallback className="bg-accent text-accent-foreground text-xs font-semibold">
-              {getInitials(user.name)}
-            </AvatarFallback>
-          </Avatar>
-          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-            <span className="truncate text-sm font-medium leading-none text-foreground">{user.name}</span>
-            <span className="truncate text-xs leading-none text-muted-foreground">{user.email}</span>
-            <Badge
-              variant="secondary"
-              className={cn(
-                'mt-0.5 w-fit text-xs',
-                user.tier !== 'free' && user.tier && 'border border-accent/20 bg-accent/10 text-accent'
-              )}
-            >
-              {translateTier(t, user.tier)}
-            </Badge>
+        {/* Actions */}
+        <div className="px-3 py-3 space-y-1">
+          <div className="flex items-center justify-between px-3 py-1.5">
+            <span className="text-xs text-muted-foreground">{t('dashboard.sidebar.theme')}</span>
+            <ThemeToggle />
           </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full justify-start gap-2 text-muted-foreground hover:text-foreground"
+            onClick={logout}
+          >
+            <LogOut className="size-3.5" />
+            {t('dashboard.sidebar.signOut')}
+          </Button>
+          <Button variant="ghost" size="sm" className="w-full justify-start gap-2 text-muted-foreground" asChild>
+            <Link href="/">
+              <ChevronLeft className="size-3.5" />
+              {t('dashboard.sidebar.backHome')}
+            </Link>
+          </Button>
         </div>
-      )}
-
-      <Separator />
-
-      {/* Actions */}
-      <div className="px-3 py-3 space-y-1">
-        <div className="flex items-center justify-between px-3 py-1.5">
-          <span className="text-xs text-muted-foreground">{t('dashboard.sidebar.theme')}</span>
-          <ThemeToggle />
-        </div>
-        <Button 
-          variant="ghost" 
-          size="sm" 
-          className="w-full justify-start gap-2 text-muted-foreground hover:text-foreground"
-          onClick={logout}
-        >
-          <LogOut className="size-3.5" />
-          {t('dashboard.sidebar.signOut')}
-        </Button>
-        <Button variant="ghost" size="sm" className="w-full justify-start gap-2 text-muted-foreground" asChild>
-          <Link href="/">
-            <ChevronLeft className="size-3.5" />
-            {t('dashboard.sidebar.backHome')}
-          </Link>
-        </Button>
       </div>
     </aside>
   );
diff --git a/frontend/src/app/dashboard/profile/page.tsx b/frontend/src/app/dashboard/profile/page.tsx
index 6cc2f26..124bad3 100644
--- a/frontend/src/app/dashboard/profile/page.tsx
+++ b/frontend/src/app/dashboard/profile/page.tsx
@@ -421,10 +421,10 @@ export default function ProfilePage() {
                 )}
 
                 {isFreePlan && (
-                  <div className="flex items-center gap-3 p-3 rounded-lg bg-accent/10 border border-accent/20 text-sm">
-                    <Zap className="w-4 h-4 text-accent flex-shrink-0" />
-                    <span className="text-accent/90 flex-1">Débloquez plus de traductions avec un forfait payant.</span>
-                    <Button asChild size="sm" variant="outline" className="border-accent/30 text-accent hover:bg-accent/10 flex-shrink-0">
+                  <div className="flex items-center gap-3 p-3 rounded-lg bg-primary/10 border border-primary/20 text-sm">
+                    <Zap className="w-4 h-4 text-primary flex-shrink-0" />
+                    <span className="text-primary flex-1">Débloquez plus de traductions avec un forfait payant.</span>
+                    <Button asChild size="sm" variant="outline" className="border-primary/30 text-primary hover:bg-primary/10 flex-shrink-0">
                       <Link href="/pricing">Voir les forfaits <ArrowRight className="w-3.5 h-3.5 ml-1" /></Link>
                     </Button>
                   </div>