EPIC: Frontend UI polish (color tokens, Toast, a11y)#1720
Open
sohni-tagirisa wants to merge 18 commits into
Open
EPIC: Frontend UI polish (color tokens, Toast, a11y)#1720sohni-tagirisa wants to merge 18 commits into
sohni-tagirisa wants to merge 18 commits into
Conversation
Track the work to align the PromptDriven.ai web UI with the cleaner branding choices on the Sizzle site (logo, brand color tokens, header wordmark). Sub-PRs target this epic branch. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Per updated direction: keep the existing glowing logo and only match Sizzle's wordmark text style + clean look. Drops the logo-swap sub-PR. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Restyle the live header wordmark (rendered inline in App.tsx, not the unused components/Header.tsx): the bold-white "Prompt Driven" heading becomes Sizzle's lockup — a semibold sans brand-sleet wordmark "PromptDriven.ai" beside a tiny, wide-tracked, uppercase mono brand-cyan descriptor "Prompt Driven Development". Aligns the page <title>. Existing logo kept. Depends on the brand-* tokens (sub-PR #1668). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Adds the PromptDriven brand palette (cyan #00d8ff, navy, graphite, magenta, purple, green, sleet, mute) to the inline Tailwind config so the header and future UI can share one identity with the Sizzle site. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
…ight-blue background Aligns pdd/frontend with the PromptDriven Brand Guidelines v1.4 (§3) and the Sizzle look, replacing the legacy gold/yellow accent throughout: - Header: Sizzle wordmark lockup (brand-sleet semibold + mono brand-cyan descriptor), aligned <title>; existing logo kept. - Brand palette: full §3 token set (Electric-Cyan, Deep-Navy, Lumen-Purple, Prompt-Magenta, Light-Sleet, Graphite-900, Build-Green(+700), Diff-Yellow, Break-Red) added to the Tailwind config. - Accents: gold/yellow removed app-wide (43 files). Green (Build-Green) for structure/borders/icons; blue (Electric-Cyan) for active/selected states, toggles, and graph-edge selection; existing blue kept for primary actions. - Background: Deep-Navy base with brand Electric-Cyan + Lumen-Purple radial "light-blue" glows (.app-bg). - White glow shadows on active controls, nav container, and glass panels. No pink in any rendered surface (the magenta brand token remains defined per spec but unused). Live header is in App.tsx; components/Header.tsx unused. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Brings the redesigned 'pdd connect' interface (from #1611 / issue #1606) into the Sizzle brand-consistency epic: StatusReporter-based status messaging, cli_theme integration, and refreshed connect prompt + docs. Excludes the stale architecture.json churn from #1611 (it was based on an older main and would revert routing_policy entries). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Rewrites the five view-header subtitles (Dev Units, Bug Investigation, PR Fix, Change Request, Settings) from generic 'Automatically…' filler into the confident, concrete, declarative voice used on the Sizzle landing page (video.promptdriven.ai/sizzle). Text only — no color or layout changes (those belong to sibling PR #1670). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Sizzle brand restyle: palette, blue/green accents, light-blue background
Sizzle brand: pdd connect redesign (StatusReporter + cli_theme)
Sizzle brand: match Sizzle's professional voice in app copy
Integration branch for low-risk frontend polish work. Sub-PRs target this branch: - #1717 replace hardcoded hex with brand tokens - #1718 replace alert() with Toast - #1719 SVG/icon-button accessibility Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Swap 41 bracket-literal Tailwind utilities (#FDCE49/#DFA84A/#FFD966) for the existing pdd.gold / pdd.goldActive / pdd.goldHover theme tokens across App.tsx and 5 components. Opacity (/20, /60), gradient (from-/to-) and hover: variants preserved. No visual change; brand color now lives solely in index.html, unblocking the epic/1560 palette swap. Closes #1717 Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
4 tasks
Swap all 7 native alert() calls in App.tsx for the existing addToast() API (type 'error', 5000ms), matching the surrounding toast usage. Covers the 'Server not connected' guard (4x) and the missing-URL validations in the bug/fix/change handlers. window.confirm() stale-session dialogs are left as-is since they require a yes/no return a toast cannot provide. Closes #1718 Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
3 tasks
- Icon.tsx: default aria-hidden="true" on all 24 shared icon components,
placed before {...props} so consumers can override for meaningful icons.
- App.tsx: aria-hidden="true" on 21 decorative inline SVGs (all accompanied
by visible text), and role="img" aria-label="Prompt Driven" on the 2 brand
logos — fixing the mobile gap where the adjacent <h1> is hidden (sm:block)
and the logo was the only branding with no accessible name.
Existing icon-only buttons already carry title/sr-only labels, so no naked
controls remain on this surface. Inline SVGs in other components are a
follow-up sweep; the Icon.tsx default already covers icon-component usage
app-wide.
Closes #1719
Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
4 tasks
sohni-tagirisa
added a commit
that referenced
this pull request
Jun 23, 2026
Consolidates the Sizzle brand epic (#1666) under the frontend-ui-polish epic (#1720), alongside the three polish sub-PRs (#1717/#1718/#1719). Conflict policy: Sizzle brand palette (cyan/green/glow, wordmark restyle) supersedes the now-retired gold that #1717 tokenized. The #1718 toast and #1719 accessibility attributes are preserved on top of the new palette (aria-hidden re-applied where it overlapped a recolored icon line). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
sohni-tagirisa
force-pushed
the
epic/frontend-ui-polish
branch
from
28c5b73 to
a0ec49e
Compare
Brings the three polish sub-PRs (#1717 tokens / #1718 toast / #1719 a11y) onto the Sizzle brand branch so #1666 merges cleanly into the epic. Resolution: Sizzle palette wins over retired gold; toast + a11y preserved. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
EPIC: Brand consistency with Sizzle (wordmark text style + colors)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
EPIC: Frontend UI polish + Sizzle brand consolidation
Umbrella branch (
epic/frontend-ui-polish). Targetsmainfor review only — do not merge into main; the epic→main decision is the maintainer's.Now contains four bodies of work (+499/−321, 49 files):
✅ Merged sub-PRs
pdd.gold*theme tokens acrossApp.tsx+ 5 components. Note: superseded by the brand merge below, which retires gold — kept for history.alert()calls inApp.tsx→ the existing non-blockingaddToast().window.confirm()dialogs intentionally kept.aria-hiddenon all 24Icon.tsxcomponents (overridable);aria-hiddenon 21 decorative SVGs +role="img" aria-label="Prompt Driven"on the 2 logos inApp.tsx.✅ Folded-in epic
index.htmland ~40 components, wordmark restyle ("PromptDriven.ai · PROMPT DRIVEN DEVELOPMENT"),pdd connectCLI formatting (cli_theme/cli_status/StatusReporter/connect_python.prompt), and "professional voice" agent-header copy.Conflict policy (sizzle merge)
Sizzle brand palette wins over the now-retired gold from #1717; #1718 toast and #1719 a11y preserved on top (aria-hidden re-applied where it overlapped a recolored icon).
Verification
vite buildpassesnpm test— 54 passed / 12 files🤖 Generated with Claude Code