feat(install): brand chrome on Track / LoadSnapshot / QuickInstall wizards#564
Open
Kosinkadink wants to merge 26 commits into
Open
feat(install): brand chrome on Track / LoadSnapshot / QuickInstall wizards#564Kosinkadink wants to merge 26 commits into
Kosinkadink wants to merge 26 commits into
Conversation
- Add BrandTakeoverLayout, ChoiceCard, WhyTryCloudModal, and ComfyCLogo - Ship PP Formula ExtraBold, beam lighting art, and why-cloud hero SVG - Refactor FirstUseTakeover.vue, expand main.css, and update en/zh copy
SVG icon components for the branded progress modal header.
- Add --brand-surface-* and --accent-primary; refresh global primary buttons - Centralize .brand-hero / .brand-title / .brand-lead for reused chrome - Wire ChoiceCard and BrandTakeoverLayout to the tokenized surfaces
Drop duplicated pick hero styles in favor of global .brand-* primitives from main.css so configure/install flows stay visually aligned.
Add install.* configure/help-improve copy plus common continue/learnMore labels in English and Chinese.
Redesign NewInstallModal and ProgressModal around BrandTakeoverLayout; show wordmark/glyph progress chrome when appropriate. PanelApp passes brand-chrome / hide-back-to-dashboard when chaining first-use into install.
Add TermsModal for in-app privacy policy and refresh first-use consent layout and copy. Move checkbox chrome to main.css as .brand-checkbox and reuse it from NewInstallModal; extend BrandTakeoverLayout for the flow.
- BrandTakeoverLayout: optional vignette, viewport-fixed beams aligned with centered wordmark, neutral-800 inner frame - FirstUseTakeover: enable vignette on pick; use primary + consent CTA sizing - ChoiceCard: drop redundant glow layers (beam carries the spotlight) - main.css: brand-checkbox hover border state
Add .brand-select / .brand-tag-recommended for the configure surface, soften .brand-title opacity, and ease primary hover transitions.
Shorter migrate/start-fresh labels, name-install step strings, and nameInstallHint for the first-use chain.
Use --takeover-fs-body for description text so it steps down from the label.
…lName }) Restyle the brand-mode configure step with horizontal variant rows (icons + check), invisible native select under .brand-select triggers, and optional initialName pre-seed for the first-use chain.
Replace migrate/start-fresh ChoiceCards with stacked lb-cards; add
nameInstall step before chain-local; forward instName to PanelApp and
into NewInstallModal.open({ initialName }).
Mirror firstUse consent/terms keys and local-branch/name-install copy in Chinese alongside the English additions.
Nudge checkbox top margin and size hints with takeover body type.
Paint ComfyWordmark in #F0FF41 and align consent chrome with isolated stacking context.
Trap initial focus on the dismiss control and return focus to the opening element on teardown.
Match terms-modal focus trap/restore, lighten panel shadow treatment, and refine benefit/secondary action styling.
Move beams inside the inner frame, use anchor() / position-anchor so spotlight tracks the consent wordmark and cloud ChoiceCard; expose anchor names from FirstUseTakeover and tune z stacking for the logo row.
Remove the blurred circular mask behind the progress glyph/wordmark and set anchor-name on the wordmark so TakeoverLayout beams can track the same target as first-use flows.
- Add --titlebar-bg and use it for the title-bar surface - Restyle the center identity pill with ComfyCLogo, brand-surface fill, and yellow outline; reserve trailing slot for future picker - Hide waffle, downloads tray, and feedback for the whole first-use takeover (consent + post-consent), not only consent-lockdown - Update TitleBarApp tests for the new gating
- ModalDialog: migrate flow uses brand shell and snapshot summary rows (counts only); drop user-facing device picker surface - useMigrateAction: findBestVariant in-process; pass target without variant card confirmation - main.css: frosted modal overlay, neutral-800 dialog surface, modal-box--brand tokens, list item contrast - PanelApp: minor branch formatting
Amp-Thread-ID: https://ampcode.com/threads/T-019e2dc2-a8d8-764d-9829-387407279877 Co-authored-by: Amp <amp@ampcode.com>
…zards Wraps the Tier 3 install-flow modals in BrandTakeoverLayout and swaps form chrome to brand-input / brand-select / brand-checkbox / brand-secondary primitives. The .config-shell / .config-card / .config-field layout that NewInstallModal already used moves to global main.css so all four wizards share one source of truth. BrandTakeoverLayout gains a 'back' slot (top-right, mirrors the logo at top-left) so dashboard-launched wizards can surface a TakeoverBack button without adding a wrapper div in every caller. Amp-Thread-ID: https://ampcode.com/threads/T-019e2e1a-aa80-75ad-99de-9e6957e60490 Co-authored-by: Amp <amp@ampcode.com>
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
2 participants
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.
Wraps the three Tier 3 install-flow wizards in
BrandTakeoverLayoutand swaps their form chrome to the brand primitives so they line up with NewInstallModal's brand path.What's in here
BrandTakeoverLayoutwith the dark frame, plum beams, and ComfyC logo, instead of the legacyModalShell+ native form controls.BrandTakeoverLayoutgains abackslot (top-right, mirrors the logo at top-left) so each wizard can plant its ownTakeoverBackbutton without wrapping every caller in a positioning div. NewInstallModal and FirstUseTakeover leave the slot empty.brand-input/brand-input.brand-select(with hidden<select>+ paintedbrand-select__trigger) /brand-secondary. Read-only painted fields use the newbrand-input--readonlymodifier..config-shell/.config-card/.config-card__body/.config-card__footer/.config-field/.config-label/.config-select/.config-path-row/.config-path-input/.config-continuelayout primitives move fromNewInstallModal's scoped styles into globalmain.cssso all four wizards share one source of truth.What stayed the same
emitTelemetryAction), validation flows (trackGuardrailBlocked,checkNvidiaDriverOrWarn,checkDiskSpaceOrWarn,showPathIssueAlerts), and IPC calls are intact — this is a chrome swap, not a rewrite.InstallNamePath.vueis untouched.QuickInstallModalinlines its own brand-styled name+path inputs because it's the only Tier 3 modal that needed them, andNewInstallModalkeeps usingInstallNamePathon its classic step-3 path.LoadSnapshotModallives on.config-card__bodynow, so the drop zone fills the brand card instead of the old.ls-drop-targetwrapper.Stack / merge order
Branched from
integrate/pr-556(PR #560) because the brand chrome only exists there until #560 lands. Targetsfeat/brand-redesignso the diff lands once #560 merges.Verification
Pre-commit checks all pass before commit + push:
pnpm run typecheck(node + web + e2e + integration) ✓pnpm run lint✓pnpm run build✓ (only the pre-existingenvPaths.ts/install.tsdynamic-import warnings)pnpm run test✓ — 937 / 937