feat(ui): user guide page + cube-logo brand refresh - #130
Merged
Conversation
Collaborator
Author
|
/preview |
Adds a /guide route + Header link; rebrands to the glass-cube logo (violet/orange palette, gradient buttons, cube favicon, self-hosted Inter via next/font/local); replaces user-facing parent/child terminology with Vault/SubVault, with a mapping note in lib/types.ts.
mellowcroc
force-pushed
the
feat/user-guide-rebrand
branch
from
August 15, 2026 10:58
9ea411f to
2b03791
Compare
Adds e2e/ui/screenshots.spec.ts (runs under the seeded UI harness, no chain) to capture per-action and core-flow screenshots into public/guide, wired into the guide as a thumbnail per action card plus figures in the walkthroughs. Regenerate: cd e2e && bunx playwright test --config playwright.ui.config.ts screenshots
Adds one screenshot per step to Create a Vault, Propose/approve/execute, SubVaults, and Air-gapped signing; the capture spec now stubs the indexer-status and balance fetches so shots show a running indexer and a real balance instead of the no-chain placeholders.
The app already explains these inline at the point of failure, so the reference catalog is redundant. Rewrites the Add Owner 'not canonical' / 'commitment could not be verified' banners, the disabled-button tooltip, and the thrown error into plain language.
Removes the "Indexer running/stopped" row from the sidebar footer (operator jargon; data freshness and lag are already surfaced contextually where they matter). Adds a first-visit pulse + "Start with the guide" tooltip on the header Guide button, shown once (localStorage) and suppressed under E2E so it never lands in captures.
The guide is help/reference, not a vault-operational view, so it no longer sits beside Proposals/Settings. It was also duplicated in the header; keep the single header entry point (with its first-visit hint).
The top-left logo + wordmark had only a faint opacity hover, so it looked like a static mark. Give it button chrome on hover (rounded background + border, brighter wordmark, pointer) and a clearer "Home" tooltip.
The guide is a full-width reference doc with its own in-page table of contents, so the vault-operational sidebar (Proposals/Settings) doesn't belong on it.
Moves the guide out of the header button (and its first-visit hint) into a centered link at the page footer that opens /guide in a new tab. The /guide route now renders bare — no app header, sidebar, footer, or wallet wiring — so it stands on its own, disconnected from the app shell.
Extracts the footer into AppFooter and adds a copyright line for zkSecurity, a GitHub source link, and the build version + short commit. Version comes from package.json and the commit from git (or NEXT_PUBLIC_COMMIT_SHA), both baked in via next.config env.
Recaptures all 19 screenshots so they match the live app: sidebar without the indexer row, header without the guide link, and the new footer.
The standalone guide now has its own identity: a pinned top bar with the cube logo, MINAGUARD wordmark, and a 'User Guide' label. Bumps the right-rail ToC's sticky offset so it clears the header.
The header put its padding inside max-w-6xl while the content wrapper puts it outside, offsetting the logo by one px step. Match the content structure so the cube logo's left edge lines up with the hero text.
Notes the standalone /guide route (rendered outside AppContext), adds CubeLogo/AppFooter to the file tree, and drops 'indexer status' from the Sidebar description (that row was removed).
The CREATE_CHILD delete-disable (271-274 -> 307-310), memo render (628 -> 687), and memo tooltip logic (458-469 -> 496-505) anchors had drifted on main. accounts/new:160 and app/page:37-83 verified still correct.
Replaces the background-fill pill with a subtle motion: on hover the cube scales up ~6% and gains a soft violet glow while the wordmark brightens to white. No background box.
The guide stated Ledger 'allows switching networks in the header,' but the in-app network switcher was removed (#119) and the network is fixed by the vault's deployment. Reworded to match the actual behavior.
- Scope the primary-button gradient to button/a elements, so solid round indicators (pending badge, approval avatars, wizard step dot) no longer inherit the button glow; they render flat violet with dark text (good contrast). - Fix a leftover 'parent Vault' -> 'Vault' in the Destroy SubVault warning. - Guide heading hierarchy: h4 -> h3 so levels never skip. - Lightbox: move focus into the overlay on open and restore it on close.
Round status indicators (pending badge, approval avatars) now render flat; primary buttons keep the gradient. All 19 recaptured.
The child detail page's parent link is now labeled 'Open Vault' (was 'Parent Vault') after the user-facing terminology rename. Anchor the assertion on that link so the UI test suite passes.
Collaborator
Author
|
/preview |
1 similar comment
Collaborator
Author
|
/preview |
The footer's raw <a href="/guide"> ignored the deployment basePath and navigated to root /guide, which is blank under the preview's /preview/<n> prefix. Use next/link so it prepends basePath. The guide's raw <img src="/guide/*.png"> are likewise not basePath-rewritten by Next (only next/link, next/image, and _next assets are), so prefix them with NEXT_PUBLIC_BASE_PATH; otherwise the screenshots 404 under a basePath (e.g. /app in production).
Collaborator
Author
|
/preview |
Preview EnvironmentComment |
graikos
approved these changes
Aug 20, 2026
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
/guideroute — an end-user guide covering key terms, the propose → approve → execute lifecycle, a first-Vault walkthrough, a per-action reference, and air-gapped signing, weighted for new users. Includes per-step screenshots with a zoom lightbox. Renders bare (outside the app shell — no header/sidebar/footer/wallet wiring) and opens in its own tab, so it reads as self-contained documentation.CubeLogo) + a matching cube favicon (app/icon.svg). Accent palette moves from spring-green to the logo's violet, with anorangesecondary token from the cube's warm face.bg-safe-green.text-safe-dark) upgrades all primary buttons; white ink clears WCAG AA on the deepened gradient.next/font/local(bundled WOFF2, so builds never fetch from a font CDN).AppFooter) — © zkSecurity, a new-tab link to the guide, a GitHub source link, and a build stamp (version frompackage.json+ short commit, wired throughnext.config). Shown on app pages; never on the standalone guide.parent/childstay in the code and on-chain contract only (mapping note inlib/types.ts). The cryptic Add Owner "not canonical" / "commitment could not be verified" banners, the disabled-button tooltip, and the thrown error are reworded into plain language.Notes for reviewers
safe-greenfor compatibility — only its value changed, so ~160 usages retint automatically (the two hardcoded green literals were also updated). Consequence: success / confirmed indicators are now violet; red (errors) and amber (warnings) are unchanged, so the good/warn/bad triad stays distinct.transactions/[id]changes are copy-only. No change to the Add Owner canonicity guard — themismatchstate still blocks approval and throws; everyisOwner/!hasApproved/ status conditional is intact.#anchors, so rendering it outsideAppProvider(via apathname === '/guide'branch inRootLayout) is safe and keeps it disconnected from the app.main.Test plan
tsc --noEmit: no new errors. (Three pre-existingmultisigClient.worker.tscommitmentWithSortedAdderrors also exist onmain— not introduced here.)e2e/ui/screenshots.spec.ts, a generator not a CI test); the 19 screenshots underui/public/guide/were regenerated against the current chrome (no sidebar indexer row, footer present)./guidenew-tab behavior, and the header hover pill.