refactor: migrate page 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:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions

View File

@@ -57,22 +57,22 @@ export default function ScriptLibraryPage() {
const tabClass = (tab: LibraryTab) =>
tab === activeTab
? 'border-b-2 border-primary text-foreground'
: 'text-muted-foreground hover:text-foreground'
? 'border-b-2 border-primary text-[#e2e5eb]'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
return (
<div className="flex flex-col gap-4 p-6 h-full">
{/* Page header */}
<div className="flex items-start justify-between">
<div>
<h1 className="text-2xl font-heading font-bold text-foreground">Script Library</h1>
<p className="text-sm text-muted-foreground mt-1">
<h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">Script Library</h1>
<p className="text-sm text-[#848b9b] mt-1">
Browse PowerShell templates, fill in parameters, and generate ready-to-run scripts.
</p>
{isEngineer && (
<Link
to="/scripts/manage"
className="inline-flex items-center gap-1.5 text-xs text-primary bg-primary/10 hover:bg-primary/15 px-2.5 py-1 rounded-full transition-colors mt-2 group"
className="inline-flex items-center gap-1.5 text-xs text-[#22d3ee] bg-[rgba(34,211,238,0.10)] hover:bg-primary/15 px-2.5 py-1 rounded-full transition-colors mt-2 group"
>
<Settings size={12} className="group-hover:rotate-90 transition-transform duration-300" />
Manage Templates
@@ -81,7 +81,7 @@ export default function ScriptLibraryPage() {
</div>
<Link
to="/script-builder"
className="inline-flex items-center gap-2 bg-gradient-brand text-[#101114] font-semibold rounded-[10px] px-4 py-2 shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all"
className="inline-flex items-center gap-2 bg-[#22d3ee] text-white font-semibold rounded-lg px-4 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
>
<Wand2 size={16} />
Build a New Script
@@ -89,7 +89,7 @@ export default function ScriptLibraryPage() {
</div>
{/* Tab bar */}
<div className="flex gap-6 border-b border-border">
<div className="flex gap-6 border-b border-[#1e2130]">
<button
type="button"
onClick={() => onTabChange('mine')}
@@ -110,7 +110,7 @@ export default function ScriptLibraryPage() {
<div className="grid grid-cols-[320px_1fr] gap-4 flex-1 min-h-0">
{/* Left pane — Browse or Configure mode */}
{paneMode === 'browse' ? (
<div className="glass-card-static flex flex-col overflow-hidden">
<div className="card-flat flex flex-col overflow-hidden">
<div className="p-2 pb-0">
<ScriptFilterBar inputValue={inputValue} setInputValue={setInputValue} />
</div>
@@ -128,12 +128,12 @@ export default function ScriptLibraryPage() {
{/* Right pane — read-only ScriptPreview */}
{selectedTemplate === null ? (
<div className="glass-card-static h-full flex flex-col items-center justify-center gap-3 text-center p-8">
<Terminal size={40} className="text-muted-foreground/40" />
<p className="text-sm text-muted-foreground">Select a template to get started</p>
<div className="card-flat h-full flex flex-col items-center justify-center gap-3 text-center p-8">
<Terminal size={40} className="text-[#848b9b]/40" />
<p className="text-sm text-[#848b9b]">Select a template to get started</p>
</div>
) : (
<div className="glass-card-static h-full overflow-y-auto p-4">
<div className="card-flat h-full overflow-y-auto p-4">
<ScriptPreview />
</div>
)}