tyler/route-commerce

Fork 1

Files

T

tyler 53a9671461 Initial commit - Route Commerce platform

2026-06-01 19:41:12 +00:00

9.5 KiB

Raw Blame History

Admin Pages Redesign Implementation Plan

Goal: Unify admin pages with warm earth-tone dark sidebar, cream content, emerald accent, monospace data tables.

Architecture: Create shared CSS design tokens, update sidebar with warm dark theme, then update each content page to use consistent styling.

Tech Stack: Next.js, Tailwind CSS, React

Task 1: Create CSS Design Tokens

Files:

Create: src/styles/admin-tokens.css
Step 1: Create CSS tokens file

/* Admin Design Tokens */
:root {
  /* Sidebar - Warm Earth Tones */
  --sidebar-bg: #1c1917;
  --sidebar-border: #292524;
  --sidebar-text: #d6d3d1;
  --sidebar-text-muted: #78716c;
  --sidebar-text-hover: #fafaf9;
  --sidebar-active-bg: rgba(5, 150, 105, 0.1);
  --sidebar-active-border: #059669;

  /* Content Area - Warm Cream */
  --bg-page: #fdfaf6;
  --bg-card: #ffffff;
  --border-subtle: #e7e5e4;
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #a8a29e;

  /* Accent - Emerald */
  --accent: #059669;
  --accent-hover: #047857;
  --accent-light: #d1fae5;
  --accent-text: #065f46;

  /* Status */
  --status-pending: #f59e0b;
  --status-active: #059669;
  --status-muted: #a8a29e;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-card-hover: 0 4px 6px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.06);

  /* Typography */
  --font-heading: 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

Step 2: Add to global CSS or import in layout

Check src/app/globals.css and add import at top:

@import './styles/admin-tokens.css';

Run: ls src/app/globals.css Expected: File exists

Step 3: Commit

git add src/styles/admin-tokens.css src/app/globals.css
git commit -m "feat: add admin CSS design tokens"

Task 2: Update AdminSidebar Component

Files:

Modify: src/components/admin/AdminSidebar.tsx
Step 1: Read current sidebar

Run: cat src/components/admin/AdminSidebar.tsx | head -120

Step 2: Update sidebar styling for warm earth tones

Replace the sidebar className from:

bg-white border-r border-stone-200

To:

bg-stone-900 border-r border-stone-800

Update text colors from stone-600/stone-950 to warm equivalents:

inactive text: stone-300 → sidebar-text
active text: emerald-700 → emerald-400
hover: stone-50 → sidebar-text-hover

Update active state background from bg-emerald-50 to bg-emerald-900/20

Update role badge background from bg-stone-50 to bg-stone-800

Update sign out button hover from bg-stone-50 to bg-stone-800

Step 3: Add Back to Site link

In the logo row, after the admin logo link, add:

<a
  href="/"
  className="ml-4 text-xs text-stone-500 hover:text-stone-300 transition-colors"
>
  ← Back to Site
</a>

Step 4: Commit

git add src/components/admin/AdminSidebar.tsx
git commit -m "style: update sidebar to warm earth tones with Back to Site link"

Task 3: Update Admin Layout Background

Files:

Modify: src/app/admin/layout.tsx
Step 1: Update background class

Change from:

<div className="min-h-screen bg-stone-100 lg:pl-60">

To:

<div className="min-h-screen bg-[var(--bg-page)] lg:pl-60">

Step 2: Also update the access denied div

Same change for the access denied div.

Step 3: Commit

git add src/app/admin/layout.tsx
git commit -m "style: update admin layout to use warm cream background"

Task 4: Update Dashboard Page

Files:

Modify: src/app/admin/page.tsx
Step 1: Update page background

Change bg-stone-100 to bg-transparent (inherits from layout)

Step 2: Update section headers

Change text-stone-500 (muted labels) to var(--text-muted) Change text-stone-950 to var(--text-primary) Change text-stone-600 to var(--text-secondary)

Step 3: Update cards to use white bg

Cards already use card class which should be white with shadow. Verify this works with the warm cream background.

Step 4: Commit

git add src/app/admin/page.tsx
git commit -m "style: update dashboard page styling"

Task 5: Update Orders Page

Files:

Modify: src/app/admin/orders/page.tsx
Modify: src/components/admin/AdminOrdersPanel.tsx
Step 1: Remove dark wrapper from orders panel

In AdminOrdersPanel, remove the dark wrapper:

// Remove: <div className="min-h-screen bg-zinc-950">
// Just return the inner content, let layout handle bg

Step 2: Update table to warm cream theme

Replace all bg-zinc-900, bg-zinc-950, border-zinc-800, text-zinc-* with warm equivalents:

bg-zinc-900 → bg-white
bg-zinc-950 → bg-stone-50
border-zinc-800 → border-stone-200
text-zinc-100 → text-stone-900
text-zinc-200 → text-stone-700
text-zinc-400 → text-stone-500
text-zinc-500 → text-stone-400
Step 3: Add monospace to data cells

Add font-mono to order ID, phone numbers, dates, amounts.

Step 4: Update status badges

Replace bg-emerald-950/60 text-emerald-400 border-emerald-800/50 with:

bg-emerald-100 text-emerald-700 border border-emerald-200

Same for amber and purple status badges.

Step 5: Update filter bar

Change from dark filter buttons to light theme:

<div className="flex gap-1 rounded-lg border border-stone-200 bg-white p-1">
  <button className={statusFilter === f ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "text-stone-500 hover:text-stone-700 hover:bg-stone-50"}>

Step 6: Update search/select inputs

Change bg-zinc-900 to bg-white, border-zinc-800 to border-stone-200, text-zinc-100 to text-stone-900

Step 7: Update orders page wrapper

In orders/page.tsx, the main already has bg-stone-100 px-6 py-10. Change to bg-transparent px-6 py-10.

Step 8: Commit

git add src/components/admin/AdminOrdersPanel.tsx src/app/admin/orders/page.tsx
git commit -m "style: convert orders table from dark to warm cream theme"

Task 6: Update Products Page

Files:

Modify: src/app/admin/products/page.tsx
Step 1: Change background

From bg-stone-100 to bg-transparent

Step 2: Update button

Change bg-blue-600 hover:bg-blue-500 to bg-emerald-600 hover:bg-emerald-500 for Add Product button.

Step 3: Verify card styling

The table wrapper already uses rounded-2xl bg-white shadow-xl. This should work with cream bg.

Step 4: Commit

git add src/app/admin/products/page.tsx
git commit -m "style: update products page to match admin theme"

Task 7: Update Communications Page

Files:

Modify: src/app/admin/communications/page.tsx
Step 1: Change background

From bg-stone-100 to bg-transparent

Step 2: Commit

git add src/app/admin/communications/page.tsx
git commit -m "style: update communications page to match admin theme"

Task 8: Update Settings Page

Files:

Modify: src/app/admin/settings/page.tsx
Step 1: Change background

From bg-stone-100 to bg-transparent

Step 2: Commit

git add src/app/admin/settings/page.tsx
git commit -m "style: update settings page to match admin theme"

Task 9: Add Google Fonts to Layout

Files:

Modify: src/app/layout.tsx (root layout, not admin layout)
Step 1: Add font links

In the <head> section, add:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Step 2: Apply to body/html

Add style={{ fontFamily: 'var(--font-body)' }} to the body or html tag.

Step 3: Commit

git add src/app/layout.tsx
git commit -m "style: add DM Sans and JetBrains Mono fonts"

Task 10: Test and Verify

Step 1: Start dev server

Run: npm run dev Expected: Dev server starts on port 3000

Step 2: Check admin dashboard

Open: http://localhost:3000/admin Expected: Warm cream background, dark earth-tone sidebar with emerald accent, Back to Site link visible

Step 3: Check orders page

Navigate to Orders Expected: Light cream table with monospace data, warm status badges

Step 4: Check products page

Navigate to Products Expected: Consistent styling, emerald Add Product button

Step 5: Mobile test

Resize browser to mobile width Expected: Sidebar hidden, hamburger visible, tap reveals sidebar overlay

Step 6: Final commit if all good

git add -A && git commit -m "style: complete admin redesign - warm earth sidebar, cream content, emerald accent"

Spec Coverage Check

Warm earth-tone sidebar with Back to Site
Cream/ivory content background
Emerald accent for active states
Monospace for data tables
Single nav surface (no duplicate headers)
All pages unified
Mobile responsive sidebar

9.5 KiB Raw Blame History

Admin Pages Redesign Implementation Plan

Task 1: Create CSS Design Tokens

Task 2: Update AdminSidebar Component

Task 3: Update Admin Layout Background

Task 4: Update Dashboard Page

Task 5: Update Orders Page

Task 6: Update Products Page

Task 7: Update Communications Page

Task 8: Update Settings Page

Task 9: Add Google Fonts to Layout

Task 10: Test and Verify

Spec Coverage Check

9.5 KiB

Raw Blame History