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

fix: stat card left borders, tab shadow on toggle, larger rail icons

Browse Source 
- Stat cards get 3px colored left border matching their icon color
- Guided/Chat toggle uses tab-active-shadow on selected state
- Rail icons increased to 24px with 1.6 stroke width
- Rail labels increased to 10px with font-sans (not mono)
- More vertical spacing between rail items

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 05:12:41 -04:00
parent a73d34c39b
commit 6eae234991
3 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/dashboard/PerformanceCards.tsx
View File

@@ -71,7 +71,10 @@ export function PerformanceCards() {
key={card.label}
onClick={() => navigate(card.href)}
className="card-interactive p-4 text-left fade-in"
style={{ animationDelay: `${400 + i * 60}ms` }}
style={{
animationDelay: `${400 + i * 60}ms`,
borderLeft: `3px solid ${card.iconColor}`,
}}
>
<div className="flex items-center justify-between mb-2">
<p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">

10
frontend/src/components/dashboard/StartSessionInput.tsx
View File

@@ -50,14 +50,14 @@ export function StartSessionInput() {
/>
</div>
<div className="mt-3 flex items-center justify-between">
<div className="flex items-center gap-1 rounded-lg bg-[rgba(255,255,255,0.04)] p-0.5">
<div className="flex items-center gap-1 rounded-lg bg-secondary p-0.5">
<button
type="button"
onClick={() => setMode('guided')}
className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all duration-150',
mode === 'guided'
? 'bg-accent-dim text-foreground'
? 'bg-accent-dim text-foreground tab-active-shadow'
: 'text-muted-foreground hover:text-foreground'
)}
>
@@ -68,9 +68,9 @@ export function StartSessionInput() {
type="button"
onClick={() => setMode('chat')}
className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all duration-150',
mode === 'chat'
? 'bg-accent-dim text-foreground'
? 'bg-accent-dim text-foreground tab-active-shadow'
: 'text-muted-foreground hover:text-foreground'
)}
>

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

@@ -252,7 +252,7 @@ export function Sidebar() {
onMouseEnter={() => prefetchForRoute(item.href)}
onFocus={() => hasChildren && !sidebarPinned ? openFlyout(key) : undefined}
className={cn(
'group relative flex flex-col items-center justify-center rounded-lg px-1 py-2 transition-all duration-150',
'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'
@@ -260,14 +260,14 @@ export function Sidebar() {
title={item.label}
>
<span className="relative">
<Icon size={20} className={active ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
<Icon size={24} strokeWidth={1.6} className={active ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
{item.badge !== undefined && item.badge > 0 && (
<span className="absolute -right-1.5 -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-[#0c0d10]">
{item.badge > 99 ? '99+' : item.badge}
</span>
)}
</span>
<span className="mt-1 text-[0.5625rem] font-mono leading-tight truncate max-w-[60px]">
<span className="mt-1.5 text-[0.625rem] font-sans font-medium leading-tight truncate max-w-[64px]">
{item.shortLabel}
</span>
</Link>
@@ -415,23 +415,23 @@ export function Sidebar() {
onWheel={handleWheel}
>
{/* Grouped nav items */}
<div className="flex flex-col items-center w-full px-1.5 pt-3 space-y-1">
<div className="flex flex-col items-center w-full px-1 pt-4 space-y-1.5">
{railGroups.map((item, i) => renderRailItem(item, `rail-${i}`))}
</div>
<div className="flex-1" />
{/* Footer: Account + Pin */}
<div className="flex flex-col items-center w-full px-1.5 pb-5 pt-2 space-y-1" 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 #1e2130' }}>
{footerItems.map((item, i) => renderRailItem(item, `footer-${i}`))}
<button
type="button"
onClick={toggleSidebarPinned}
className="flex flex-col items-center justify-center rounded-lg px-1 py-2 text-text-rail-label hover:text-muted-foreground transition-colors"
className="flex flex-col items-center justify-center rounded-lg px-2 py-3 text-text-rail-label hover:text-muted-foreground transition-colors"
title="Pin sidebar"
>
<Pin size={18} className="opacity-60 hover:opacity-85" />
<span className="mt-1 text-[0.5625rem] font-mono leading-tight">Pin</span>
<Pin size={22} strokeWidth={1.6} className="opacity-60 hover:opacity-85" />
<span className="mt-1.5 text-[0.625rem] font-sans font-medium leading-tight">Pin</span>
</button>
</div>
</nav>