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:
@@ -65,7 +65,7 @@ export function CreateFlowDropdown({
|
||||
<div className={cn('relative', className)}>
|
||||
<button
|
||||
onClick={() => setShowMenu(!showMenu)}
|
||||
className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
|
||||
className="flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white hover:brightness-110 transition-opacity"
|
||||
>
|
||||
<Plus size={16} />
|
||||
{label}
|
||||
@@ -74,17 +74,17 @@ export function CreateFlowDropdown({
|
||||
{showMenu && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
|
||||
<div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-xs">
|
||||
<div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-[#1e2130] bg-[#14161d] p-1 shadow-xl">
|
||||
{/* Troubleshooting */}
|
||||
<Link
|
||||
to="/trees/new"
|
||||
onClick={() => setShowMenu(false)}
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
|
||||
>
|
||||
<FolderTree className="h-4 w-4 text-muted-foreground" />
|
||||
<FolderTree className="h-4 w-4 text-[#848b9b]" />
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">Troubleshooting Tree</div>
|
||||
<div className="text-xs text-muted-foreground">Branching decision flow</div>
|
||||
<div className="text-xs text-[#848b9b]">Branching decision flow</div>
|
||||
</div>
|
||||
</Link>
|
||||
{aiEnabled && (
|
||||
@@ -95,27 +95,27 @@ export function CreateFlowDropdown({
|
||||
setAiPromptFlowType('troubleshooting')
|
||||
setAiPromptOpen(true)
|
||||
}}
|
||||
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
|
||||
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
|
||||
>
|
||||
<Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
|
||||
<Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
|
||||
<div className="text-left">
|
||||
<div className="text-xs text-primary font-medium">Build with Flow Assist</div>
|
||||
<div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="my-1 border-t border-border" />
|
||||
<div className="my-1 border-t border-[#1e2130]" />
|
||||
|
||||
{/* Procedural */}
|
||||
<Link
|
||||
to="/flows/new"
|
||||
onClick={() => setShowMenu(false)}
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
|
||||
>
|
||||
<ListOrdered className="h-4 w-4 text-muted-foreground" />
|
||||
<ListOrdered className="h-4 w-4 text-[#848b9b]" />
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">Procedural Flow</div>
|
||||
<div className="text-xs text-muted-foreground">Step-by-step procedure</div>
|
||||
<div className="text-xs text-[#848b9b]">Step-by-step procedure</div>
|
||||
</div>
|
||||
</Link>
|
||||
{aiEnabled && (
|
||||
@@ -126,27 +126,27 @@ export function CreateFlowDropdown({
|
||||
setAiPromptFlowType('procedural')
|
||||
setAiPromptOpen(true)
|
||||
}}
|
||||
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
|
||||
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
|
||||
>
|
||||
<Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
|
||||
<Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
|
||||
<div className="text-left">
|
||||
<div className="text-xs text-primary font-medium">Build with Flow Assist</div>
|
||||
<div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="my-1 border-t border-border" />
|
||||
<div className="my-1 border-t border-[#1e2130]" />
|
||||
|
||||
{/* Maintenance */}
|
||||
<Link
|
||||
to="/flows/new?type=maintenance"
|
||||
onClick={() => setShowMenu(false)}
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
|
||||
>
|
||||
<Wrench className="h-4 w-4 text-amber-400" />
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">Maintenance Flow</div>
|
||||
<div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
|
||||
<div className="text-xs text-[#848b9b]">Scheduled multi-target tasks</div>
|
||||
</div>
|
||||
</Link>
|
||||
{aiEnabled && (
|
||||
@@ -157,11 +157,11 @@ export function CreateFlowDropdown({
|
||||
setAiPromptFlowType('maintenance')
|
||||
setAiPromptOpen(true)
|
||||
}}
|
||||
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
|
||||
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
|
||||
>
|
||||
<Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
|
||||
<Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
|
||||
<div className="text-left">
|
||||
<div className="text-xs text-primary font-medium">Build with Flow Assist</div>
|
||||
<div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user