fix: improve dark theme contrast and add navigation back button

- 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>
This commit is contained in:
Vadym Samoilenko 2026-03-23 14:50:07 +00:00
parent 0b2b61ee2d
commit f42a390e8b
3 changed files with 23 additions and 8 deletions

View file

@ -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 */}

View file

@ -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">

View file

@ -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;