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

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>