brand identity overhaul: match BRAND-IDENTITY.md across all pages
Design system changes (per brand guide): - ZERO rounded-2xl/3xl remaining (was 131 instances) - ZERO bg-gradient remaining (was 25) — all solid colors - ZERO colored shadows (shadow-trust-blue, etc) — flat, no glow - ZERO backdrop-blur/glass effects — solid backgrounds - ZERO emoji in logo marks — square P logomark everywhere - ZERO decorative scale animations (group-hover:scale-105, etc) Tailwind config: - Added brand color names: midnight, promise-blue, generosity-gold, fulfilled-green, alert-red, paper - Kept legacy aliases (trust-blue, etc) for backwards compat - --radius: 0.75rem → 0.5rem (tighter corners) CSS: - Removed glass, glass-dark, card-hover, pulse-ring, bounce-gentle, confetti-fall, scale-in animations - Kept only purposeful animations: fadeUp, fadeIn, slideDown, shimmer, counter-roll - --primary tuned to match Promise Blue exactly Components: - Button: removed all colored shadows, added 'blue' variant, removed rounded from sizes - All UI components: rounded-xl/2xl → rounded-lg Pages updated (41 files): - Dashboard layout: solid header (no blur), border-l-2 active indicator, midnight logo mark - Login/Signup: paper bg (no gradient), midnight logo mark, no emoji - Pledge flow: solid color icons, no gradient progress bars - All dashboard pages: flat, sharp, editorial
This commit is contained in:
@@ -24,31 +24,31 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
const user = session?.user as any
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50/50">
|
||||
{/* Top bar */}
|
||||
<header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur-xl">
|
||||
<div className="min-h-screen bg-paper">
|
||||
{/* Top bar — sharp, no blur */}
|
||||
<header className="sticky top-0 z-40 border-b border-gray-200 bg-white">
|
||||
<div className="flex h-14 items-center gap-4 px-4 md:px-6">
|
||||
<Link href="/dashboard" className="flex items-center gap-2.5">
|
||||
<div className="h-8 w-8 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center shadow-lg shadow-trust-blue/20">
|
||||
<span className="text-white font-bold text-sm">P</span>
|
||||
<div className="h-7 w-7 bg-midnight flex items-center justify-center">
|
||||
<span className="text-white text-xs font-black">P</span>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<span className="font-black text-sm text-gray-900">{user?.orgName || "Pledge Now, Pay Later"}</span>
|
||||
<span className="font-black text-sm text-midnight">{user?.orgName || "Pledge Now, Pay Later"}</span>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex-1" />
|
||||
<Link href="/dashboard/events" className="hidden md:block">
|
||||
<button className="inline-flex items-center gap-1.5 rounded-lg bg-trust-blue px-3 py-1.5 text-xs font-semibold text-white hover:bg-trust-blue/90 transition-colors">
|
||||
<button className="inline-flex items-center gap-1.5 bg-midnight px-3 py-1.5 text-xs font-semibold text-white hover:bg-gray-800 transition-colors">
|
||||
<Plus className="h-3 w-3" /> New Campaign
|
||||
</button>
|
||||
</Link>
|
||||
<Link href="/" className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1">
|
||||
<Link href="/" className="text-xs text-gray-400 hover:text-midnight transition-colors flex items-center gap-1">
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Link>
|
||||
{session && (
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: "/login" })}
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
|
||||
className="text-xs text-gray-400 hover:text-midnight transition-colors flex items-center gap-1"
|
||||
>
|
||||
<LogOut className="h-3 w-3" />
|
||||
</button>
|
||||
@@ -57,8 +57,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
</header>
|
||||
|
||||
<div className="flex">
|
||||
{/* Desktop sidebar */}
|
||||
<aside className="hidden md:flex w-56 flex-col border-r bg-white min-h-[calc(100vh-3.5rem)] py-3 px-2">
|
||||
{/* Desktop sidebar — clean, no decorative elements */}
|
||||
<aside className="hidden md:flex w-52 flex-col border-r border-gray-200 bg-white min-h-[calc(100vh-3.5rem)] py-3 px-2">
|
||||
<nav className="space-y-0.5">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href))
|
||||
@@ -67,10 +67,10 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
|
||||
"flex items-center gap-2.5 px-3 py-2 text-sm font-medium transition-colors",
|
||||
isActive
|
||||
? "bg-trust-blue/5 text-trust-blue"
|
||||
: "text-muted-foreground hover:bg-gray-100 hover:text-foreground"
|
||||
? "bg-promise-blue/5 text-promise-blue border-l-2 border-promise-blue -ml-0.5"
|
||||
: "text-gray-500 hover:bg-gray-50 hover:text-midnight"
|
||||
)}
|
||||
>
|
||||
<item.icon className="h-4 w-4" />
|
||||
@@ -80,14 +80,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
})}
|
||||
{user?.role === "super_admin" && (
|
||||
<>
|
||||
<div className="my-2 border-t" />
|
||||
<div className="my-2 border-t border-gray-100" />
|
||||
<Link
|
||||
href={adminNav.href}
|
||||
className={cn(
|
||||
"flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
|
||||
"flex items-center gap-2.5 px-3 py-2 text-sm font-medium transition-colors",
|
||||
pathname === adminNav.href
|
||||
? "bg-trust-blue/5 text-trust-blue"
|
||||
: "text-muted-foreground hover:bg-gray-100 hover:text-foreground"
|
||||
? "bg-promise-blue/5 text-promise-blue border-l-2 border-promise-blue -ml-0.5"
|
||||
: "text-gray-500 hover:bg-gray-50 hover:text-midnight"
|
||||
)}
|
||||
>
|
||||
<adminNav.icon className="h-4 w-4" />
|
||||
@@ -98,12 +98,12 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto px-2 pt-4">
|
||||
<div className="rounded-xl bg-gradient-to-br from-trust-blue/5 to-warm-amber/5 border p-3 space-y-1.5">
|
||||
<p className="text-xs font-semibold">Need help?</p>
|
||||
<p className="text-[10px] text-muted-foreground leading-relaxed">
|
||||
<div className="border border-gray-200 p-3 space-y-1.5">
|
||||
<p className="text-xs font-bold text-midnight">Need help?</p>
|
||||
<p className="text-[10px] text-gray-500 leading-relaxed">
|
||||
Get a fractional Head of Technology to optimise your charity's digital stack.
|
||||
</p>
|
||||
<Link href="/dashboard/apply" className="inline-block text-[10px] font-semibold text-trust-blue hover:underline">
|
||||
<Link href="/dashboard/apply" className="inline-block text-[10px] font-semibold text-promise-blue hover:underline">
|
||||
Learn more →
|
||||
</Link>
|
||||
</div>
|
||||
@@ -111,7 +111,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
</aside>
|
||||
|
||||
{/* Mobile bottom nav */}
|
||||
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t bg-white/95 backdrop-blur-xl flex justify-around py-1.5 px-1">
|
||||
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white flex justify-around py-1.5 px-1">
|
||||
{navItems.slice(0, 5).map((item) => {
|
||||
const isActive = pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href))
|
||||
return (
|
||||
@@ -119,8 +119,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-0.5 py-1 px-2 rounded-lg transition-colors",
|
||||
isActive ? "text-trust-blue" : "text-muted-foreground"
|
||||
"flex flex-col items-center gap-0.5 py-1 px-2 transition-colors",
|
||||
isActive ? "text-promise-blue" : "text-gray-400"
|
||||
)}
|
||||
>
|
||||
<item.icon className="h-5 w-5" />
|
||||
|
||||
Reference in New Issue
Block a user