From f42a390e8baffa65b2b2456ea63803923bbd5509 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Mon, 23 Mar 2026 14:50:07 +0000
Subject: [PATCH] fix: improve dark theme contrast and add navigation back
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.css: bump text-secondary #888→#b0b0b0, text-muted #555→#787878,
  border slightly lighter for better readability on dark backgrounds
- TopBar: add '← Dashboard' back button on all non-dashboard pages
- Sidebar: make AC logo clickable to navigate home

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/Sidebar.tsx |  7 +++++--
 frontend/src/components/layout/TopBar.tsx  | 16 ++++++++++++++--
 frontend/src/index.css                     |  8 ++++----
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index a12dbed..ef86c84 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -47,11 +47,14 @@ export default function Sidebar() {
     >
       {/* Logo */}
       <div className="p-4 border-b" style={{ borderColor: 'var(--border)' }}>
-        <div className="flex items-center gap-2">
+        <button
+          onClick={() => navigate('/')}
+          className="flex items-center gap-2 hover:opacity-80 transition-opacity w-full text-left"
+        >
           <div className="w-7 h-7 rounded flex items-center justify-center font-bold text-xs"
             style={{ background: 'var(--accent)', color: '#000' }}>AC</div>
           <span className="font-semibold text-sm" style={{ color: 'var(--text-primary)' }}>AC Tool</span>
-        </div>
+        </button>
       </div>
 
       {/* Upload Brief */}
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index 31f755e..81029d8 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -20,6 +20,7 @@ export default function TopBar() {
     }
   }
 
+  const isDashboard = location.pathname === '/'
   const breadcrumb = location.pathname.startsWith('/sheet/') ? 'Sheet Editor'
     : location.pathname.startsWith('/brief/review/') ? 'Review Brief'
     : location.pathname === '/brief/upload' ? 'Upload Brief'
@@ -31,8 +32,19 @@ export default function TopBar() {
       className="flex items-center justify-between px-4 py-3 border-b flex-shrink-0"
       style={{ background: 'var(--bg-sidebar)', borderColor: 'var(--border)' }}
     >
-      <div className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>
-        {breadcrumb}
+      <div className="flex items-center gap-2">
+        {!isDashboard && (
+          <button
+            onClick={() => navigate('/')}
+            className="flex items-center gap-1 text-xs px-2 py-1 rounded transition-opacity hover:opacity-70"
+            style={{ color: 'var(--text-secondary)', border: '1px solid var(--border)' }}
+          >
+            ← Dashboard
+          </button>
+        )}
+        <span className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>
+          {breadcrumb}
+        </span>
       </div>
 
       <div className="flex items-center gap-3">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f4c2819..f4ea508 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -8,10 +8,10 @@
   --accent: #FFC407;
   --accent-hover: #e6b000;
   --text-primary: #ffffff;
-  --text-secondary: #888888;
-  --text-muted: #555555;
-  --border: #222222;
-  --border-light: #333333;
+  --text-secondary: #b0b0b0;
+  --text-muted: #787878;
+  --border: #2a2a2a;
+  --border-light: #3a3a3a;
   --success: #22c55e;
   --danger: #ef4444;
   --warning: #f59e0b;