Armaan Jain
|
3c89bb8c19
|
Hosted components redesigned (#1573)
## Summary
Redesigns the hosted components app (`apps/hosted-components`) with a
new Tailwind-based UI: rebuilt auth pages (sign-in, sign-up, magic link,
forgot/reset password, MFA, email verification, team invitation, CLI
auth confirm) and a full hosted Account Settings suite (profile, emails
& auth, notifications, active sessions, API keys, payments, teams),
with dark mode support.
Also fixes found along the way: form error clearing in
forgot-password/password-reset, `runAsynchronouslyWithAlert` for the
notifications switch, a `CopyButton` DOM prop leak, a bogus
mobile-session icon check, and imports the app stylesheet in the root
route so the app's Tailwind styles actually apply.
## Before / after screenshots
Captured on the local dev setup (`internal` project). Onboarding is not
shown since it redirects without standalone UI in this setup.
<details>
<summary><b>Sign in</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Sign up</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Forgot password</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Password reset</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Email verification</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>MFA</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Error</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Team invitation</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>CLI auth confirm</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Account settings — Profile</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Account settings — Notifications</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Account settings — Active sessions</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Account settings — API keys</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Account settings — Payments</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
<details>
<summary><b>Account settings — Emails & auth</b></summary>
| | Before | After |
|---|---|---|
| Light | 
| 
|
| Dark | 
| 
|
</details>
Link to Devin session:
https://app.devin.ai/sessions/1d2380aa55694f2fb12ed96e200a32ad
Requested by: @Developing-Gamer
---------
Co-authored-by: Cursor <[email protected]>
Co-authored-by: armaan <[email protected]>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
|
2026-06-15 04:25:33 +05:30 |
|