Release: HelloHacks avatar, font and chrome polish - #537
Merged
Merged
Conversation
Adds the HelloHacks custom registration form behind the key `hello-hacks-2026`, following the mis-2026 pattern: question definitions, a Zod schema, a reducer-driven flow, and one entry in the form registry so the admin event editor picks it up automatically. The eight steps (welcome, avatar, song, role, application, confirm-details, review, success) are wired end to end, including per-step validation, the review screen's per-section Edit jumps, and the payload mapping into dynamicResponses. Page components are deliberately unstyled stubs — the Figma designs land in follow-up tickets, one per page. The shell opts h1/h2/h3 out of the global text-white rule. MIS never needed that because its shell is dark; the HelloHacks shell is light, so without it every stub renders invisible headings on a white ground and the page looks blank. Also mirrors the MIS route-level success screen so applicants have somewhere to land after the register page redirects, and adds Jade's four royalty-free tracks under public/assets/2026/hello-hacks/audio. Avatar/soundtrack/role ids and the event id are placeholders and must be confirmed with design and the directors before registration opens — they are stored verbatim in dynamicResponses and cannot be renamed after launch.
Avatars - Add the six decorated BizBot renders and give each avatar its own art, instead of one shared bot on a coloured circle. Grid order and circle colours follow the 1.2 design frame. - Collapse the three copies of the avatar renderer into the shared AvatarBubble. The review row was hardcoded to one colour and the plain bot, so it showed the same avatar whatever was picked. Fonts - Pick Avatar and Review declared no font-family and fell through to Urbanist, while every other step used the SF Pro stack. Both now use a font-sf token carrying that same stack. - Bring their type back onto the shared scale: headings to 700, Review's desktop heading to 36px, subtitles to 16/24, and Review's row values to the weight the Confirm Details fields use. Step chrome - Every step carried its own top padding, status strip gap and back button treatment, so the arrow and status bar jumped between steps. Role styled a status strip it never rendered, Song had none and used a 44px text arrow, and on desktop Role and Confirm Details centred their column vertically, so the arrow drifted with content height. - Drive it all from tokens in globals.css. The strip, arrow and title now land at the same coordinates on every step, at both breakpoints. Teammate fields - The three teammate boxes had no charLimit, no schema max and no maxLength, so long input reached the backend unbounded. Cap them at 50 characters in the question definitions, the schema and the inputs.
The profile card hardcoded the old shared bizbot render on a fixed blue circle, so it ignored the avatar step entirely. An applicant who picked the pizza BizBot saw it on the picker and on Review, then a generic blue bot here. Pass the chosen avatar down and render it through AvatarBubble, the same way the review row does. This is the second instance of the hardcoding removed in the previous commit.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
1 task
There was a problem hiding this comment.
🟡 Changes recommended
Unresolved critical registration-identity and moderate validation/metadata issues block approval.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
Promotes dev to main with HelloHacks 2026 registration polish, themed avatars, shared styling, and avatar-aware success handling. It also includes onboarding, membership, event registration, and MIS navigation updates.
Changes:
- Adds the HelloHacks registration flow, avatars, soundtrack selection, and supporting assets.
- Standardizes typography, layout chrome, and application limits.
- Updates onboarding validation and membership-aware event behavior.
File summaries
| File | Reviewed change |
|---|---|
tailwind.config.ts |
Adds the SF Pro-compatible font stack. |
src/styles/globals.css |
Defines shared layout and chrome tokens. |
src/pages/onboarding.tsx |
Updates onboarding fields and mappings. |
src/pages/layout.tsx |
Adjusts success-page layout. |
src/pages/event/[eventId]/[year]/register/success.tsx |
Routes custom success pages. |
src/pages/event/[eventId]/[year]/register/index.tsx |
Preserves avatar data in success redirects. |
src/lib/membership.ts |
Adds membership-status querying. |
src/features/registrationForms/registry.ts |
Registers HelloHacks forms. |
src/features/registrationForms/mis-2026/pages/RegistrationSuccessPage.tsx |
Updates MIS success navigation. |
src/features/registrationForms/hello-hacks-2026/RegistrationForm.tsx |
Orchestrates the HelloHacks flow and submission payload. |
src/features/registrationForms/hello-hacks-2026/RegistrationForm.module.css |
Styles the registration shell. |
src/features/registrationForms/hello-hacks-2026/pages/WelcomePage.tsx |
Implements the welcome screen. |
src/features/registrationForms/hello-hacks-2026/pages/WelcomePage.module.css |
Styles the welcome screen. |
src/features/registrationForms/hello-hacks-2026/pages/SuccessPage.tsx |
Provides the in-flow success state. |
src/features/registrationForms/hello-hacks-2026/pages/SongPage.tsx |
Implements soundtrack selection. |
src/features/registrationForms/hello-hacks-2026/pages/SongPage.module.css |
Styles soundtrack selection. |
src/features/registrationForms/hello-hacks-2026/pages/RolePage.tsx |
Implements role selection. |
src/features/registrationForms/hello-hacks-2026/pages/RolePage.module.css |
Styles role selection. |
src/features/registrationForms/hello-hacks-2026/pages/ReviewPage.tsx |
Provides final review and submission. |
src/features/registrationForms/hello-hacks-2026/pages/RegistrationSuccessPage.tsx |
Displays the selected avatar after submission. |
src/features/registrationForms/hello-hacks-2026/pages/ConfirmDetailsPage.tsx |
Displays profile confirmation. |
src/features/registrationForms/hello-hacks-2026/pages/ConfirmDetailsPage.module.css |
Styles profile confirmation. |
src/features/registrationForms/hello-hacks-2026/pages/AvatarPage.tsx |
Implements avatar selection. |
src/features/registrationForms/hello-hacks-2026/pages/ApplicationPage.tsx |
Implements application questions and counters. |
src/features/registrationForms/hello-hacks-2026/pages/ApplicationPage.module.css |
Styles application questions. |
src/features/registrationForms/hello-hacks-2026/hooks/useTrackPreview.ts |
Manages soundtrack playback. |
src/features/registrationForms/hello-hacks-2026/flow.ts |
Implements flow transitions. |
src/features/registrationForms/hello-hacks-2026/Definition.ts |
Defines avatars, questions, limits, and validation. |
src/features/registrationForms/hello-hacks-2026/constants.ts |
Defines event identifiers. |
src/features/registrationForms/hello-hacks-2026/components/ConfirmDetailsInput.tsx |
Provides confirmation inputs. |
src/features/registrationForms/hello-hacks-2026/components/CharacterCountField.tsx |
Provides response counters. |
src/features/registrationForms/hello-hacks-2026/components/BackButton.tsx |
Provides back navigation. |
src/features/registrationForms/hello-hacks-2026/components/AvatarBubble.tsx |
Renders selected avatar art. |
src/features/registrationForms/hello-hacks-2026/components/ActionButton.tsx |
Provides shared action buttons. |
src/features/events/home/utils.ts |
Provides event-home utilities. |
src/features/events/home/RegistrationStatusModule.tsx |
Displays membership-aware pricing. |
src/features/events/home/EventModuleRenderer.tsx |
Passes membership props. |
src/features/events/home/EventHomePage.tsx |
Loads event and membership data. |
src/features/events/home/CancelRegistrationButton.tsx |
Handles registration cancellation URLs. |
src/components/SignUpForm/onboardingFormSchema.ts |
Defines onboarding validation. |
public/assets/2026/hello-hacks/welcome/mobile-status-icons.svg |
Adds welcome-screen status icons. |
public/assets/2026/hello-hacks/welcome/hello-script.svg |
Adds HelloHacks welcome artwork. |
public/assets/2026/hello-hacks/welcome/hacks-mark.svg |
Adds HelloHacks branding artwork. |
public/assets/2026/hello-hacks/song-player/outerwheel.svg |
Adds song-player artwork. |
public/assets/2026/hello-hacks/song-player/ipod_body.svg |
Adds song-player artwork. |
public/assets/2026/hello-hacks/song-player/album_cover_4.svg |
Adds an album cover asset. |
public/assets/2026/hello-hacks/song-player/album_cover_3.svg |
Adds an album cover asset. |
public/assets/2026/hello-hacks/song-player/album_cover_2.svg |
Adds an album cover asset. |
public/assets/2026/hello-hacks/song-player/album_cover_1.svg |
Adds an album cover asset. |
public/assets/2026/hello-hacks/confirm-details/mobile-status-icons.svg |
Adds confirmation-screen status icons. |
public/assets/2026/hello-hacks/confirm-details/edit-05.svg |
Adds confirmation-screen artwork. |
public/assets/2026/hello-hacks/confirm-details/arrow-narrow-left.svg |
Adds back-navigation artwork. |
Review details
Suppressed comments (7)
src/features/registrationForms/hello-hacks-2026/Definition.ts:252
RegistrationQuestion.charLimitis a character-based field, but these two definitions put the word limits (150/75) into it while the form and schema count words (countMode="words"andwordLimitedAnswer). A response can pass the client-side word validation while exceeding the declared question limit, so the saved question metadata and submission behavior disagree. Keep the backend metadata and client validation in the same unit, or add an explicit word-limit field to the contract.
src/features/registrationForms/hello-hacks-2026/Definition.ts:140- The artist name is rendered in the song picker, so this typo will be shown to applicants. Please correct
ChudlumbiatoColumbia.
src/features/registrationForms/hello-hacks-2026/pages/ApplicationPage.tsx:208 - This caps normal typing, but the schema still rejects an overlong teammate value and no teammate errors are passed to
ApplicationPageor shown on Review. Any prefilled, programmatically-set, or tampered value over 50 characters will therefore make the final submit appear to do nothing; thread the teammate errors through the application/review UI or validate and surface them before leaving this step.
src/lib/membership.ts:17 - The release description says this net diff contains only the two HelloHacks commits, but this PR also adds membership-status pricing, onboarding option/validation changes, registration-layout changes, and MIS success-page navigation. Those unrelated behavior changes are outside the stated release scope and are not covered by the listed HelloHacks verification; split/revert them or update the description and review scope before promotion.
src/pages/onboarding.tsx:702 - When
Otheris selected with an empty value,onboardingValidationSchemaadds an issue atdietaryRestrictionsOther, but this field has noErrorText.next()therefore refuses to advance without showing why. Render the field's error here.
src/pages/onboarding.tsx:655 - When
Otheris selected with an empty value, the schema rejectslevelOfStudyOther, but this conditional field also has noErrorText. Continue is blocked with no visible feedback, so add the validation message alongside the input.
src/pages/onboarding.tsx:199 - An explicitly blank stored diet (
user.diet === "") is not indiets, so this reset selectsOtherwhile leavingdietaryRestrictionsOtherempty. The schema then blocks these users on the Preferences step even though a blank saved value should be treated like the existingNonedefault; normalize a trimmed empty value toNonebefore this branch.
- Files reviewed: 40/76 changed files
- Comments generated: 3
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| if (flow.step !== "review") return; | ||
|
|
||
| const payload: RegistrationPayload = { | ||
| email: submitted.email, |
Comment on lines
+134
to
+135
| label="How many hackathons have you attended?" | ||
| limit={50} |
Comment on lines
+47
to
+52
| "AI + ML", | ||
| "Software Engineering", | ||
| "Product Management", | ||
| "UX/UI Design", | ||
| "Consulting", | ||
| "Data Science", |
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
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.
Describe your changes
Promotes
devtomain. Net diff is 23 files (+268 −176) — the two HelloHacks commits below and nothing else; everything earlier ondevis already inmain.font-familyand fell through to Urbanist while every other step used SF Pro; both fixed and put back on the shared type scale.globals.css, so they no longer jump between steps.Issue ticket number and link
Checklist before requesting a review
Verified on the merged
devtree:tsc --noEmit,next lintandnext buildall pass. Step chrome confirmed by measuring rendered geometry at 375px and 1440px — status strip, back arrow and title land at identical coordinates on every step.Known and not blocking: the teammate
.max(50)rule has no visible error message, so if a >50-char value ever bypasses the input'smaxLength, Submit dead-ends silently on the Review step. Low reachability; worth a follow-up.Images / Video of Feature