feat: enhance global styles and component themes with new semantic colors; integrate ThemeProvider for improved theme management and update color usage across various components for consistency

This commit is contained in:
Julien Froidefond
2025-12-22 08:40:25 +01:00
parent 6c14484636
commit 4f13134ef0
39 changed files with 809 additions and 432 deletions

View File

@@ -88,20 +88,17 @@ function SidebarContent({
"w-full justify-start gap-4 h-12 rounded-2xl",
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 mx-auto",
collapsed && "justify-center px-2 w-12 mx-auto"
)}
>
<item.icon
className={cn(
"w-5 h-5 shrink-0",
isActive && "text-primary",
)}
className={cn("w-5 h-5 shrink-0", isActive && "text-primary")}
/>
{!collapsed && (
<span
className={cn(
"font-semibold text-sm",
isActive && "text-primary font-bold",
isActive && "text-primary font-bold"
)}
>
{item.label}
@@ -116,7 +113,7 @@ function SidebarContent({
<div
className={cn(
"border-t border-border/30 space-y-2",
collapsed ? "p-2" : "p-4",
collapsed ? "p-2" : "p-4"
)}
>
<Link href="/settings" onClick={handleLinkClick}>
@@ -124,7 +121,7 @@ function SidebarContent({
variant="ghost"
className={cn(
"w-full justify-start gap-4 h-12 rounded-2xl",
collapsed && "justify-center px-2 w-12 mx-auto",
collapsed && "justify-center px-2 w-12 mx-auto"
)}
>
<Settings className="w-5 h-5 shrink-0" />
@@ -139,7 +136,7 @@ function SidebarContent({
className={cn(
"w-full justify-start gap-4 h-12 rounded-2xl",
"text-destructive",
collapsed && "justify-center px-2 w-12 mx-auto",
collapsed && "justify-center px-2 w-12 mx-auto"
)}
>
<LogOut className="w-5 h-5 shrink-0" />
@@ -164,7 +161,10 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
if (isMobile) {
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent side="left" className="w-64 p-0">
<SheetContent
side="left"
className="w-64 p-0 bg-sidebar text-sidebar-foreground border-sidebar-border"
>
<SheetTitle className="sr-only">Navigation</SheetTitle>
<div className="flex flex-col h-full">
<SidebarContent
@@ -180,15 +180,15 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
return (
<aside
className={cn(
"hidden md:flex flex-col h-screen glass border-r border-border",
"hidden md:flex flex-col h-screen bg-sidebar text-sidebar-foreground border-r border-sidebar-border",
"backdrop-blur-xl",
collapsed ? "w-16" : "w-64",
collapsed ? "w-16" : "w-64"
)}
>
<div
className={cn(
"flex items-center border-b border-border/30",
collapsed ? "justify-center p-4" : "justify-between p-6",
collapsed ? "justify-center p-4" : "justify-between p-6"
)}
>
{!collapsed && (
@@ -205,10 +205,7 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
variant="ghost"
size="icon"
onClick={() => setCollapsed(!collapsed)}
className={cn(
"rounded-xl",
collapsed ? "" : "ml-auto",
)}
className={cn("rounded-xl", collapsed ? "" : "ml-auto")}
>
{collapsed ? (
<ChevronRight className="w-5 h-5" />