From 8fd4207ee63347e7f8f0a9dfd4591f08773bccd4 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Sun, 22 Mar 2026 21:39:05 +0000
Subject: [PATCH] refactor: charcoal palette + sidebar drawer fixes

- Switch from true-dark to charcoal palette (sidebar darkest, content lighter)
  Page #1a1c23, Sidebar #10121a, Card #22252e, Border #2e3240
- Update all Tailwind semantic mappings to match new palette
- Update landing page CSS hardcoded hex to new palette values
- Fix remaining hardcoded hex in SurveyResponsesPage, SessionsPanel, FlowPilotMessageBar
- Sidebar drawer starts below topbar (top: var(--topbar-h)) instead of viewport top
- Drawer section title uses amber (#fbbf24) for visual pop
- Unify all rail icons: white when inactive, cyan with bg-accent-dim when active

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/dashboard/SessionsPanel.tsx    |  2 +-
 .../flowpilot/FlowPilotMessageBar.tsx         |  2 +-
 frontend/src/components/layout/Sidebar.tsx    | 21 +++----
 frontend/src/index.css                        | 40 ++++++------
 .../src/pages/admin/SurveyResponsesPage.tsx   |  4 +-
 frontend/src/styles/landing.css               | 62 +++++++++----------
 6 files changed, 63 insertions(+), 68 deletions(-)

diff --git a/frontend/src/components/dashboard/SessionsPanel.tsx b/frontend/src/components/dashboard/SessionsPanel.tsx
index 173e4a13..c71437fb 100644
--- a/frontend/src/components/dashboard/SessionsPanel.tsx
+++ b/frontend/src/components/dashboard/SessionsPanel.tsx
@@ -28,7 +28,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
           View All
         </Link>
       </div>
-      <div className="divide-y divide-[#1e2130]">
+      <div className="divide-y divide-border">
         {sessions.map(session => (
           <Link
             key={session.id}
diff --git a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
index 7e74001a..7c5b59dd 100644
--- a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
@@ -51,7 +51,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
             ? 'border-border/50 opacity-50'
             : 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
         )}
-        style={{ background: '#14161d' }}
+        style={{ background: 'var(--color-bg-card)' }}
       >
         <textarea
           ref={textareaRef}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 4d774098..f9454632 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -243,9 +243,6 @@ export function Sidebar() {
     const Icon = item.icon
     const hasChildren = item.children && item.children.length > 0
 
-    // Home icon: always cyan icon, but only bg-accent-dim when route is exactly "/"
-    const isHome = item.href === '/' && item.shortLabel === 'Home'
-
     return (
       <div
         key={key}
@@ -258,18 +255,14 @@ export function Sidebar() {
           onFocus={() => hasChildren && !sidebarPinned ? openFlyout(key) : undefined}
           className={cn(
             'group relative flex flex-col items-center justify-center rounded-lg px-2 py-3 transition-all duration-150',
-            isHome
-              ? active
-                ? 'bg-accent-dim text-accent-text'
-                : 'text-accent-text'
-              : active
-                ? 'bg-accent-dim text-accent-text'
-                : 'text-text-rail-label hover:text-muted-foreground'
+            active
+              ? 'bg-accent-dim text-accent-text'
+              : 'text-text-rail-label hover:text-foreground'
           )}
           title={item.label}
         >
           <span className="relative">
-            <Icon size={24} strokeWidth={1.6} className={active || isHome ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
+            <Icon size={24} strokeWidth={1.6} className={active ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
             {item.badge !== undefined && item.badge > 0 && (
               <span className="absolute -right-2 -top-1.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[0.5rem] font-bold text-background">
                 {item.badge > 99 ? '99+' : item.badge}
@@ -448,8 +441,8 @@ export function Sidebar() {
       {/* Drawer panel — fixed position, full height, resizable, overlays main content */}
       {activeFlyoutGroup && activeFlyoutGroup.children && (
         <div
-          className="fixed top-0 bottom-0 z-50 flex"
-          style={{ left: '72px' }}
+          className="fixed bottom-0 z-50 flex"
+          style={{ top: 'var(--topbar-h)', left: '72px' }}
           onMouseEnter={keepFlyout}
           onMouseLeave={closeFlyout}
         >
@@ -464,7 +457,7 @@ export function Sidebar() {
           >
             {/* Drawer header */}
             <div className="px-3 mb-3">
-              <h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-text-muted">
+              <h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-[#fbbf24]">
                 {activeFlyoutGroup.label}
               </h3>
             </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index fd178986..ef9ca6d2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -8,25 +8,25 @@
 @import '@xyflow/react/dist/style.css';
 
 @theme {
-  /* ── Surface colors ────────────────────────────── */
-  --color-bg-page: #0c0d10;
-  --color-bg-sidebar: #0f1118;
-  --color-bg-card: #14161d;
-  --color-bg-card-hover: #191c25;
-  --color-bg-input: #191c25;
-  --color-bg-code: #0e1017;
-  --color-bg-elevated: #1c1f2a;
+  /* ── Surface colors (Charcoal — sidebar darkest) ─ */
+  --color-bg-page: #1a1c23;
+  --color-bg-sidebar: #10121a;
+  --color-bg-card: #22252e;
+  --color-bg-card-hover: #282b35;
+  --color-bg-input: #282b35;
+  --color-bg-code: #14161e;
+  --color-bg-elevated: #2e3140;
 
   /* ── Text colors ───────────────────────────────── */
   --color-text-heading: #f0f2f5;
   --color-text-primary: #e2e5eb;
   --color-text-secondary: #848b9b;
   --color-text-muted: #4f5666;
-  --color-text-rail-label: #6b7280;
+  --color-text-rail-label: #e2e5eb;
 
   /* ── Border colors ─────────────────────────────── */
-  --color-border-default: #1e2130;
-  --color-border-hover: #2a2f3d;
+  --color-border-default: #2e3240;
+  --color-border-hover: #3d4252;
 
   /* ── Accent (cyan) ─────────────────────────────── */
   --color-accent: #22d3ee;
@@ -43,24 +43,24 @@
   --color-danger-dim: rgba(248,113,113,0.10);
 
   /* ── Tailwind semantic mappings ─────────────────── */
-  --color-background: #0c0d10;
+  --color-background: #1a1c23;
   --color-foreground: #e2e5eb;
-  --color-card: #14161d;
+  --color-card: #22252e;
   --color-card-foreground: #e2e5eb;
-  --color-popover: #14161d;
+  --color-popover: #22252e;
   --color-popover-foreground: #e2e5eb;
   --color-primary: #22d3ee;
   --color-primary-foreground: #ffffff;
-  --color-secondary: #1c1f2a;
+  --color-secondary: #2e3140;
   --color-secondary-foreground: #e2e5eb;
-  --color-muted: #1c1f2a;
+  --color-muted: #2e3140;
   --color-muted-foreground: #848b9b;
-  --color-accent-tw: #1c1f2a;
+  --color-accent-tw: #2e3140;
   --color-accent-foreground: #e2e5eb;
   --color-destructive: #f87171;
   --color-destructive-foreground: #ffffff;
-  --color-border: #1e2130;
-  --color-input: #191c25;
+  --color-border: #2e3240;
+  --color-input: #282b35;
   --color-ring: #22d3ee;
 
   /* ── Radii ─────────────────────────────────────── */
@@ -106,6 +106,7 @@
 :root {
   --sidebar-w: 72px;
   --sidebar-w-pinned: 260px;
+  --topbar-h: 44px;
   --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -274,6 +275,7 @@
 
   .topbar {
     grid-column: 1 / -1;
+    height: var(--topbar-h);
   }
 
   .sidebar {
diff --git a/frontend/src/pages/admin/SurveyResponsesPage.tsx b/frontend/src/pages/admin/SurveyResponsesPage.tsx
index 29c74fb6..0b0d8ef0 100644
--- a/frontend/src/pages/admin/SurveyResponsesPage.tsx
+++ b/frontend/src/pages/admin/SurveyResponsesPage.tsx
@@ -100,7 +100,7 @@ function ExpandedDetail({ response }: { response: SurveyResponseDetail }) {
                 key={q.id}
                 className="rounded-lg p-4"
                 style={{
-                  background: '#14161d',
+                  background: 'var(--color-bg-card)',
                   border: '1px solid var(--glass-border)',
                 }}
               >
@@ -223,7 +223,7 @@ function ResponseRow({
               <div className="fixed inset-0 z-40" onClick={() => setShowMenu(false)} />
               <div
                 className="absolute right-3 top-full z-50 mt-1 w-44 rounded-xl py-1 shadow-xl"
-                style={{ background: '#14161d', border: '1px solid var(--glass-border)', }}
+                style={{ background: 'var(--color-bg-card)', border: '1px solid var(--glass-border)', }}
               >
                 <button
                   onClick={() => { onMarkRead(); setShowMenu(false) }}
diff --git a/frontend/src/styles/landing.css b/frontend/src/styles/landing.css
index aeb59ca0..37d640fb 100644
--- a/frontend/src/styles/landing.css
+++ b/frontend/src/styles/landing.css
@@ -6,7 +6,7 @@
 
 .landing-page {
   font-family: 'IBM Plex Sans', sans-serif;
-  background: #0c0d10;
+  background: #1a1c23;
   color: #e2e5eb;
   line-height: 1.6;
   overflow-x: hidden;
@@ -61,7 +61,7 @@
 
 .landing-nav.scrolled {
   background: rgba(12, 13, 16, 0.95);
-  border-bottom: 1px solid #1e2130;
+  border-bottom: 1px solid #2e3240;
 }
 
 .landing-nav-inner {
@@ -184,8 +184,8 @@
   gap: 8px;
   padding: 6px 16px;
   border-radius: 100px;
-  background: #14161d;
-  border: 1px solid #1e2130;
+  background: #22252e;
+  border: 1px solid #2e3240;
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.75rem;
   font-weight: 500;
@@ -280,8 +280,8 @@
   text-decoration: none;
   padding: 0.85rem 2rem;
   border-radius: 10px;
-  background: #14161d;
-  border: 1px solid #1e2130;
+  background: #22252e;
+  border: 1px solid #2e3240;
   transition: background 0.3s, border-color 0.3s, color 0.3s;
 }
 
@@ -341,8 +341,8 @@
 
 .landing-preview-window {
   border-radius: 12px;
-  border: 1px solid #1e2130;
-  background: #14161d;
+  border: 1px solid #2e3240;
+  background: #22252e;
   overflow: hidden;
   box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
 }
@@ -353,7 +353,7 @@
   padding: 0 0 0 14px;
   height: 40px;
   background: rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid #1e2130;
+  border-bottom: 1px solid #2e3240;
 }
 
 .landing-preview-tab {
@@ -365,7 +365,7 @@
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.7rem;
   color: #848b9b;
-  border-right: 1px solid #1e2130;
+  border-right: 1px solid #2e3240;
   background: rgba(255, 255, 255, 0.02);
   position: relative;
 }
@@ -409,7 +409,7 @@
   padding: 4px 12px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.03);
-  border: 1px solid #1e2130;
+  border: 1px solid #2e3240;
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.65rem;
   color: #5a6170;
@@ -496,7 +496,7 @@
   flex: 1;
   background: rgba(255, 255, 255, 0.01);
   border-radius: 12px;
-  border: 1px dashed #1e2130;
+  border: 1px dashed #2e3240;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -525,8 +525,8 @@
 }
 
 .landing-tree-node.decision {
-  background: #14161d;
-  border: 1px solid #1e2130;
+  background: #22252e;
+  border: 1px solid #2e3240;
   color: #e2e5eb;
   font-size: 0.7rem;
 }
@@ -614,7 +614,7 @@
   max-width: 1100px;
   margin: 0 auto;
   height: 1px;
-  background: #1e2130;
+  background: #2e3240;
 }
 
 /* ---- PROBLEM SECTION ---- */
@@ -629,7 +629,7 @@
 .landing-problem-card {
   padding: 2rem;
   border-radius: 16px;
-  background: #14161d;
+  background: #22252e;
   border: 1px solid #2a2f3d;
   transition: border-color 0.3s, transform 0.3s;
 }
@@ -712,8 +712,8 @@
 .landing-eq-item {
   padding: 0.5rem 1.25rem;
   border-radius: 12px;
-  background: #14161d;
-  border: 1px solid #1e2130;
+  background: #22252e;
+  border: 1px solid #2e3240;
 }
 
 .landing-eq-operator {
@@ -747,7 +747,7 @@
 .landing-step-card {
   padding: 2rem;
   border-radius: 16px;
-  background: #14161d;
+  background: #22252e;
   border: 1px solid #2a2f3d;
   position: relative;
   counter-increment: landing-step;
@@ -787,8 +787,8 @@
   height: 120px;
   border-radius: 10px;
   margin-top: 1.25rem;
-  background: #0c0d10;
-  border: 1px solid #1e2130;
+  background: #1a1c23;
+  border: 1px solid #2e3240;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -821,7 +821,7 @@
 .landing-mock-node.step {
   background: rgba(255, 255, 255, 0.03);
   color: #848b9b;
-  border: 1px solid #1e2130;
+  border: 1px solid #2e3240;
 }
 
 .landing-mock-connector {
@@ -879,7 +879,7 @@
   color: #67e8f9;
   font-weight: 600;
   padding-bottom: 0.35rem;
-  border-bottom: 1px solid #1e2130;
+  border-bottom: 1px solid #2e3240;
   margin-bottom: 0.15rem;
 }
 
@@ -911,7 +911,7 @@
 .landing-feature-card {
   padding: 2rem;
   border-radius: 16px;
-  background: #14161d;
+  background: #22252e;
   border: 1px solid #2a2f3d;
   transition: border-color 0.3s ease, transform 0.3s ease;
 }
@@ -949,7 +949,7 @@
 
 .landing-feature-card.highlight {
   border-color: rgba(34, 211, 238, 0.15);
-  background: #14161d;
+  background: #22252e;
   grid-column: span 2;
 }
 
@@ -965,7 +965,7 @@
 .landing-pricing-card {
   padding: 2.5rem 2rem;
   border-radius: 16px;
-  background: #14161d;
+  background: #22252e;
   border: 1px solid #2a2f3d;
   transition: border-color 0.3s, transform 0.3s;
 }
@@ -976,7 +976,7 @@
 
 .landing-pricing-card.featured {
   border-color: #22d3ee;
-  background: #14161d;
+  background: #22252e;
   position: relative;
 }
 
@@ -1210,8 +1210,8 @@
   flex: 1;
   padding: 0.85rem 1.25rem;
   border-radius: 10px;
-  border: 1px solid #1e2130;
-  background: #14161d;
+  border: 1px solid #2e3240;
+  background: #22252e;
   color: #e2e5eb;
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.9rem;
@@ -1248,7 +1248,7 @@
 
 /* ---- FOOTER ---- */
 .landing-footer {
-  border-top: 1px solid #1e2130;
+  border-top: 1px solid #2e3240;
   padding: 3rem 2rem;
 }
 
@@ -1376,7 +1376,7 @@
   gap: 0;
   padding: 0.5rem 1.5rem 1.5rem;
   background: rgba(12, 13, 16, 0.98);
-  border-bottom: 1px solid #1e2130;
+  border-bottom: 1px solid #2e3240;
 }
 
 .landing-mobile-menu a {