feat: dashboard theme overhaul — light content area with branded teal sidebar

Complete frontend visual redesign using certctl logo color palette:
- Deep teal sidebar (#0c2e25) with prominent centered logo (64px in white pill)
- Light content area (#f0f4f8) with white cards and visible borders
- Brand colors from logo: teal (#2ea88f), blue (#3b7dd8), orange (#e8873a), green (#4ebe6e)
- Inter + JetBrains Mono typography, colored stat card top borders
- All 17 pages + 7 components updated (25 files, ~700 lines changed)
- 15 new dashboard screenshots replacing old dark theme screenshots
- Prometheus metrics e2e test added, integration test mock fixes
- Docs updated: architecture.md theme description, testing-guide.md DNS-PERSIST-01 coverage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shankar0123
2026-03-26 23:27:42 -04:00
parent 8380cb7946
commit 50c520e1ff
48 changed files with 699 additions and 519 deletions
+3 -3
View File
@@ -6,10 +6,10 @@ interface PageHeaderProps {
export default function PageHeader({ title, subtitle, action }: PageHeaderProps) {
return (
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-700 bg-slate-800">
<div className="flex items-center justify-between px-6 py-4 border-b border-surface-border bg-surface">
<div>
<h2 className="text-lg font-semibold">{title}</h2>
{subtitle && <p className="text-sm text-slate-400 mt-0.5">{subtitle}</p>}
<h2 className="text-lg font-semibold text-ink">{title}</h2>
{subtitle && <p className="text-sm text-ink-muted mt-0.5">{subtitle}</p>}
</div>
{action}
</div>