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

refactor: migrate procedural and step library components to new design system

Browse Source 
Migrate 10 components from monochrome glass-card design to purple gradient
accent design system tokens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 21:08:40 -05:00
parent e3edbc64f2
commit 4ad202c92d
10 changed files with 224 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/procedural/IntakeFormModal.tsx
View File

@@ -71,10 +71,10 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
const error = errors[field.variable_name]
const baseInputClass = cn(
'w-full rounded-lg border bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:outline-none focus:ring-1',
'w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1',
error
? 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20'
: 'border-white/10 focus:border-white/30 focus:ring-white/20'
: 'border-border focus:border-primary focus:ring-primary/20'
)
let input: React.ReactNode
@@ -111,9 +111,9 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
type="checkbox"
checked={value === 'true'}
onChange={(e) => setValue(field.variable_name, e.target.checked ? 'true' : 'false')}
className="rounded border-white/20"
className="rounded border-border"
/>
<span className="text-sm text-white/70">{field.placeholder || field.label}</span>
<span className="text-sm text-muted-foreground">{field.placeholder || field.label}</span>
</label>
)
break
@@ -161,9 +161,9 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
: [...selected, opt]
setValue(field.variable_name, next.join(','))
}}
className="rounded border-white/20"
className="rounded border-border"
/>
<span className="text-sm text-white/70">{opt}</span>
<span className="text-sm text-muted-foreground">{opt}</span>
</label>
)
})}
@@ -197,12 +197,12 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
return (
<div key={field.variable_name}>
<label className="mb-1 flex items-center gap-1 text-sm font-medium text-white/60">
<label className="mb-1 flex items-center gap-1 text-sm font-medium text-muted-foreground">
{field.label}
{field.required && <span className="text-red-400">*</span>}
</label>
{field.help_text && (
<p className="mb-1.5 text-xs text-white/30">{field.help_text}</p>
<p className="mb-1.5 text-xs text-muted-foreground">{field.help_text}</p>
)}
{input}
{error && <p className="mt-1 text-xs text-red-400">{error}</p>}
@@ -212,12 +212,12 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="mx-4 w-full max-w-lg rounded-2xl border border-white/10 bg-[#0a0a0a] shadow-xl">
<div className="mx-4 w-full max-w-lg rounded-2xl border border-border bg-[#0a0a0a] shadow-xl">
{/* Header */}
<div className="border-b border-white/[0.06] px-6 py-4">
<h2 className="text-lg font-semibold text-white">Project Information</h2>
<p className="mt-0.5 text-sm text-white/40">
Fill in the details for <span className="text-white/60">{treeName}</span>
<div className="border-b border-border px-6 py-4">
<h2 className="text-lg font-semibold text-foreground">Project Information</h2>
<p className="mt-0.5 text-sm text-muted-foreground">
Fill in the details for <span className="text-muted-foreground">{treeName}</span>
</p>
</div>
@@ -227,7 +227,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
{Array.from(groups.entries()).map(([groupName, groupFields]) => (
<div key={groupName}>
{groupName && (
<h3 className="mb-3 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
<h3 className="mb-3 border-b border-border pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
{groupName}
</h3>
)}
@@ -239,17 +239,17 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
</div>
{/* Footer */}
<div className="flex items-center justify-end gap-2 border-t border-white/[0.06] px-6 py-4">
<div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
<button
type="button"
onClick={onCancel}
className="rounded-md border border-white/10 px-4 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white"
className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
type="submit"
className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
Start Procedure
</button>