refactor: migrate dashboard components to Design System v4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:00:35 -04:00
parent 56ff792f8e
commit 96a4130c0e
18 changed files with 116 additions and 116 deletions

View File

@@ -32,12 +32,12 @@ export function StartSessionInput() {
}
return (
<div className="glass-card-static overflow-hidden">
<div className="card-flat overflow-hidden">
<div className="px-5 py-4 sm:px-6 sm:py-5">
<div className="relative">
<Sparkles
size={18}
className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground"
className="absolute left-4 top-1/2 -translate-y-1/2 text-[#848b9b]"
/>
<input
ref={inputRef}
@@ -46,7 +46,7 @@ export function StartSessionInput() {
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="What are you troubleshooting?"
className="w-full rounded-xl border border-border bg-background py-3.5 pl-11 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-xl border border-[#1e2130] bg-[#0c0d10] py-3.5 pl-11 pr-4 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
<div className="mt-3 flex items-center justify-between">
@@ -57,8 +57,8 @@ export function StartSessionInput() {
className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
mode === 'guided'
? 'bg-primary/10 text-foreground'
: 'text-muted-foreground hover:text-foreground'
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
)}
>
<Sparkles size={12} />
@@ -70,15 +70,15 @@ export function StartSessionInput() {
className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
mode === 'chat'
? 'bg-primary/10 text-foreground'
: 'text-muted-foreground hover:text-foreground'
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
)}
>
<MessageCircle size={12} />
Open Chat
</button>
</div>
<span className="text-[0.625rem] text-muted-foreground">
<span className="text-[0.625rem] text-[#848b9b]">
Press Enter to start
</span>
</div>