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:
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user