FE-496: Refactor account recovery page with shared auth components

[TimDiekmann]

🌟 What is the purpose of this PR?

This PR refactors the account recovery page to use shared authentication layout components (AuthLayout, AuthPaper, and AuthHeading) for consistency with other authentication pages. It also improves the styling and user experience with better spacing and focus management.

🔗 Related links

• N/A

🚫 Blocked by

• N/A

🔍 What does this change?

• Replaced layout structure: Replaced Container with AuthLayout and AuthPaper components for consistent styling across authentication pages
• Improved spacing: Changed from manual margin management ("> *:not(:first-child)": { marginTop: 1 }) to gap: 1 for cleaner spacing between form elements
• Added heading component: Used AuthHeading component for the "Account Recovery" title instead of raw Typography
• Enhanced UX: Added autoFocus attributes to email and verification code inputs for better keyboard navigation
• Improved messaging: Updated button and label text for consistency ("Submit Code" → "Submit code", "Change Email Address" → "Change email address", "Email" → "Email address")
• Better error styling: Moved error message styling to use palette colors with proper typography variant
• Removed unused import: Removed Container from Material-UI imports as it's no longer needed

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph

⚠️ Known issues

None

🐾 Next steps

None

🛡 What tests cover this?

Existing tests should cover this refactoring as it maintains the same functionality while improving the presentation layer.

❓ How to test this?

1. Navigate to the account recovery page
2. Verify the layout matches other authentication pages (login, signup, etc.)
3. Test the email submission flow
4. Test the verification code submission flow
5. Verify error messages display correctly with proper styling
6. Confirm focus is automatically set on input fields when they become visible

📷 Demo

Before:

After:

https://claude.ai/code/session_01S4ybFcAXDrX3HXV6w1mwpc

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Building	Preview, Comment	Feb 26, 2026 0:34am
petrinaut	Ready	Preview, Comment	Feb 26, 2026 0:34am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign	Ignored		Feb 26, 2026 0:34am
hashdotdesign-tokens	Ignored		Feb 26, 2026 0:34am

[cursor]

PR Summary

Low Risk
Low risk UI refactor confined to recovery.page.tsx, but it rearranges the conditional email/code forms and focus behavior which could affect the recovery flow UX if regressions slip in.

Overview
Refactors the account recovery page to use the shared auth shell (AuthLayout, AuthPaper, AuthHeading) instead of a standalone Container/Typography layout, aligning styling with other auth pages.

Updates form presentation and UX: switches spacing to gap, adds autoFocus to the email and code inputs, tweaks button/label copy, and restyles error + flow messages (including red palette styling for errorMessage) while keeping the underlying Ory Kratos flow submission logic the same.

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

[augmentcode]

🤖 Augment PR Summary

Summary: Refactors the account recovery page to use the shared authentication layout components for visual and behavioral consistency with other auth flows.

Changes:

• Replaced the page’s Container/Typography structure with AuthLayout, AuthPaper, and AuthHeading
• Updated form spacing from manual margins to gap-based layout
• Improved copy consistency for labels/buttons (e.g. “Email address”, “Submit code”)
• Added autoFocus on email and verification code inputs
• Improved error rendering to use theme palette + a specific typography variant

Technical Notes: Functionality is intended to remain the same (same recovery flow + submissions), with mostly presentation and UX-focused changes.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 1 suggestions posted.

Comment augment review to trigger a new review at any time.

[vilkinsons]

We will definitely want to revisit this, but fine for now.