c9dedec7da
Promotes the per-brief theme picker from a buried section at the bottom of the JSON-textarea edit page to a dedicated /briefs/:id/theme route that feels like a real edit tool. New route layout (5fr / 4fr split, sticky preview on xl+): - Left: ThemeEditor (8 accent presets + custom hex; 4 heading-font tiles each rendering "The Branded Glass Moment" in the candidate font; 3 background presets; agency-name input; save / reset). - Right: ThemePreview — slice of the per-report dashboard styled by the picked theme, updates LIVE on every tweak before save. ThemePreview renders a mock dashboard topbar (with agency name + accent eyebrow), 3 KPI tiles, leaderboard row (rank + format dot + accent bar + plays), sample trend card (maturity pill + format chip + truth quote + KPI strip), primary/secondary buttons, accent-2 swatch. Inline-styled with full hex values so changing the picker doesn't bleed into the operator app's chrome. ThemeEditor refactored to expose live state via optional onPreview callback. Internal save/reset behaviour unchanged. Discoverability: - Brief detail page: "Theme & branding" button in the header action row next to "Export JSON" and "Run pipeline". - Brief edit page: footer link "Theme & branding ↗" replaces the inline editor that lived at the bottom (now redundant). - Brief list rows: small accent-dot indicator in the right-side metadata column when a theme is set, plus a per-row "Add theme" / "Edit theme" link in the action footer. Operator app's index.html now also loads Fraunces / Playfair / Space Grotesk / Inter / JetBrains Mono so the preview is WYSIWYG. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
23 lines
984 B
HTML
23 lines
984 B
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Social Listening V2</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<!-- Fonts for ThemePreview — same set the per-report dashboard SPA loads. -->
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Playfair+Display:wght@400..700&family=Space+Grotesk:wght@400..700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|