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:
parent
0b2b61ee2d
commit
f42a390e8b
3 changed files with 23 additions and 8 deletions
|
|
@ -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 */}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue