julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: revamp global styles and component designs with enhanced gradients, shadows, and responsive layouts for a modern fintech aesthetic

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-07 17:42:07 +01:00
parent a33c41f1bd
commit 2db5bc324d
15 changed files with 767 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/dashboard/sidebar.tsx
View File

@@ -63,19 +63,19 @@ function SidebarContent({
return (
<>
{showHeader && (
<div className="flex items-center justify-between p-4 border-b border-border">
<div className="flex items-center justify-between p-5 border-b border-border/50">
{!collapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/80 flex items-center justify-center shadow-lg shadow-primary/20">
<Wallet className="w-5 h-5 text-primary-foreground" />
</div>
<span className="font-semibold text-foreground">FinTrack</span>
<span className="font-bold text-lg text-foreground tracking-tight">FinTrack</span>
</div>
)}
</div>
)}
<nav className="flex-1 p-2 space-y-1">
<nav className="flex-1 p-4 space-y-2">
{navItems.map((item) => {
const isActive = pathname === item.href;
return (
@@ -83,41 +83,52 @@ function SidebarContent({
<Button
variant={isActive ? "secondary" : "ghost"}
className={cn(
"w-full justify-start gap-3",
collapsed && "justify-center px-2",
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
"hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
isActive && "bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 border-2 border-primary/30 shadow-lg shadow-primary/10 backdrop-blur-sm",
collapsed && "justify-center px-2 w-12",
)}
>
<item.icon className="w-5 h-5 shrink-0" />
{!collapsed && <span>{item.label}</span>}
<item.icon className={cn(
"w-5 h-5 shrink-0 transition-all duration-300",
isActive && "text-primary scale-110"
)} />
{!collapsed && (
<span className={cn(
"font-semibold text-sm",
isActive && "text-primary font-bold"
)}>{item.label}</span>
)}
</Button>
</Link>
);
})}
</nav>
<div className="p-2 border-t border-border space-y-1">
<div className="p-4 border-t border-border/30 space-y-2">
<Link href="/settings" onClick={handleLinkClick}>
<Button
variant="ghost"
className={cn(
"w-full justify-start gap-3",
collapsed && "justify-center px-2",
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300 hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
collapsed && "justify-center px-2 w-12",
)}
>
<Settings className="w-5 h-5 shrink-0" />
{!collapsed && <span>Paramètres</span>}
{!collapsed && <span className="font-semibold text-sm">Paramètres</span>}
</Button>
</Link>
<Button
variant="ghost"
onClick={handleSignOut}
className={cn(
"w-full justify-start gap-3 text-destructive hover:text-destructive hover:bg-destructive/10",
collapsed && "justify-center px-2",
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
"text-destructive hover:text-destructive hover:bg-destructive/15 hover:scale-[1.02] hover:shadow-md",
collapsed && "justify-center px-2 w-12",
)}
>
<LogOut className="w-5 h-5 shrink-0" />
{!collapsed && <span>Déconnexion</span>}
{!collapsed && <span className="font-semibold text-sm">Déconnexion</span>}
</Button>
</div>
</>
@@ -151,29 +162,30 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
return (
<aside
className={cn(
"hidden md:flex flex-col h-screen bg-card border-r border-border transition-all duration-300",
"hidden md:flex flex-col h-screen glass border-r border-border transition-all duration-300",
"backdrop-blur-xl",
collapsed ? "w-16" : "w-64",
)}
>
<div className="flex items-center justify-between p-4 border-b border-border">
<div className="flex items-center justify-between p-6 border-b border-border/30">
{!collapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
<Wallet className="w-5 h-5 text-primary-foreground" />
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary via-primary/90 to-primary/80 flex items-center justify-center shadow-xl shadow-primary/30 backdrop-blur-sm">
<Wallet className="w-6 h-6 text-primary-foreground" />
</div>
<span className="font-semibold text-foreground">FinTrack</span>
<span className="font-black text-xl text-foreground tracking-tight">FinTrack</span>
</div>
)}
<Button
variant="ghost"
size="icon"
onClick={() => setCollapsed(!collapsed)}
className="ml-auto"
className="ml-auto hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110"
>
{collapsed ? (
<ChevronRight className="w-4 h-4" />
<ChevronRight className="w-5 h-5" />
) : (
<ChevronLeft className="w-4 h-4" />
<ChevronLeft className="w-5 h-5" />
)}
</Button>
</div>