ci: add Lighthouse CI visual regression check to gate merges (Closes #941) - #1035
Open
waterWang wants to merge 15 commits into
Open
ci: add Lighthouse CI visual regression check to gate merges (Closes #941)#1035waterWang wants to merge 15 commits into
waterWang wants to merge 15 commits into
Conversation
- Add proper props interface (onComplete/onCancel) to CreateBondFlow - Integrate useWallet, useUsdcBalance, useReducedMotion hooks - Add balance display with loading/error/retry states - Add reduced-motion-aware transition gating - Reuse calcUnlockDate from bondPenalty lib - Fix Bond.tsx missing imports, state, BondRow with disclosure toggles - Add network mismatch banner id and txStatus announcer Closes CredenceOrg#836
Audit of text and non-text contrast across interactive states — links, all button variants, primary-filled controls, and focus rings — in both themes. 57 state/theme combinations were measured; 8 failed, and writing the regression test surfaced a ninth. Two token-misuse patterns account for all of them. A theme-dependent fill was paired with a fixed on-colour. --credence-color-primary flips to a light tint (#7dd3fc) in dark mode while the label stayed hard-coded white, so the primary button rendered at 1.67:1 and its hover state at 1.33:1. The same pairing reached the speed-dial FAB, back-to-top button, toggle, segmented control, and active mobile-nav link. Introduce --credence-color-on-primary (white in light, slate-900 in dark) and consume it everywhere the primary fill is painted. Text tokens were used as fills. --credence-color-danger-text is tuned to be read as text on a page, so the dark theme lightens it to #fca5a5; reusing it as the danger button's active background put a white label at 1.9:1. The hover state had the inverse problem in light mode, lightening the fill to #ef4444 for 3.76:1. Split the fills out as --credence-color-danger-fill, -fill-hover and -fill-active so they can darken on interaction without dragging the penalty-amount text along with them. --credence-color-danger- action keeps its values because it is still that text colour. Because the danger fill now darkens, hover and active pin border-color to --credence-color-danger-border; a darkened red would otherwise sink the button's edge below 3:1 against the dark page. The secondary button's fill matches the card behind it, leaving its border as the only affordance that identifies it as a control — which puts the border under the 3:1 non-text floor (SC 1.4.11), where the decorative --credence-border-default managed 1.23:1. Add --credence-color-border-interactive/-hover for control boundaries and leave the decorative token alone for cards and dividers. Disabled states are deliberately untouched. SC 1.4.3 and SC 1.4.11 both exempt inactive components, and the low contrast is the affordance; raising it would make disabled buttons read as enabled. Links and focus rings already passed in both themes and are unchanged, but are now covered so they stay that way. Add src/components/interactiveContrast.test.ts, which resolves colours out of index.css and the component stylesheets rather than a copied colour table, so reverting either a token or a declaration breaks a test. Shared helpers live in src/test/contrast.ts; they strip CSS comments before parsing because prose containing a colon and a later semicolon otherwise reads as a declaration and swallows the next one. Full results in docs/interactive-contrast-audit.md. Closes CredenceOrg#814
…CredenceOrg#1030) Co-authored-by: derekwalter999 <derekwalter999@users.noreply.github.com>
…rg#837) (CredenceOrg#1029) Disconnected visitors still see the original marketing hero. Connected users now see a summary dashboard inline at / instead of being sent to /dashboard manually. Changes: - src/pages/Home.tsx: split into Hero (disconnected), DashboardPreview (connected), and an adaptive Home export that branches on useWallet(). DashboardPreview shows three stat cards (trust tier + score, total bonded USDC, active bond count with per-bond unlock dates), a quick- actions row (Create bond / Open dashboard / View trust score), and an ActivityTimeline compact preview with a link to /attestations. LoadingSkeleton variant=dashboard is shown while isConnecting is true. Mock data mirrors the pattern already used in Dashboard.tsx and is clearly annotated for replacement when the API is wired up. - src/pages/Home.css: new dashboard-preview rules appended after the existing hero styles (home--dashboard, home--loading, home__dashHeader, home__walletChip, home__sectionTitle, home__statGrid, home__statCard, home__bondList, home__bondRow, home__activityFooter). Responsive breakpoint collapses stat grid to single column below 768px. - src/App.tsx: added missing TrustSummary lazy import that was already referenced in the route tree but never declared.
…denceOrg#1025) Resolve merge conflicts from past -X theirs merges in TrustScore.tsx and Bond.tsx. Reconstruct broken components: remove duplicate imports, add missing imports, wire proper hooks/contexts, inline missing helpers. Standardize card grid definitions across both pages to use: grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)) Add explicit responsive breakpoints at 640px / 1280px with consistent gap scaling (space-6 / space-8). Primary action card first in DOM order so it stacks first on mobile. Closes CredenceOrg#854 Co-authored-by: Baskarayelu <baskarayelu@users.noreply.github.com>
* docs: add AUTH_FLOWS.md with login/logout/refresh sequence diagrams Add contributor-facing documentation describing the three session-lifecycle flows (connect wallet, disconnect, re-authentication) and the inactivity timeout. Includes Mermaid sequence diagrams, key code paths, and cross-links to related docs. Linked from both README.md and docs/README.md. * fix: remove duplicate docs/components.md index entry (Windows case-sensitivity) --------- Co-authored-by: 6akola <6akarolawale@gmail.com> Co-authored-by: Baskarayelu <baskarayelu@users.noreply.github.com>
…redenceOrg#1027) Add contributor-facing documentation describing the three session-lifecycle flows (connect wallet, disconnect, re-authentication) and the inactivity timeout. Includes Mermaid sequence diagrams, key code paths, and cross-links to related docs. Linked from both README.md and docs/README.md. Co-authored-by: 6akola <6akarolawale@gmail.com> Co-authored-by: Baskarayelu <baskarayelu@users.noreply.github.com>
…redenceOrg#941) Updates the stubbed CI workflow to include: - Quality Gate: lint, type-check, unit tests, build - Lighthouse CI: performance, accessibility, best-practices audits - Actions pinned by SHA for supply-chain security - npm cache for faster installs - Concurrency group to cancel stale runs
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
10 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
Replaces the stubbed CI workflow with a real quality gate that runs on every PR and push to main. Includes a Lighthouse CI audit for performance, accessibility, and best-practices.
Changes
.github/workflows/ci.yml
lighthouserc.jsonconfigAcceptance Criteria
Closes #941Closes #941