refactor: migrate remaining components to Design System v4
111 files across 14 directories: common, tree-editor, kb-accelerator, copilot, assistant, analytics, library, procedural, procedural-editor, public, script-editor, ui, admin, step-library. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -18,19 +18,19 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="glass-card text-left w-full flex flex-col gap-3 p-5"
|
||||
className="card-interactive text-left w-full flex flex-col gap-3 p-5"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
|
||||
<h3 className="font-heading text-[#e2e5eb] text-base font-semibold leading-tight line-clamp-2">
|
||||
{template.name}
|
||||
</h3>
|
||||
<span className="shrink-0">
|
||||
<GitBranch className="w-4 h-4 text-muted-foreground" />
|
||||
<GitBranch className="w-4 h-4 text-[#848b9b]" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{template.description && (
|
||||
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
|
||||
<p className="text-[#848b9b] text-sm leading-relaxed line-clamp-2">
|
||||
{template.description}
|
||||
</p>
|
||||
)}
|
||||
@@ -40,33 +40,33 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
|
||||
{template.tags.slice(0, 3).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
|
||||
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{template.tags.length > 3 && (
|
||||
<span className="font-label text-[0.625rem] text-muted-foreground">
|
||||
<span className="font-sans text-xs text-[0.625rem] text-[#848b9b]">
|
||||
+{template.tags.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 mt-auto pt-2 border-t border-border">
|
||||
<div className="flex items-center gap-4 mt-auto pt-2 border-t border-[#1e2130]">
|
||||
{template.category && (
|
||||
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
|
||||
{template.category}
|
||||
</span>
|
||||
)}
|
||||
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground flex items-center gap-1">
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] flex items-center gap-1">
|
||||
<Layers className="w-3 h-3" />
|
||||
{template.step_count} steps
|
||||
</span>
|
||||
{template.success_rate !== null && (
|
||||
<span
|
||||
className={cn(
|
||||
'font-label text-[0.625rem] uppercase tracking-[0.1em] flex items-center gap-1 ml-auto',
|
||||
'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] flex items-center gap-1 ml-auto',
|
||||
template.success_rate >= 80
|
||||
? 'text-emerald-400'
|
||||
: template.success_rate >= 50
|
||||
@@ -82,12 +82,12 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={cn(
|
||||
'font-label text-[0.625rem] px-2 py-0.5 rounded-md border',
|
||||
'bg-primary/5 border-primary/20 text-primary'
|
||||
'font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md border',
|
||||
'bg-primary/5 border-primary/20 text-[#22d3ee]'
|
||||
)}>
|
||||
{typeLabels[template.tree_type] || template.tree_type}
|
||||
</span>
|
||||
<span className="font-label text-[0.625rem] text-[#5a6170]">
|
||||
<span className="font-sans text-xs text-[0.625rem] text-[#5a6170]">
|
||||
{template.usage_count.toLocaleString()} uses
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user