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

@@ -89,20 +89,20 @@ export default function ReviewQueuePage() {
{/* Left panel — Proposal list */}
<div className="w-full shrink-0 border-b lg:border-b-0 lg:border-r lg:w-[380px] overflow-y-auto" style={{ borderColor: 'var(--glass-border)' }}>
{/* Header */}
<div className="sticky top-0 z-10 p-3 sm:p-4 space-y-3" style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(12px)' }}>
<div className="sticky top-0 z-10 p-3 sm:p-4 space-y-3" style={{ background: 'rgba(16, 17, 20, 0.95)', }}>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Lightbulb size={16} className="text-amber-400" />
<h1 className="font-heading text-base font-semibold text-foreground">Review Queue</h1>
<h1 className="font-heading text-base font-semibold text-[#e2e5eb]">Review Queue</h1>
</div>
<button onClick={loadProposals} className="text-muted-foreground hover:text-foreground transition-colors">
<button onClick={loadProposals} className="text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
<RefreshCw size={14} />
</button>
</div>
{/* Stats bar */}
{stats && (
<div className="flex items-center gap-3 text-xs text-muted-foreground">
<div className="flex items-center gap-3 text-xs text-[#848b9b]">
<span className="flex items-center gap-1">
<Clock size={10} className="text-amber-400" />
{stats.pending_count} pending
@@ -112,7 +112,7 @@ export default function ReviewQueuePage() {
{stats.approved_this_week} approved
</span>
<span className="flex items-center gap-1">
<Sparkles size={10} className="text-primary" />
<Sparkles size={10} className="text-[#22d3ee]" />
{stats.auto_reinforced_this_week} reinforced
</span>
</div>
@@ -126,8 +126,8 @@ export default function ReviewQueuePage() {
onClick={() => setActiveTab(tab.key)}
className={`shrink-0 rounded-lg px-2.5 py-1 text-xs font-medium transition-colors ${
activeTab === tab.key
? 'bg-primary/10 text-primary'
: 'text-muted-foreground hover:text-foreground'
? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
}`}
>
{tab.label}
@@ -144,7 +144,7 @@ export default function ReviewQueuePage() {
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-xs text-foreground"
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-xs text-[#e2e5eb]"
>
<option value="newest">Newest first</option>
<option value="confidence">Highest confidence</option>
@@ -156,12 +156,12 @@ export default function ReviewQueuePage() {
<div className="p-3 space-y-2">
{isLoading ? (
<div className="flex justify-center py-12">
<Loader2 size={20} className="animate-spin text-muted-foreground" />
<Loader2 size={20} className="animate-spin text-[#848b9b]" />
</div>
) : proposals.length === 0 ? (
<div className="py-12 text-center">
<Lightbulb size={24} className="mx-auto mb-2 text-muted-foreground/40" />
<p className="text-sm text-muted-foreground">No proposals found</p>
<Lightbulb size={24} className="mx-auto mb-2 text-[#848b9b]/40" />
<p className="text-sm text-[#848b9b]">No proposals found</p>
</div>
) : (
proposals.map((proposal) => (
@@ -180,7 +180,7 @@ export default function ReviewQueuePage() {
<div className={`flex-1 overflow-y-auto ${!detail && !isLoadingDetail ? 'hidden lg:flex' : ''}`}>
{isLoadingDetail ? (
<div className="flex items-center justify-center h-full">
<Loader2 size={20} className="animate-spin text-muted-foreground" />
<Loader2 size={20} className="animate-spin text-[#848b9b]" />
</div>
) : detail ? (
<ProposalDetail
@@ -190,8 +190,8 @@ export default function ReviewQueuePage() {
) : (
<div className="flex items-center justify-center h-full">
<div className="text-center">
<Lightbulb size={32} className="mx-auto mb-3 text-muted-foreground/30" />
<p className="text-sm text-muted-foreground">Select a proposal to review</p>
<Lightbulb size={32} className="mx-auto mb-3 text-[#848b9b]/30" />
<p className="text-sm text-[#848b9b]">Select a proposal to review</p>
</div>
</div>
)}