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

30
frontend/src/pages/GuideDetailPage.tsx
View File

@@ -10,11 +10,11 @@ export default function GuideDetailPage() {
if (!guide) {
return (
<div className="flex flex-col items-center justify-center h-full text-center p-6 overflow-y-auto">
<h2 className="text-lg font-heading font-semibold text-foreground mb-2">Guide Not Found</h2>
<p className="text-sm text-muted-foreground mb-4">The guide you're looking for doesn't exist.</p>
<h2 className="text-lg font-heading font-semibold text-[#e2e5eb] mb-2">Guide Not Found</h2>
<p className="text-sm text-[#848b9b] mb-4">The guide you're looking for doesn't exist.</p>
<Link
to="/guides"
className="bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-5 py-2 hover:opacity-90 active:scale-[0.97] transition-all"
className="bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-5 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
>
Back to Guides
</Link>
@@ -27,37 +27,37 @@ export default function GuideDetailPage() {
return (
<div className="overflow-y-auto h-full p-6 max-w-3xl mx-auto">
{/* Breadcrumb */}
<nav className="flex items-center gap-1.5 text-xs text-muted-foreground mb-6">
<Link to="/guides" className="hover:text-primary transition-colors">
<nav className="flex items-center gap-1.5 text-xs text-[#848b9b] mb-6">
<Link to="/guides" className="hover:text-[#22d3ee] transition-colors">
User Guides
</Link>
<ChevronRight size={12} />
<span className="text-foreground">{guide.title}</span>
<span className="text-[#e2e5eb]">{guide.title}</span>
</nav>
{/* Header */}
<div className="glass-card-static rounded-2xl p-6 mb-6">
<div className="card-flat rounded-2xl p-6 mb-6">
<div className="flex items-center gap-3 mb-3">
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
<Icon size={20} className="text-primary" />
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[rgba(34,211,238,0.10)]">
<Icon size={20} className="text-[#22d3ee]" />
</div>
<div>
<h1 className="text-xl font-heading font-bold text-foreground">{guide.title}</h1>
<p className="text-sm text-muted-foreground">{guide.summary}</p>
<h1 className="text-xl font-heading font-bold text-[#e2e5eb]">{guide.title}</h1>
<p className="text-sm text-[#848b9b]">{guide.summary}</p>
</div>
</div>
<div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: 'var(--glass-border)' }}>
<span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
{guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
</span>
<span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
{guide.sections.reduce((acc, s) => acc + s.steps.length, 0)} steps
</span>
</div>
</div>
{/* Sections */}
<div className="glass-card-static rounded-2xl p-6">
<div className="card-flat rounded-2xl p-6">
{guide.sections.map((section, i) => (
<GuideSection key={i} section={section} index={i} />
))}
@@ -67,7 +67,7 @@ export default function GuideDetailPage() {
<div className="mt-6">
<Link
to="/guides"
className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-primary transition-colors"
className="inline-flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#22d3ee] transition-colors"
>
<ArrowLeft size={14} />
Back to all guides