simone/clienthub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: align light palette to Quiet Luxury reference

Browse Source 
- Page background now #F8F9FA (was white); tokens matched to reference:
  foreground slate-900, muted slate-50/slate-500, border slate-200,
  card pure white, tertiary slate-400, border-light slate-100
- Sidebar colors matched to mock: emerald-200/70 inactive, white/8 active
  with emerald-400 active icon, emerald-50 logo, red-300 logout, right border
- Content wrapped in max-w-[1400px] centered container (px-8 lg:px-10)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Simone Cavalli
2026-07-10 16:33:00 +02:00
parent 9eb2d45c67
commit 26d752892a
3 changed files with 37 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/AdminShell.tsx
+3 -1
View File
@@ -58,7 +58,9 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
</div>
</header>
<main className="flex-1 px-8 py-8 overflow-y-auto">{children}</main>
<main className="flex-1 overflow-y-auto">
<div className="max-w-[1400px] w-full mx-auto px-8 py-8 lg:px-10">{children}</div>
</main>
</div>
</div>
);
src/components/admin/AdminSidebar.tsx
+13 -8
View File
@@ -41,7 +41,7 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
return (
<aside
className={cn(
"shrink-0 min-h-screen bg-[#1A463C] flex flex-col overflow-hidden",
"shrink-0 min-h-screen bg-[#1A463C] border-r border-emerald-950/20 flex flex-col overflow-hidden",
"transition-[width] duration-350 ease-[cubic-bezier(0.4,0,0.2,1)]",
collapsed ? "w-16" : "w-[200px]"
)}
@@ -54,7 +54,7 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
)}
>
{!collapsed && (
<span className="font-bold text-white tracking-tight text-sm whitespace-nowrap">
<span className="font-bold text-emerald-50 tracking-tight text-sm whitespace-nowrap">
iamcavalli
</span>
)}
@@ -70,14 +70,18 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
href={href}
title={collapsed ? label : undefined}
className={cn(
"flex items-center py-2 rounded-md text-sm transition-colors",
"flex items-center py-2.5 rounded-lg text-sm transition-all duration-200",
rowClass,
active
? "bg-white/15 text-white font-medium"
: "text-white/65 hover:text-white hover:bg-white/10"
? "bg-white/[0.08] text-white font-medium shadow-sm"
: "text-emerald-200/70 hover:text-white hover:bg-white/5"
)}
>
<Icon size={16} strokeWidth={1.8} className="shrink-0" />
<Icon
size={16}
strokeWidth={1.8}
className={cn("shrink-0", active && "text-emerald-400")}
/>
{!collapsed && <span className="whitespace-nowrap">{label}</span>}
</Link>
);
@@ -92,14 +96,15 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
collapsed ? "justify-center px-0" : "justify-between px-3"
)}
>
{!collapsed && <span className="text-xs text-white/50">Tema</span>}
{!collapsed && <span className="text-xs text-emerald-200/50">Tema</span>}
<ThemeToggle />
</div>
<button
onClick={() => signOut({ callbackUrl: "/admin/login" })}
title={collapsed ? "Esci" : undefined}
className={cn(
"flex items-center py-2 w-full rounded-md text-sm text-white/65 hover:text-white hover:bg-white/10 transition-colors",
"flex items-center py-2.5 w-full rounded-lg text-sm transition-all duration-200",
"text-red-300/80 hover:text-red-200 hover:bg-red-950/20",
rowClass
)}
>