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

refactor: migrate page components to Design System v4

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/pages/PublicTemplatesPage.tsx
View File

@@ -156,7 +156,7 @@ export default function PublicTemplatesPage() {
description="Browse battle-tested troubleshooting flows and scripts built by MSP engineers. Free to explore."
/>
<div className="min-h-screen bg-background text-foreground">
<div className="min-h-screen bg-[#0c0d10] text-[#e2e5eb]">
{/* Ambient orbs */}
<div
className="fixed top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full pointer-events-none"
@@ -172,25 +172,25 @@ export default function PublicTemplatesPage() {
/>
{/* Header */}
<header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-xl">
<header className="sticky top-0 z-40 border-b border-[#1e2130] bg-[#0c0d10]/80">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<Link to="/landing" className="flex items-center gap-2.5">
<BrandLogo size="sm" />
<span className="font-heading text-lg font-semibold">
<span className="text-foreground">Resolution</span>
<span className="text-gradient-brand">Flow</span>
<span className="text-[#e2e5eb]">Resolution</span>
<span className="text-[#67e8f9]">Flow</span>
</span>
</Link>
<div className="flex items-center gap-3">
<Link
to="/login"
className="px-4 py-2 rounded-[10px] text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
className="px-4 py-2 rounded-lg text-sm font-medium text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
Sign In
</Link>
<Link
to="/register"
className="px-4 py-2 rounded-[10px] text-sm font-semibold bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all"
className="px-4 py-2 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98] transition-all"
>
Sign Up Free
</Link>
@@ -203,21 +203,21 @@ export default function PublicTemplatesPage() {
<div className="max-w-3xl mx-auto text-center">
<h1 className="font-heading text-4xl lg:text-5xl font-bold tracking-tight">
MSP Troubleshooting{' '}
<span className="text-gradient-brand">Templates</span>
<span className="text-[#67e8f9]">Templates</span>
</h1>
<p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
<p className="mt-4 text-lg text-[#848b9b] max-w-2xl mx-auto">
Battle-tested flows and scripts built by MSP engineers. Free to browse, powerful when connected to FlowPilot.
</p>
{/* Search */}
<div className="mt-8 max-w-xl mx-auto relative">
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#848b9b]" />
<input
type="text"
placeholder="Search templates..."
value={searchQuery}
onChange={(e) => handleSearchChange(e.target.value)}
className="w-full pl-12 pr-4 py-3.5 rounded-2xl text-sm bg-card border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
className="w-full pl-12 pr-4 py-3.5 rounded-2xl text-sm bg-[#14161d] border border-[#1e2130] text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
/>
</div>
</div>
@@ -235,8 +235,8 @@ export default function PublicTemplatesPage() {
className={cn(
'px-3 py-1.5 rounded-full text-sm font-medium border transition-colors',
!activeCategory
? 'bg-primary/10 text-foreground border-primary/30'
: 'bg-card border-border text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb] border-primary/30'
: 'bg-[#14161d] border-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]'
)}
>
All
@@ -249,8 +249,8 @@ export default function PublicTemplatesPage() {
className={cn(
'px-3 py-1.5 rounded-full text-sm font-medium border transition-colors',
cat === activeCategory
? 'bg-primary/10 text-foreground border-primary/30'
: 'bg-card border-border text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb] border-primary/30'
: 'bg-[#14161d] border-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]'
)}
>
{cat}
@@ -262,7 +262,7 @@ export default function PublicTemplatesPage() {
{/* Type toggle + Sort */}
<div className="flex items-center justify-between gap-4 flex-wrap">
{/* Type segmented control */}
<div className="flex items-center rounded-xl border border-border bg-card overflow-hidden">
<div className="flex items-center rounded-xl border border-[#1e2130] bg-[#14161d] overflow-hidden">
{(['all', 'flows', 'scripts'] as TypeFilter[]).map((t) => (
<button
key={t}
@@ -271,8 +271,8 @@ export default function PublicTemplatesPage() {
className={cn(
'px-4 py-2 text-sm font-medium transition-colors',
t === typeFilter
? 'bg-primary/10 text-foreground'
: 'text-muted-foreground hover:text-foreground'
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
)}
>
{t === 'all' ? 'All' : t === 'flows' ? 'Flows' : 'Scripts'}
@@ -285,16 +285,16 @@ export default function PublicTemplatesPage() {
<button
type="button"
onClick={() => setSortOpen(!sortOpen)}
className="flex items-center gap-2 px-3 py-2 rounded-[10px] text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-colors"
>
<SlidersHorizontal className="w-4 h-4 text-muted-foreground" />
<SlidersHorizontal className="w-4 h-4 text-[#848b9b]" />
{sortLabels[sort]}
<ChevronDown className={cn('w-4 h-4 text-muted-foreground transition-transform', sortOpen && 'rotate-180')} />
<ChevronDown className={cn('w-4 h-4 text-[#848b9b] transition-transform', sortOpen && 'rotate-180')} />
</button>
{sortOpen && (
<>
<div className="fixed inset-0 z-10" onClick={() => setSortOpen(false)} />
<div className="absolute right-0 mt-1 z-20 w-52 rounded-xl border border-border bg-card shadow-lg shadow-black/30 overflow-hidden">
<div className="absolute right-0 mt-1 z-20 w-52 rounded-xl border border-[#1e2130] bg-[#14161d] shadow-lg shadow-black/30 overflow-hidden">
{(Object.entries(sortLabels) as [SortOption, string][]).map(([key, label]) => (
<button
key={key}
@@ -306,8 +306,8 @@ export default function PublicTemplatesPage() {
className={cn(
'w-full text-left px-4 py-2.5 text-sm transition-colors',
key === sort
? 'bg-primary/10 text-foreground'
: 'text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)]'
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
: 'text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)]'
)}
>
{label}
@@ -328,7 +328,7 @@ export default function PublicTemplatesPage() {
{loading && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="glass-card-static p-5 space-y-3 animate-pulse">
<div key={i} className="card-flat p-5 space-y-3 animate-pulse">
<div className="h-5 bg-[rgba(255,255,255,0.06)] rounded w-3/4" />
<div className="h-4 bg-[rgba(255,255,255,0.04)] rounded w-full" />
<div className="h-4 bg-[rgba(255,255,255,0.04)] rounded w-2/3" />
@@ -341,11 +341,11 @@ export default function PublicTemplatesPage() {
{/* Error */}
{!loading && error && (
<div className="text-center py-16">
<p className="text-muted-foreground text-sm">{error}</p>
<p className="text-[#848b9b] text-sm">{error}</p>
<button
type="button"
onClick={fetchGallery}
className="mt-4 px-4 py-2 rounded-[10px] text-sm font-medium bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97] transition-all"
className="mt-4 px-4 py-2 rounded-lg text-sm font-medium bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98] transition-all"
>
Try Again
</button>
@@ -355,7 +355,7 @@ export default function PublicTemplatesPage() {
{/* Empty */}
{!loading && !error && flows.length === 0 && scripts.length === 0 && (
<div className="text-center py-16">
<p className="text-muted-foreground text-sm">
<p className="text-[#848b9b] text-sm">
No templates found. Try a different search or category.
</p>
</div>
@@ -368,7 +368,7 @@ export default function PublicTemplatesPage() {
{showFlows && flows.length > 0 && (
<div>
{typeFilter === 'all' && (
<h2 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-4">
<h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-4">
Flows ({data?.total_flows || flows.length})
</h2>
)}
@@ -388,7 +388,7 @@ export default function PublicTemplatesPage() {
{showScripts && scripts.length > 0 && (
<div>
{typeFilter === 'all' && (
<h2 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-4">
<h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-4">
Scripts ({data?.total_scripts || scripts.length})
</h2>
)}
@@ -409,18 +409,18 @@ export default function PublicTemplatesPage() {
</section>
{/* Footer */}
<footer className="border-t border-border py-8 px-4 sm:px-6 lg:px-8">
<footer className="border-t border-[#1e2130] py-8 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto flex items-center justify-between">
<Link
to="/landing"
className="text-muted-foreground text-sm hover:text-foreground transition-colors"
className="text-[#848b9b] text-sm hover:text-[#e2e5eb] transition-colors"
>
Powered by <span className="font-semibold">ResolutionFlow</span>
</Link>
<div className="flex items-center gap-4">
<Link
to="/register"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
Get Started
</Link>
@@ -431,7 +431,7 @@ export default function PublicTemplatesPage() {
{/* Detail loading overlay */}
{detailLoading && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
<Loader2 className="w-8 h-8 text-primary animate-spin" />
<Loader2 className="w-8 h-8 text-[#22d3ee] animate-spin" />
</div>
)}