Marketing/4ventures-client-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: sistema visual de marca (Midnight/Orange, Canela, shell oscuro)

Browse Source
This commit is contained in:
Marcos Fargas
2026-10-17 18:36:16 +02:00
parent 812052b7eb
commit ae52f2f50a
6 changed files with 289 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/DashboardShell.tsx
View File

@@ -140,13 +140,17 @@ function NavLink({
<Link
href={item.href}
onClick={onNavigate}
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
aria-current={active ? 'page' : undefined}
className={`group relative flex items-center gap-3 rounded-md px-3 py-2 text-[14px] font-medium transition-colors ${
active
? 'bg-brand-50 text-gray-900 border border-brand-200'
: 'text-gray-600 border border-transparent hover:text-gray-900 hover:bg-gray-50'
? 'bg-white/[0.07] text-white'
: 'text-mist-300 hover:bg-white/[0.05] hover:text-white'
}`}
>
<Icon className={`w-4 h-4 shrink-0 ${item.iconClass}`} />
{active ? (
<span aria-hidden className="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-r bg-brand-500" />
) : null}
<Icon className={`h-4 w-4 shrink-0 ${active ? 'text-brand-500' : 'text-mist-400 group-hover:text-mist-300'}`} />
{item.label}
</Link>
);
@@ -203,7 +207,7 @@ export default function DashboardShell({
const sidebar = (
<div className="flex h-full flex-col">
<div className="flex items-center gap-3 px-2 py-3 border-b border-gray-200 mb-5">
<div className="mb-6 flex items-center gap-3 border-b border-white/10 px-2 pb-4 pt-2">
{clientLogoUrl ? (
// eslint-disable-next-line @next/next/no-img-element
<img
@@ -211,7 +215,7 @@ export default function DashboardShell({
alt={title}
width={40}
height={40}
className="rounded-lg object-contain shrink-0 w-10 h-10 bg-white border border-gray-100"
className="h-10 w-10 shrink-0 rounded-md bg-white object-contain p-1"
/>
) : (
<Image
@@ -219,21 +223,21 @@ export default function DashboardShell({
alt="4Ventures"
width={40}
height={40}
className="rounded-lg object-cover shrink-0"
className="h-10 w-10 shrink-0 rounded-md object-cover"
priority
/>
)}
<div className="min-w-0">
<p className="font-bold text-sm tracking-wide text-gray-900 leading-tight truncate">
<p className="truncate text-[15px] font-medium leading-tight text-white">
{title}
</p>
<p className="text-xs text-gray-500 font-medium leading-tight">
<p className="mt-0.5 text-[12px] leading-tight text-mist-400">
{subtitle}
</p>
</div>
<button
type="button"
className="ml-auto md:hidden rounded-lg p-2 text-gray-500 hover:bg-gray-100"
className="ml-auto rounded-md p-2 text-mist-400 hover:bg-white/10 hover:text-white md:hidden"
onClick={close}
aria-label="Cerrar menú"
>
@@ -241,15 +245,15 @@ export default function DashboardShell({
</button>
</div>
<nav className="flex-1 overflow-y-auto space-y-1.5 pr-1">
<nav className="flex-1 space-y-0.5 overflow-y-auto pr-1">
{visibleNav.map((item) => {
// Sub-enlaces de Social: siempre que Social esté en el menú.
const underSocial = item.moduleId === 'social';
const subLinkCls = (href: string) =>
`ml-4 flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-medium transition-all ${
`ml-7 flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] font-medium transition-colors ${
isActive(pathname, href)
? 'bg-brand-50 text-gray-900 border border-brand-200'
: 'text-gray-500 border border-transparent hover:text-gray-900 hover:bg-gray-50'
? 'bg-white/[0.07] text-white'
: 'text-mist-400 hover:bg-white/[0.05] hover:text-white'
}`;
return (
<div key={item.href} className="space-y-0.5">
@@ -262,7 +266,7 @@ export default function DashboardShell({
onClick={close}
className={subLinkCls('/dashboard/calendario')}
>
<CalendarDays className="w-3.5 h-3.5 shrink-0 text-pink-500" />
<CalendarDays className="h-3.5 w-3.5 shrink-0" />
Calendario editorial
</Link>
) : null}
@@ -272,7 +276,7 @@ export default function DashboardShell({
onClick={close}
className={subLinkCls('/dashboard/creatives')}
>
<Images className="w-3.5 h-3.5 shrink-0 text-fuchsia-500" />
<Images className="h-3.5 w-3.5 shrink-0" />
Pipeline RRSS
</Link>
) : null}
@@ -283,9 +287,9 @@ export default function DashboardShell({
})}
{isAgency ? (
<div className="pt-4 mt-4 border-t border-gray-200">
<span className="px-3 text-[10px] font-bold uppercase tracking-wider text-gray-500">
Agencia OS
<div className="mt-5 border-t border-white/10 pt-4">
<span className="px-3 text-[12px] font-medium text-mist-400">
Agencia
</span>
<div className="mt-1 space-y-0.5">
<NavLink
@@ -311,18 +315,18 @@ export default function DashboardShell({
) : null}
</nav>
<div className="pt-4 mt-4 border-t border-gray-200 space-y-3">
<div className="px-2 py-2 rounded-xl bg-gray-50 border border-gray-200">
<div className="flex items-center gap-2 mb-1">
<UserCheck className="w-3.5 h-3.5 text-brand-500 shrink-0" />
<p className="text-xs font-medium text-gray-900 truncate">{email}</p>
<div className="mt-4 space-y-3 border-t border-white/10 pt-4">
<div className="rounded-md bg-white/[0.05] px-3 py-2.5">
<div className="mb-1 flex items-center gap-2">
<UserCheck className="h-3.5 w-3.5 shrink-0 text-mist-400" />
<p className="truncate text-[13px] font-medium text-white">{email}</p>
</div>
<div className="flex items-center justify-between gap-2">
<span className="text-[10px] text-gray-500 capitalize truncate">
<span className="truncate text-[12px] capitalize text-mist-400">
{company}
</span>
<span
className="text-[9px] uppercase tracking-wider font-semibold px-1.5 py-0.5 rounded bg-brand-50 text-brand-600 shrink-0"
className="shrink-0 rounded-sm bg-brand-500/15 px-1.5 py-0.5 text-[11px] font-medium capitalize text-brand-400"
title={role}
>
{role === 'admin'
@@ -337,16 +341,16 @@ export default function DashboardShell({
<form action={logoutAction}>
<button
type="submit"
className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-gray-500 hover:text-red-600 hover:bg-red-50 border border-transparent hover:border-red-100 transition-all"
className="flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-[13px] font-medium text-mist-400 transition-colors hover:bg-white/[0.06] hover:text-white"
>
<LogOut className="w-3.5 h-3.5" />
Cerrar Sesión
</button>
</form>
<div className="flex items-center justify-between px-2 pt-1 text-[11px] text-gray-400">
<span className="flex items-center gap-1 text-emerald-600">
<ShieldCheck className="w-3 h-3" /> RLS Activo
<div className="flex items-center justify-between px-2 pt-1 text-[12px] text-mist-400">
<span className="flex items-center gap-1.5">
<ShieldCheck className="h-3 w-3 text-mint-200" /> Datos aislados por cliente
</span>
</div>
</div>
@@ -354,8 +358,8 @@ export default function DashboardShell({
);
return (
<div className="flex min-h-screen bg-background text-gray-900">
<aside className="hidden md:flex w-64 shrink-0 flex-col border-r border-gray-200 bg-sidebar p-4">
<div className="flex min-h-screen bg-background text-ink">
<aside className="hidden w-[248px] shrink-0 flex-col bg-sidebar p-4 text-white md:flex">
{sidebar}
</aside>
@@ -363,29 +367,29 @@ export default function DashboardShell({
<div className="fixed inset-0 z-50 md:hidden">
<button
type="button"
className="absolute inset-0 bg-black/40"
className="absolute inset-0 bg-ink/50"
aria-label="Cerrar menú"
onClick={close}
/>
<aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar border-r border-gray-200 p-4 shadow-xl">
<aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar p-4 text-white shadow-xl">
{sidebar}
</aside>
</div>
) : null}
<div className="flex min-w-0 flex-1 flex-col">
<header className="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur-md px-4 md:px-8 py-2.5 space-y-2">
<header className="sticky top-0 z-30 space-y-2 border-b border-border bg-background/90 px-4 py-2.5 backdrop-blur-md md:px-8">
<div className="flex items-center gap-3 min-h-10">
<button
type="button"
className="md:hidden rounded-lg p-2 text-gray-600 hover:bg-gray-100"
className="rounded-md p-2 text-ink-muted hover:bg-mist-100 md:hidden"
onClick={() => setOpen(true)}
aria-label="Abrir menú"
>
<Menu className="w-5 h-5" />
</button>
<div className="flex min-w-0 items-center gap-2 text-sm text-gray-500">
<div className="flex min-w-0 items-center gap-2 text-sm text-ink-muted">
<span className="hidden sm:inline shrink-0">
{isAgency ? 'Contexto:' : 'Cliente / Portal:'}
</span>
@@ -410,8 +414,8 @@ export default function DashboardShell({
</div>
</header>
<main className="flex-1 overflow-y-auto">
<div className="mx-auto w-full max-w-7xl px-4 py-6 md:px-8 md:py-8">
<main className="canvas-dots flex-1 overflow-y-auto">
<div className="mx-auto w-full max-w-7xl px-4 py-6 md:px-8 md:py-9">
{children}
</div>
</main>