Verify page visual consistency

[kentcdodds]

Summary

This PR updates the verify page to better match the provided design. Key changes include:

• Refactored headings and body text for better styling.
• Customized OTP input field styling (circular slots, no separator).
• Updated the "Resend the Code" link and "Continue" button styling, including adding an arrow icon.
• Added new props to the OTPField component (slotClassName, groupClassName, separatorClassName, showSeparator) to allow for greater customization.

Test Plan

1. Start the development server (npm run dev).
2. Navigate to http://localhost:3000/verify?type=onboarding&target=15555555555.
3. Verify that the headings, OTP input field (circular slots, no separator), "Resend the Code" link, and "Continue" button (with arrow icon) match the design.

Checklist

• Tests updated
• Docs updated

Screenshots

---

 

---

Note

Low Risk
Primarily styling/layout updates plus a backwards-compatible OTPField API extension; low risk aside from potential visual regressions in OTP rendering where new optional props are used.

Overview
Updates the /verify page UI to match the latest design: refactors headings into a shared builder, adjusts layout/spacing, repositions error rendering, and tweaks the resend link styling.

Extends OTPField to support customizable OTP slot/group/separator classes and optionally hide the separator, then uses these new props on the verify form to render circular OTP slots and remove the separator; the submit button is also updated to a larger style and includes an arrow icon.

^{Written by Cursor Bugbot for commit 24eeab3. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}