fix(ui): light mode visibility + sidebar layout
Some checks failed
Build and Deploy / Backend Tests (push) Has been cancelled
Build and Deploy / Frontend Build Check (push) Has been cancelled
Build and Deploy / Build Docker Images (push) Has been cancelled
Build and Deploy / Deploy to Server (push) Has been cancelled

- 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>
This commit is contained in:
Sepehr Ramezani
2026-05-01 16:40:45 +02:00
parent 2f7347b4db
commit 1ed4aaaaa7
2 changed files with 73 additions and 69 deletions

View File

@@ -36,7 +36,8 @@ export function DashboardSidebar() {
<Separator /> <Separator />
{/* Navigation */} {/* Navigation */}
<nav className="flex flex-1 flex-col gap-1 px-3 py-4"> <nav className="flex-1 overflow-y-auto px-3 py-4">
<div className="flex flex-col gap-1">
{navItems.map((item) => { {navItems.map((item) => {
const isActive = pathname === item.href; const isActive = pathname === item.href;
return ( return (
@@ -55,15 +56,17 @@ export function DashboardSidebar() {
</Link> </Link>
); );
})} })}
</div>
</nav> </nav>
<Separator /> {/* Bottom section: user + actions */}
<div className="mt-auto border-t border-border">
{/* User section */} {/* User section */}
{!isLoading && user && ( {!isLoading && user && (
<>
<div className="flex items-center gap-2.5 px-4 py-3"> <div className="flex items-center gap-2.5 px-4 py-3">
<Avatar className="size-8 shrink-0"> <Avatar className="size-8 shrink-0">
<AvatarFallback className="bg-accent text-accent-foreground text-xs font-semibold"> <AvatarFallback className="bg-primary text-primary-foreground text-xs font-semibold">
{getInitials(user.name)} {getInitials(user.name)}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
@@ -74,16 +77,16 @@ export function DashboardSidebar() {
variant="secondary" variant="secondary"
className={cn( className={cn(
'mt-0.5 w-fit text-xs', 'mt-0.5 w-fit text-xs',
user.tier !== 'free' && user.tier && 'border border-accent/20 bg-accent/10 text-accent' user.tier !== 'free' && user.tier && 'border border-primary/20 bg-primary/10 text-primary'
)} )}
> >
{translateTier(t, user.tier)} {translateTier(t, user.tier)}
</Badge> </Badge>
</div> </div>
</div> </div>
)}
<Separator /> <Separator />
</>
)}
{/* Actions */} {/* Actions */}
<div className="px-3 py-3 space-y-1"> <div className="px-3 py-3 space-y-1">
@@ -107,6 +110,7 @@ export function DashboardSidebar() {
</Link> </Link>
</Button> </Button>
</div> </div>
</div>
</aside> </aside>
); );
} }

View File

@@ -421,10 +421,10 @@ export default function ProfilePage() {
)} )}
{isFreePlan && ( {isFreePlan && (
<div className="flex items-center gap-3 p-3 rounded-lg bg-accent/10 border border-accent/20 text-sm"> <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-accent flex-shrink-0" /> <Zap className="w-4 h-4 text-primary flex-shrink-0" />
<span className="text-accent/90 flex-1">Débloquez plus de traductions avec un forfait payant.</span> <span className="text-primary 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"> <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> <Link href="/pricing">Voir les forfaits <ArrowRight className="w-3.5 h-3.5 ml-1" /></Link>
</Button> </Button>
</div> </div>