feat: redesign onboarding flow, install/progress screens, and shared design tokens#556
Merged
Kosinkadink merged 27 commits intoMay 18, 2026
Merged
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
Member
|
Thanks! Will review today + over the weekend 🫡 |
- Add MigrateConfirmTakeover + MigrateConfirmBody (brand layout, focus
trap); PanelApp registers the surface and routes first-use migrate
through confirmMigration(..., { surface: 'takeover' })
- useMigrateAction: modal vs takeover branches share one result shape;
other callsites keep the Modal path
- Retire the first-use name-install sub-step; naming stays on Configure;
chain-local passes cameFromLocalBranch so NewInstallModal can show
Back to the local-branch fork and PanelApp can Tier-3 swap back
- Trim ModalDialog by removing inline migrate brand layout
- WhyTryCloudModal: shared brand-primary / brand-ghost classes; CSS
tweaks in main.css for those primitives and migrate chrome
Drop theme-backed background on the header so --titlebar-bg wins; remove the unused themeBg destructure from useTitleBarIdentity.
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.
Summary
This PR aligns first-run, install/configure, progress, migrate, and steady-state title bar under one visual and interaction system: frosted brand surfaces, Comfy yellow accents, shared typography tokens, minimal title-bar chrome during onboarding, and flows that read as intentional product steps—not unrelated modals stacked on top of each other.
Highlights
BrandTakeoverLayout,ChoiceCard, cloud vs local, consent withTermsModal,WhyTryCloudModal, legacy migrate vs start fresh list, and telemetry copy.chain-localpasses{ cameFromLocalBranch: true }when chaining into install after Start fresh so install can offer Back to the fork.NewInstallModal.PanelAppcan Tier-3 swap back from configure to thelocalBranchstep viahandleNewInstallBackToLocalBranchwhen the user uses Back.anchor-name/position-anchor/anchor()) so the spotlight tracks the consent wordmark, cloud pick card, and branded progress wordmark. Beams live inside the inner frame with z-index tuned for content and logo row.NewInstallModalandProgressModal; shared.brand-checkbox,.brand-select, horizontal variant rows on the brand configure surface;PanelAppwires first-use → new install withbrand-chrome,hide-back-to-dashboard, and optionalopen({ initialName })where still relevant.ComfyWordmark); removed the old blurred circular mask; wordmark carriesanchor-name: --brand-beam-targetfor beam alignment with takeover chrome.--titlebar-bg; center identity pill withComfyCLogo, brand-surface fill and yellow outline; waffle, downloads tray, and Send Feedback stay hidden for the entire first-use takeover (consent + post-consent), not onlyconsent-lockdown.MigrateConfirmTakeover+MigrateConfirmBody— full-viewport brand takeover with loading → snapshot summary (counts), bullet list of what migration does, optional checkboxes, confirm/cancel, ESC, and focus restore. Wired viaregisterMigrateTakeoverfromPanelAppanduseMigrateAction(..., { surface: 'takeover' }).useMigrateActiondefaultsurface: 'modal'— legacyModalDialogconfirm path unchanged in role (preview + details + silent recommended variant).neutral-800dialog surface,.modal-box--brandfor opt-in brand continuity;ModalDialogno longer embeds the migrate brand layout (moved to takeover +MigrateConfirmBody)..brand-primary/.brand-ghost.TermsModalandWhyTryCloudModal: initial focus on dismiss control, restore focus to trigger on close.1. First-use takeover
Consent, ToS/privacy modal, cloud explainer, pick grid, legacy branch choices, and handoff into cloud, local install, or migrate—aligned with
.brand-*primitives andmain.csstokens.2. Beams and anchor layout
BrandTakeoverLayout+FirstUseTakeover(andProgressModal) define anchor targets so beams stay visually tied to wordmark/cards across resize.3. Install, progress, and panel chaining
Wizard and in-flow progress reuse
BrandTakeoverLayoutwhere appropriate;PanelApporchestrates overlays, chain flags, and back navigation from configure tolocalBranchwhen applicable.4. Title bar during onboarding
Minimal identity bar until
firstUseMode === 'none'; center pill carries Comfy C + install label with a reserved trailing slot for future picker UI.5. Migrate
findBestVariantstill selects the recommended variant without a user-facing device picker. First-use migrate uses the takeover surface; non–first-use callers keep the modal surface.6. Design tokens and shared CSS
--brand-surface-*,--accent-primary,--titlebar-bg, primary button refresh,.brand-hero/.brand-title/.brand-lead,.brand-checkbox,.brand-select,.brand-primary/.brand-ghost, and global modal overlay/box rules.Not in scope / follow-ups
src/main/index.ts,menu.ts,menu.test.ts) — keep in a separate PR if not part of this branch.instName/pendingFirstUseInstNamebridge for a removed name step may still be marked with TODO inPanelAppfor a fast follow-up delete once reviewers sign off.Test plan
pnpm run typecheckpnpm run lintpnpm run buildpnpm run testtarget.Reviewer note: work is split across multiple conventional commits on this branch for bisect and review.