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

- 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

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">

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