chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: design system v4 polish — home icon, mobile hamburger, contrast, font-label cleanup

Browse Source 
- 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:
chihlasm
2026-03-22 19:19:44 +00:00
parent 83a27b4d9a
commit 2bcd3e2f3c
26 changed files with 84 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/layout/AppLayout.tsx
View File

@@ -96,9 +96,9 @@ export function AppLayout() {
/>
<nav
className="absolute inset-y-0 left-0 w-72 shadow-2xl animate-slide-in-left"
style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
style={{ background: 'var(--color-bg-sidebar)', borderRight: '1px solid var(--color-border-default)' }}
>
<div className="flex h-14 items-center justify-between px-4" style={{ borderBottom: '1px solid #1e2130' }}>
<div className="flex h-14 items-center justify-between px-4" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<Link to="/" className="flex items-center gap-2.5">
<BrandLogo size="sm" />
<span className="text-sm font-heading font-bold text-text-heading">ResolutionFlow</span>
@@ -115,7 +115,7 @@ export function AppLayout() {
<div className="flex flex-col p-3">
{/* User info */}
<div className="mb-3 pb-3 px-3" style={{ borderBottom: '1px solid #1e2130' }}>
<div className="mb-3 pb-3 px-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<p className="text-sm font-medium text-foreground">{user?.name || user?.email}</p>
{effectiveRole && effectiveRole !== 'engineer' && (
<span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
@@ -151,7 +151,7 @@ export function AppLayout() {
</div>
{/* Logout */}
<div className="mt-3 pt-3" style={{ borderTop: '1px solid #1e2130' }}>
<div className="mt-3 pt-3" style={{ borderTop: '1px solid var(--color-border-default)' }}>
<button
type="button"
onClick={handleLogout}

8
frontend/src/components/layout/CommandPalette.tsx
View File

@@ -329,7 +329,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
placeholder="Search flows, ask a question, navigate…"
className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-hidden"
/>
<kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[0.625rem] text-muted-foreground">
ESC
</kbd>
</div>
@@ -354,7 +354,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
<div key={group.type}>
{/* Section label */}
<div className="px-3 pt-2 pb-1">
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<span className="font-sans text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
{group.label}
</span>
</div>
@@ -451,11 +451,11 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
{flatItems.length > 0 && (
<div className="flex items-center gap-4 border-t border-border px-4 py-2">
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
<kbd className="rounded border border-border bg-background px-1 py-px font-mono">↑↓</kbd>
Navigate
</span>
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
<kbd className="rounded border border-border bg-background px-1 py-px font-mono">↵</kbd>
Open
</span>
</div>

4
frontend/src/components/layout/NavItem.tsx
View File

@@ -87,7 +87,7 @@ export function NavItem({ href, icon: Icon, label, badge, iconColor, matchPaths,
badge === 'dot' ? (
<span className="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-brand-gradient-from" />
) : (
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-mono text-muted-foreground">
{badge}
</span>
)
@@ -117,7 +117,7 @@ export function NavItem({ href, icon: Icon, label, badge, iconColor, matchPaths,
>
<span className="truncate">{child.label}</span>
{child.count !== undefined && (
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-mono text-muted-foreground">
{child.count}
</span>
)}

4
frontend/src/components/layout/QuickLaunch.tsx
View File

@@ -144,11 +144,11 @@ export function QuickLaunch({ open, onClose }: QuickLaunchProps) {
<div className="flex items-center gap-4 border-t border-border px-4 py-2">
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
<kbd className="rounded border border-border bg-background px-1 py-px font-mono">↑↓</kbd>
Navigate
</span>
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
<kbd className="rounded border border-border bg-background px-1 py-px font-mono">↵</kbd>
Open
</span>
</div>

35
frontend/src/components/layout/Sidebar.tsx
View File

@@ -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)',
}}
>

22
frontend/src/components/layout/TopBar.tsx
View File

@@ -55,10 +55,10 @@ export function TopBar() {
return (
<>
<header
className="topbar relative z-10 flex items-center gap-4 px-4"
className="topbar relative z-10 flex items-center gap-4 px-4 pl-14 md:pl-4"
style={{
background: '#0f1118',
borderBottom: '1px solid #1e2130',
background: 'var(--color-bg-sidebar)',
borderBottom: '1px solid var(--color-border-default)',
}}
>
{/* Logo area */}
@@ -85,17 +85,17 @@ export function TopBar() {
<div
className="w-full rounded-md py-2 pl-9 pr-14 text-[0.8125rem] text-muted-foreground cursor-pointer transition-colors"
style={{
background: '#14161d',
border: '1px solid #1e2130',
background: 'var(--color-bg-card)',
border: '1px solid var(--color-border-default)',
}}
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.borderColor = '#2a2f3d' }}
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.borderColor = '#1e2130' }}
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.borderColor = 'var(--color-border-hover)' }}
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.borderColor = 'var(--color-border-default)' }}
>
Search flows, sessions, tags...
</div>
<span
className="absolute right-3 top-1/2 -translate-y-1/2 rounded px-1.5 py-0.5 font-mono text-[0.625rem] text-text-muted"
style={{ background: '#0c0d10', border: '1px solid #1e2130' }}
style={{ background: 'var(--color-bg-page)', border: '1px solid var(--color-border-default)' }}
>
{navigator.platform?.toLowerCase().includes('mac') ? '\u2318K' : 'Ctrl+K'}
</span>
@@ -143,9 +143,9 @@ export function TopBar() {
{userMenuOpen && (
<div
className="absolute right-0 z-50 mt-2 w-56 rounded-lg p-1 shadow-xl animate-scale-in"
style={{ background: '#14161d', border: '1px solid #1e2130' }}
style={{ background: 'var(--color-bg-card)', border: '1px solid var(--color-border-default)' }}
>
<div className="px-3 py-2.5 mb-1" style={{ borderBottom: '1px solid #1e2130' }}>
<div className="px-3 py-2.5 mb-1" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<p className="text-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
{effectiveRole && effectiveRole !== 'engineer' && (
<span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
@@ -172,7 +172,7 @@ export function TopBar() {
Admin Panel
</Link>
)}
<div className="mt-1 pt-1" style={{ borderTop: '1px solid #1e2130' }}>
<div className="mt-1 pt-1" style={{ borderTop: '1px solid var(--color-border-default)' }}>
<button
onClick={handleLogout}
className={cn(