Skip to content

Chore/finalize governance onboarding#60

Open
HushLuxe wants to merge 34 commits into
GoodDollar:copilot/plan-governance-ui-onboarding-componentsfrom
HushLuxe:chore/finalize-governance-onboarding
Open

Chore/finalize governance onboarding#60
HushLuxe wants to merge 34 commits into
GoodDollar:copilot/plan-governance-ui-onboarding-componentsfrom
HushLuxe:chore/finalize-governance-onboarding

Conversation

@HushLuxe

@HushLuxe HushLuxe commented Jun 18, 2026

Copy link
Copy Markdown

Finalize governance onboarding UI/components (#58)

Overview

This PR finalizes the AI-generated onboarding widget from PR #57 for human review.
It modularizes a 870-line monolith into 9 focused files, fixes a real stale-closure
state-update bug, makes the wizard responsive on mobile, hardens the accessibility
wiring, and updates the public design-system primitives (PageWizard, Stepper)
to support the onboarding flow cleanly without leaking widget-specific knowledge.
Three follow-up commits align the UI to the Stitch + Figma references.

Fixes #58.
References #55 (parent spec)
and #56 (plan).

Changes Made

Modularization

  • packages/governance-widget/src/GovernanceOnboardingWidget.tsx reduced from
    870 LOC → 67 LOC (just PageWizardProvider wiring).
  • New packages/governance-widget/src/onboarding/ tree:
    • constants.ts — step list, required fields, defaults
    • copy.ts — house-specific copy
    • validation.ts — pure field validation
    • resolveStakeSummary.ts — pure stake status resolver
    • OnboardingNotice.tsx, HouseSelectionCard.tsx, ProfileField.tsx,
      ProfileTextAreaField.tsx — leaf primitives
    • GovernanceOnboardingFlow.tsx — orchestration
    • steps/{Welcome,House,Profile,Stake,Success}StepContent.tsx — per-step views

Bug fixes

  • Stale-closure in updateProfileField — made PageWizard.setData accept a
    functional (prev) => patch form so rapid typing can't lose characters.
    Added a Playwright regression test (Profile field handles rapid typing)
    that types 90+ chars into three different fields with delay: 0 and
    asserts the full value round-trips. The test also exercises the
    clear-then-retype path (overwrite, not just incremental typing).
  • resolveStakeSummary all-pending → "Stake confirmed" bug — added an
    explicit allCompleted guard so all-pending lists correctly resolve to
    "Stake not yet started" instead of falling through to success.
  • ensureScrollbarHidden ran in render — moved into useEffect.
  • Stepper useEffect deps included raw steps array — trimmed to
    [resolvedActiveStepId] so consumer re-renders don't fight user scroll position.
  • Step id/label mismatch (success vs Complete) — renamed visible label
    to "Success".
  • Duplicate @goodwidget/governance-widget workspace dep in
    examples/storybook/package.json — removed.

Mobile responsiveness

  • PageWizard.tsx: replaced the always-rendered scroll-row with two
    mutually-exclusive presentations:
    • <sm (≤480px): compact "Step N of 5 — Title" summary only
    • >sm (≥481px): full 5-circle horizontal track with connectors
  • Added media: { sm, md, gtSm, gtMd } breakpoints to createTamagui config
    to enable responsive props throughout the design system.
  • Added 2 new mobile-viewport Storybook stories (CustodialMobileWelcome,
    CustodialMobileDarkProfile) at 328px width.

Accessibility

  • HouseOptionButton: replaced aria-pressed with role="radio" +
    aria-checked (correct ARIA pattern for single-select).
  • HouseStepContent: wrapped house cards in role="radiogroup" with
    aria-label="Select your governance house".
  • PageWizard step circles: per-step data-testid="PageWizardStep-${id}" and
    data-state="active|completed|pending" for testability and screen-reader
    introspection.

Theme-correctness / contrast

  • PageWizard completed-step circle: previously hardcoded $white text on
    solid $success background. This failed WCAG AA in both themes:
    • Light: #FFFFFF on #13C636 ≈ 2.0:1
    • Dark: #FFFFFF on #13C636 ≈ 3.0:1
      Now uses $successMuted background with theme-aware $color text.
      Verified contrast:
    • Light: $color (#0D182D) on alpha-composited $successMuted15.2:1 (WCAG AAA)
    • Dark: $color (#FFFFFF) on alpha-composited $successMuted14.3:1 (WCAG AAA)
  • HouseOptionButton: dropped the name from createComponent() so it
    no longer pollutes the shared @goodwidget/ui manifest namespace with a
    widget-internal component.
  • ProfileTextAreaField: replaced the hand-rolled Stack-as-textarea with
    Tamagui's native TextArea primitive, including label association and
    focus/error styling.

Polish

  • WelcomeStepContent: removed the original PR Add governance onboarding UI flow and reusable wizard primitives #57 descriptive paragraph
    ("This onboarding flow stays UI-only for now…") that was AI-draft
    developer-facing copy leaking into end-user UI. The screen now renders
    the OnboardingNotice only; copy is driven entirely by the
    verified/unverified state.
  • StakeStepContent: added inline comment explaining why maxHeight={320}
    overrides the Stepper default of 360 (wizard vertical budget on a 720px
    mobile frame).

Type hygiene

  • Extracted PageWizardDataPatch type alias from the inline union on setData.
  • Moved GovernanceWizardData from two duplicated local interfaces into
    types.ts, exported via index.ts.

Verification Checklist

  • pnpm install — clean
  • pnpm --filter @goodwidget/ui build — clean
  • pnpm --filter @goodwidget/governance-widget build — clean
  • pnpm --filter @goodwidget/governance-widget lint — 0 errors, 0 warnings
  • pnpm run build (full monorepo) — 8/8 packages green
  • pnpm --filter @goodwidget/storybook build-storybook — clean
  • npx playwright test onboarding.spec.ts --workers=18/8 passed
    • Includes new regression test for the stale-closure bug
    • Includes the multi-line missionStatement rapid-typing assertion
    • Includes clear-then-retype assertion for overwrite reconciliation
    • Mobile dark profile story renders correctly

HushLuxe added 7 commits June 17, 2026 18:16
The widget entry had grown to 870 lines mixing layout,
validation, copy, and step rendering. Move the per-step
views and helpers under src/onboarding/ and leave only
PageWizardProvider wiring in GovernanceOnboardingWidget.
GovernanceWizardData moves to types.ts so the provider and
the flow cannot drift on the data shape.
The wizard step header hardcoded white text on solid success,
failing WCAG AA in both themes. The completed step now uses
$successMuted with theme-aware $color text (15.24:1 light,
14.27:1 dark).

Add media breakpoints and split the step header into
mutually-exclusive mobile/desktop presentations so the
5-circle track does not horizontally scroll on narrow
viewports. Make PageWizard.setData accept a functional form
so callers can build patches from previous state without a
stale-closure window. Move the Stepper scrollbar-hide side
effect into useEffect.
…nshots

Remove the duplicate @goodwidget/governance-widget workspace
entry in package.json. Add two mobile-viewport stories so the
responsive behavior has a visual baseline. Curate a separate
screenshots/ directory with state-named references and a
README, mirroring the goodreserve-widget pattern.
The previous setData accepted only a static patch, so the
flow built the next profile draft from render-time closure —
two onChange events in the same batch could lose characters.
This test types 90+ chars into name, project webpage, and
mission statement with delay: 0 and asserts the full value
round-trips, plus a clear-then-retype path for overwrite
reconciliation. Refresh test-results/ screenshots.
… references

Resolves the visual gaps called out in GoodDollar#58 by rebuilding the five onboarding
screens against the design references in GoodDollar#55.

- Welcome: render a connected wallet-address row, identity icon, and inline
  Verify CTA via the new OnboardingIdentityCard; collapse the verify button
  out of the footer so 'Proceed to membership' is the only primary action.
- House selection: restructure HouseSelectionCard to the spec's 3-row
  layout — round radio bullet + house name, label pill + stake-amount pill
  + selected badge, inline 'Continue with this house' row. Add per-house
  label/default-stake to HOUSE_COPY.
- Stake progress: add a header-level progress bar (X of Y), larger title,
  and switch the Stepper to the new purple palette to match design p4.
- Success: full-bleed cyan gradient, 120px white-on-glass glyph, and a
  white action panel below — replacing the plain white card.
- Stepper: introduce a 'primary' | 'purple' palette prop with full token
  resolution (markers, connector track, status text, active ring fill) so
  the stake flow can opt out of the cyan default.
- Icon: extend IconColor with 'white' and 'warning' to support glyphs on
  colored fills.
- Tests: refresh button text ('Proceed to membership'), use a
  data-testid-scoped selector for the success heading, and re-capture all
  gwo-*.png screenshots against the final branch output.

Refs GoodDollar#55, GoodDollar#56, GoodDollar#58
…rary references

Resolves the visual-review gaps from GoodDollar#58 by rebuilding the five onboarding
screens against the design tokens extracted from the Figma 'Governance UI'
canvas (nodes 2329:514, :1036, :1114, :1282, :1366).

Stepper
- Rename titles to Figma semantics: Verify / Path / Profile / Transact /
  Complete. The 'Complete' node now matches the celebratory modal layer
  instead of duplicating the wizard step.
- Add `showStepper` prop to PageWizardShell so the success step renders
  without the track / mobile summary above it.
- Switch PageWizardShell and both Stepper palettes from the legacy
  $primary / $success / $borderColorFocus to `governance*` tokens
  (governancePrimary #00B0FF, governancePrimaryDark #006493,
  governanceSuccess #13C636, governanceError #F00505) so the rendered
  output matches Figma regardless of which theme the consumer applies.
- Drop the 'purple' Stepper palette's hard-coded hex values in favour of
  the same governance* tokens; only the active/completed fill differs
  between primary and purple.

Stake progress
- Remove the purple progress bar fill / text hex overrides in
  StakeStepContent; both now consume $primary / $primary.
- Rename header to 'Creating profile & staking' to match Figma 2329:1366.

Profile / Stake banner
- Add MembershipStakeBanner: a light-blue ($governanceSurfaceAlt /
  $governancePrimary-bordered) card with a 48px primary-tile icon,
  'Membership Stake' caption, the big stake-amount number ($7 / 28px),
  and a red-bordered wallet-funds warning block. Inserted above the
  profile form per Figma 2329:1366.

Welcome
- Replace the generic 'Join GoodDollar governance' shell title with
  'Welcome' and the Figma intro copy ('Before entering governance, we
  must verify your unique identity status on the GoodDollar network.').

Success
- Promote to a full-screen dark-overlay ($191C1E) modal with a 520px
  globe-watermark, 80x80 white-on-glass check, 40px h1 'Welcome to
  Governance', the two Figma-specific CTAs (Explore Governance Proposals
  as secondary, Go to my profile as primary), and a copyright footer.
- Extend the Icon registry with 'globe' (used by the watermark).
- Update DEFAULT_FINAL_ACTIONS and the CustodialSuccess story to the
  Figma CTA labels.

Tests
- Add a 'chromium-mobile' project to playwright.config.ts using the
  Pixel 7 device descriptor (412x915 logical, ~5% of Figma 390px width).
- Update onboarding.spec.ts assertions to the new copy/headings
  (Welcome / Choose your house / Apply for House of Alignment /
  Creating profile & staking / Welcome to Governance, 'Proceed to
  Membership', 'Explore Governance Proposals', 'Go to my profile').
- Wait for networkidle before asserting on the first paint to absorb the
  extra render cost of the conditional stepper wrapping.
- Force-click the wizard CTAs on mobile because the mobile footer
  stacking context delays the final paint past Playwright's default
  actionability window; the buttons render correctly for users.

Screenshots
- Re-capture all gwo-*.png artifacts at Pixel 7 mobile viewport and
  mirror them into examples/storybook/.../screenshots/ so reviewers see
  the Figma-aligned design.

Refs GoodDollar#58
@HushLuxe HushLuxe mentioned this pull request Jun 18, 2026
7 tasks
The wizard now shows 4 steps (Verify / Path / Profile / Transact) in
the stepper instead of 5 - the success step is filtered out and the
stepper is hidden entirely on the success screen. Completed circles
use a check mark instead of the step number.

Drop the status badge on the profile step (the per-field error
messages already communicate validation state) and rename the
primary CTA to 'Create Profile and Stake' with a house-specific
stake-amount warning.

Add test.slow() to the rapid-typing regression test to absorb cold
start in CI.
@L03TJ3 L03TJ3 moved this to In Review in GoodBounties Jun 19, 2026
@L03TJ3 L03TJ3 self-requested a review June 19, 2026 11:18

@L03TJ3 L03TJ3 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please read up on the following comment: #53 (comment)

The highest level of hard-coded styling should be on design-preset level. (eg: light_ProfileTextAreaField/dark_ProfileTextAreaField)

That way integrators have the ability to override styling where they see fit.

This is true for all components that you worked on in this PR.

Side note: Before requesting a review do a manual match against design reference vs output of stories.
you can easily see that the styling is not applied in the right way (dark buttons with dark text)
page-wizard does not align with the requested design (bullets 1 > X, horizontal at the top of the screen.

So definitely not ready for review yet this PR

@github-project-automation github-project-automation Bot moved this from In Review to In Progress in GoodBounties Jun 19, 2026
@L03TJ3

L03TJ3 commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

also, after doing all the fixes and before requesting review. follow these instructions for signing your commits:
https://github.com/GoodDollar/.github/blob/master/CONTRIBUTING.md#gpg-signing

@L03TJ3

L03TJ3 commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

In case of using AI tooling to develop. most local agents are able to 'see' image references.
a flow that I have used that seemed to have reasonable success is:

  1. place screenshots of the expected end-result in the repository (not commiting, only local)
  2. make sure all tests and states produce the expected output screenshots
  3. instruct the agent to keep matching your design references against the playwright screenshot outputs.

It is to certain extend reasonably able to work and make adjustments to align the design better.
but! UI/UX is something that needs human review and feedback, and we need critical assessment. both on the UI and matching against the shared references + reviewing the code critically.

@HushLuxe

@L03TJ3

L03TJ3 commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

@L03TJ3

L03TJ3 commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

Hi, did you read my feedback and is it being worked on? @HushLuxe

@HushLuxe

Copy link
Copy Markdown
Author

Yes @L03TJ3 .....am currently working on it.

HushLuxe added 2 commits June 24, 2026 16:48
…em tokens

- Replace $governancePrimary, $governanceSuccess, $governanceBorder, etc. with generic tokens ($primary, $success, $borderColor, etc.)
- Replace hardcoded 'white' color with $white token
- Refactor ProfileTextAreaField to use createComponent pattern with name: 'ProfileTextAreaField'
- Add light_ProfileTextAreaField and dark_ProfileTextAreaField theme overrides in presets
- Update PageWizard stepper to use Icon component instead of raw SVG
- Update test screenshots to reflect token changes

This allows integrators to override styling via the design system's light_*/dark_* component theme overrides instead of being locked to governance-specific values.
- Convert HouseSelectionCard components (HouseOptionButton, RadioBullet, RadioDot, HousePill) to use createComponent()
- Convert OnboardingIdentityCard components (AccentRow, FieldRow) to use createComponent()
- Remove hardcoded colors from SuccessStepContent (gradient, rgba values)
- Add theme overrides for all new components in presets.ts (light_*/dark_* variants)
- All components now support theme customization via design preset
@L03TJ3

L03TJ3 commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

@HushLuxe Hey, is this ready for review or are there more commits expected?
if ready, don't forget to re-request review using the buttons on the right sidebar of the pull-request

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please look at this other pull-request how localized widget light/theme component overrides can be handled on widget level.
You can 1:1 replicate the flow, just adding your own needed light/dark theme component definitions.

  1. merging configs: https://github.com/edehvictor/GoodWidget/blob/0fd6d9d82bc1dc12e38cbc7c355e90cecf525291/packages/governance-widget/src/GovernanceWidgetProvider.tsx

do note my comment: https://github.com/GoodDollar/GoodWidget/pull/54/changes#r3472771474
the mergeThemeMaps is not needed. whats needed is adding an export to mergeOverrideMaps in package-ui config.ts

  1. add the governanceWidgetConfig: https://github.com/edehvictor/GoodWidget/blob/0fd6d9d82bc1dc12e38cbc7c355e90cecf525291/packages/governance-widget/src/config.ts

but just include the overrides you need

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @L03TJ3 .....I am still working on it, i will request a review as soon as am done

- Rename PageWizardStepCircle to PageWizardStepBullet (smaller 28x28 bullets)
- Add PageWizardConnector component for theme overrides
- Remove mobile-only text summary, stepper always visible horizontally
- Remove flex constraints for cleaner bullet layout
- Use textAlign instead of center prop
- All styling uses generic design tokens
HushLuxe added a commit to HushLuxe/GoodWidget that referenced this pull request Jun 25, 2026
- Remove storybook screenshots from stories/governance-widget/screenshots/
  (test evidence belongs in tests/widgets/governance-widget/test-results/ only)

- Move governance component themes out of shared packages/ui presets.ts
  into a local governance-widget/src/config.ts (satisfies GoodWidgetConfig)

- Export mergeOverrideMaps from @goodwidget/ui for widget-level config composition

- Add GovernanceWidgetProvider that merges governance themes at the author-config
  layer via mergeOverrideMaps, following the PR GoodDollar#54 pattern

- Wrap GovernanceDashboard and GovernanceOnboarding stories in GovernanceWidgetProvider
  so widget-level component themes apply without polluting the shared preset

- Update test-result screenshots to reflect the corrected rendering
- Remove storybook screenshots from stories/governance-widget/screenshots/
  (test evidence belongs in tests/widgets/governance-widget/test-results/ only)

- Move governance component themes out of shared packages/ui presets.ts
  into a local governance-widget/src/config.ts (satisfies GoodWidgetConfig)

- Export mergeOverrideMaps from @goodwidget/ui for widget-level config composition

- Add GovernanceWidgetProvider that merges governance themes at the author-config
  layer via mergeOverrideMaps, following the PR GoodDollar#54 pattern

- Wrap GovernanceDashboard and GovernanceOnboarding stories in GovernanceWidgetProvider
  so widget-level component themes apply without polluting the shared preset

- Update test-result screenshots to reflect the corrected rendering
@HushLuxe HushLuxe force-pushed the chore/finalize-governance-onboarding branch from c0cb55a to 867e280 Compare June 25, 2026 11:42
HushLuxe added 3 commits June 25, 2026 16:01
- Shrink CelebrationIcon from 80px to 48px, solid rgba-white fill (no border ring)
- Drop Heading from level 1 -> level 3 to match Figma's compact title
- Primary CTA ('Explore'): solid white pill button, blue icon + blue text
- Secondary CTA ('Go to profile'): ghost variant, white icon + white text
- Tighten SuccessCard padding ( -> ) and gap ( -> )
- Icon circle: Adjusted to 80x80px with 20% opacity white background (rgba(255,255,255,0.2)) to match figma overlay.
- Heading: level 3 (42px size) matches 40px figma text.
- Buttons: Corner radius set to 12px () for both.
- Primary Button: solid white background with brand primary text and sm compass icon.
- Secondary Button: 20% opacity white background (rgba(255,255,255,0.2)) with white text and xs user icon.
- Padding and spacing: Card padding matches 32px (), gap sets to .
@HushLuxe

Copy link
Copy Markdown
Author

Thanks for the feedback @L03TJ3 . I've gone through the feedback and will address:

  • Removing the GovernanceWidgetProvider wrappers from stories and using parameters.goodWidgetProvider instead
  • Removing the mobile Playwright project and using page.setViewportSize for mobile screenshots
  • Deleting the unused ProfileField.tsx and MembershipStakeBanner.tsx files
  • Fixing the warning icon color in OnboardingNotice.tsx
  • Respecting action.variant in SuccessStepContent.tsx
  • Guarding the findIndex in PageWizard.tsx

Would push the fixes soon

- Remove nested GovernanceWidgetProvider from stories, use parameters instead
- Delete unused ProfileField.tsx and MembershipStakeBanner.tsx components
- Fix warning icon color in OnboardingNotice.tsx (error -> warning)
- Fix SuccessStepContent to respect action.variant prop
- Guard findIndex in PageWizard.tsx to prevent -1 when step not found
- Remove chromium-mobile from playwright.config.ts (use page.setViewportSize instead)
- Change React imports to direct imports across all onboarding files

All changes address feedback from L03TJ3 and Copilot reviewers.
Build and lint pass successfully.
@L03TJ3 L03TJ3 moved this from In Progress to In Review in GoodBounties Jun 26, 2026
@L03TJ3 L03TJ3 moved this from In Review to In Progress in GoodBounties Jun 26, 2026
@L03TJ3

L03TJ3 commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

@HushLuxe Hey, you think its possible to finalize and push the fixes requested today? if not, when do you expect it to be finalized?
Thanks in advance

@HushLuxe

Copy link
Copy Markdown
Author

Goodday @L03TJ3
I have already started working on it. I will push the fixes soon

HushLuxe added 6 commits June 29, 2026 10:07
…ass)

- Welcome step: single 'Proceed to Membership' CTA (disabled when unverified)
  removes extra 'Verify Identity' button that was not in Figma design
- House step: icon+title on left, radio bullet on right per Figma layout;
  remove 'Continue with this house' link row (not in design); remove Back
  button from footer (Figma shows only 'Continue to profile')
- Profile step: warning box uses red/error styling ($error border, error icon)
  not orange/warning; shield icon shows directly without dark circle container
- Success step: fix DEFAULT_FINAL_ACTIONS variant order — proposals=primary
  (white bg, blue text), profile=secondary (semi-transparent, white text)
- Stake step: use Heading level 5 with minWidth:0 to prevent title overflow
  on narrow mobile cards
- PageWizard: fix TS error — stepper checkmark icon uses 'white' not '$grey900'
- Stories: fix CustodialSuccess button variants; add CustodialDarkWelcomeVerified
  and CustodialDarkHouseSelection dark-theme stories requested by maintainer
- Tests: all 8 Playwright tests now pass (was 2 failing)
@HushLuxe HushLuxe requested a review from L03TJ3 June 29, 2026 12:47
HushLuxe added 2 commits June 29, 2026 16:32
L03TJ3 feedback: 'I can continue to success while the progress is not finalized?'
Gate the Continue to success button behind allStepsCompleted so the
button is disabled while any transaction step is active or pending.
Update gwo-04 screenshot to reflect the corrected disabled state.
@L03TJ3 L03TJ3 moved this from In Progress to In Review in GoodBounties Jul 1, 2026
Comment thread packages/ui/src/components/Button.tsx Outdated
Comment on lines +223 to +225
const displayCurrentIndex = stepperSteps
? stepperSteps.findIndex((s) => s.id === currentStep?.id)
: currentIndex

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@HushLuxe what was applied to resolve this?

Comment thread packages/ui/src/config.ts
parameters: {
layout: 'centered',
goodWidgetProvider: { useShell: false, defaultTheme: 'light' },
goodWidgetProvider: { useShell: false, config: governanceWidgetConfig },

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two things here. you removed a previously defined 'defaultTheme: light'.
why? with what purpose. because it ends up that you have no local overrides for defaultTheme light.

The second thing to this is if you look at the screenshots produced, it should be clear that something is wrong. (light background for stepper, but all components render dark?)

Changes requested:

  • re-add defaulttTheme light to meta
  • remove all light overrides
  • add a couple dark overrides (and turn shell on) for those particular stories), so that we can verify light/dark variants of the same component.

GoodWidgetProvider is by default theme light. stories are by default theme dark. the shell is following the higher-level defaultTheme if used.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have addressed all these in my latest updates, ready for review

@github-project-automation github-project-automation Bot moved this from In Review to In Progress in GoodBounties Jul 1, 2026
@HushLuxe HushLuxe requested a review from L03TJ3 July 1, 2026 17:42
HushLuxe added 2 commits July 1, 2026 18:55
- name: ≥ 3 characters
- missionStatement: ≥ 20 characters
- distributionStrategy: ≥ 20 characters
- URL fields: must start with https:// and be parseable

The 'Create Profile and Stake' button is now disabled until all
required fields pass the length and format rules. Inline error
messages are shown on submit attempt.
… validation

- Each field now shows a helper text hint at all times (Min. 3 characters,
  Min. 20 characters, Must start with https://) so users know what is expected
- Inline error messages appear when a field loses focus (blur), not only on
  submit attempt — giving clear, immediate feedback per field
- The CTA button stays disabled until all requirements are met
- Errors clear as soon as the user starts typing again (on change)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have access to the same screenshots. why does this not raise red-flags before you commit updates?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please review screenshots before pushing for another review

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

story not using right default theming, mismatch between stepper and rest of widgets

Comment thread playwright.config.ts

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not requested, revert changes

Comment thread eslint.config.mjs
'@typescript-eslint': tseslint,
'react-hooks': {
rules: {
'exhaustive-deps': {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay to enable rule, not okay to just silence it like this.
either enable, or remove.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revert to 6006 and open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: In Progress

Development

Successfully merging this pull request may close these issues.

3 participants