fix: design system v4 polish — home icon, mobile hamburger, contrast, font-label cleanup
- Home sidebar icon: always cyan, bg-accent-dim only when route is "/" - Mobile TopBar: add left padding so hamburger isn't hidden behind logo - Landing page: bump card border color (#1e2130 → #2a2f3d) for better contrast - Replace all font-label references (40 occurrences, 19 files) with font-mono or font-sans - Remove deprecated --font-label CSS variable from index.css - Convert hardcoded hex in layout inline styles to CSS variables (light-mode ready) - Add @types/react-syntax-highlighter for script builder types Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -241,6 +241,9 @@ 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}
|
||||
@@ -253,16 +256,20 @@ 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',
|
||||
active
|
||||
? 'bg-accent-dim text-accent-text'
|
||||
: 'text-text-rail-label hover:text-muted-foreground'
|
||||
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'
|
||||
)}
|
||||
title={item.label}
|
||||
>
|
||||
<span className="relative">
|
||||
<Icon size={24} strokeWidth={1.6} className={active ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
|
||||
<Icon size={24} strokeWidth={1.6} className={active || isHome ? '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-[#0c0d10]">
|
||||
<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}
|
||||
</span>
|
||||
)}
|
||||
@@ -301,14 +308,14 @@ export function Sidebar() {
|
||||
{active && !isParentDimmed && (
|
||||
<div
|
||||
className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2"
|
||||
style={{ background: '#22d3ee', borderRadius: '0 3px 3px 0' }}
|
||||
style={{ background: 'var(--color-accent)', borderRadius: '0 3px 3px 0' }}
|
||||
/>
|
||||
)}
|
||||
<Icon size={18} className={cn('shrink-0', active ? 'opacity-100' : 'opacity-70')} />
|
||||
<span className="truncate">{item.label}</span>
|
||||
{item.badge !== undefined && item.badge > 0 && (
|
||||
<span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-text-muted"
|
||||
style={{ background: '#14161d', border: '1px solid #1e2130' }}>
|
||||
style={{ background: 'var(--color-bg-card)', border: '1px solid var(--color-border-default)' }}>
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
@@ -338,7 +345,7 @@ export function Sidebar() {
|
||||
<span className="truncate">{child.label}</span>
|
||||
{child.count !== undefined && (
|
||||
<span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-text-muted"
|
||||
style={{ background: '#14161d', border: '1px solid #1e2130' }}>
|
||||
style={{ background: 'var(--color-bg-card)', border: '1px solid var(--color-border-default)' }}>
|
||||
{child.count}
|
||||
</span>
|
||||
)}
|
||||
@@ -365,7 +372,7 @@ export function Sidebar() {
|
||||
<nav
|
||||
ref={sidebarRef}
|
||||
className="sidebar flex flex-col h-full"
|
||||
style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
|
||||
style={{ background: 'var(--color-bg-sidebar)', borderRight: '1px solid var(--color-border-default)' }}
|
||||
onWheel={handleWheel}
|
||||
>
|
||||
{/* Pinned sidebar content */}
|
||||
@@ -385,7 +392,7 @@ export function Sidebar() {
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-3 pt-2 pb-4 space-y-0.5" style={{ borderTop: '1px solid #1e2130' }}>
|
||||
<div className="px-3 pt-2 pb-4 space-y-0.5" style={{ borderTop: '1px solid var(--color-border-default)' }}>
|
||||
{footerItems.map((item, i) => renderPinnedItem(item, `footer-${i}`))}
|
||||
<button
|
||||
type="button"
|
||||
@@ -411,7 +418,7 @@ export function Sidebar() {
|
||||
<nav
|
||||
ref={sidebarRef}
|
||||
className="sidebar flex flex-col items-center h-full shrink-0"
|
||||
style={{ background: '#0f1118', borderRight: '1px solid #1e2130', width: '72px' }}
|
||||
style={{ background: 'var(--color-bg-sidebar)', borderRight: '1px solid var(--color-border-default)', width: '72px' }}
|
||||
onWheel={handleWheel}
|
||||
>
|
||||
{/* Grouped nav items */}
|
||||
@@ -422,7 +429,7 @@ export function Sidebar() {
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Footer: Account + Pin */}
|
||||
<div className="flex flex-col items-center w-full px-1 pb-5 pt-3 space-y-1.5" style={{ borderTop: '1px solid #1e2130' }}>
|
||||
<div className="flex flex-col items-center w-full px-1 pb-5 pt-3 space-y-1.5" style={{ borderTop: '1px solid var(--color-border-default)' }}>
|
||||
{footerItems.map((item, i) => renderRailItem(item, `footer-${i}`))}
|
||||
<button
|
||||
type="button"
|
||||
@@ -448,8 +455,8 @@ export function Sidebar() {
|
||||
className="flex flex-col h-full overflow-y-auto py-4 px-2"
|
||||
style={{
|
||||
width: drawerWidth,
|
||||
background: '#0f1118',
|
||||
borderRight: '1px solid #1e2130',
|
||||
background: 'var(--color-bg-sidebar)',
|
||||
borderRight: '1px solid var(--color-border-default)',
|
||||
boxShadow: '4px 0 12px rgba(0,0,0,0.2)',
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user