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:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user