CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-21 21:09:49 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity
b561cee0ea
stack/apps/backend/src
History
Armaan Jain b246e4ab65
Consistency and design changes light mode (#1500) 
# PR #1500 Visual Writeup


Visual assets hosted in [this
gist](https://gist.github.com/b0c1d3d072a71e30b65380f8b2cf53a1).

- Base: `dev`
- Head: `Consistency-and-design-changes-light-mode`
- Dashboard dev server: `http://localhost:8101`
- Viewport: `1920x1200`
- Screenshots: `74` referenced (`18` surfaces x `2` themes x
`before/after`, plus the attached Conversations create-dialog pair)
- Red outlines appear only on **after** screenshots to mark the changed
surface.

## Summary

This PR refreshes light-mode consistency across dashboard surfaces and
adds a dashboard-only Account Settings implementation. The screenshots
below compare the base branch against the PR branch for every changed
dashboard route/surface included in the scope.

## Screenshot Matrix

### Account Settings - Profile

Dashboard-only profile page redesign against the previous Stack handler
page.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-profile-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-profile-before-light.png)
|
![account-profile-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-profile-after-light.png)
|
| Dark |
![account-profile-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-profile-before-dark.png)
|
![account-profile-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-profile-after-dark.png)
|

### Account Settings - Emails & Auth

Email, password, passkey, OTP, and MFA settings shell.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-emails-auth-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-emails-auth-before-light.png)
|
![account-emails-auth-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-emails-auth-after-light.png)
|
| Dark |
![account-emails-auth-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-emails-auth-before-dark.png)
|
![account-emails-auth-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-emails-auth-after-dark.png)
|

### Account Settings - Notifications

Notification preferences styling.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-notifications-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-notifications-before-light.png)
|
![account-notifications-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-notifications-after-light.png)
|
| Dark |
![account-notifications-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-notifications-before-dark.png)
|
![account-notifications-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-notifications-after-dark.png)
|

### Account Settings - Active Sessions

Active session table and action styling.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-sessions-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-sessions-before-light.png)
|
![account-sessions-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-sessions-after-light.png)
|
| Dark |
![account-sessions-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-sessions-before-dark.png)
|
![account-sessions-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-sessions-after-dark.png)
|

### Account Settings - Payments

Billing surface and account/team billing selector.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-payments-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-payments-before-light.png)
|
![account-payments-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-payments-after-light.png)
|
| Dark |
![account-payments-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-payments-before-dark.png)
|
![account-payments-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-payments-after-dark.png)
|

### Account Settings - Settings

Sign out and account deletion settings.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-settings-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-settings-before-light.png)
|
![account-settings-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-settings-after-light.png)
|
| Dark |
![account-settings-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-settings-before-dark.png)
|
![account-settings-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-settings-after-dark.png)
|

### Account Settings - Team

Team profile, members, and leave-team sections.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-team-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-before-light.png)
|
![account-team-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-after-light.png)
|
| Dark |
![account-team-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-before-dark.png)
|
![account-team-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-after-dark.png)
|

### Account Settings - Create Team

Team creation form.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-team-create-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-create-before-light.png)
|
![account-team-create-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-create-after-light.png)
|
| Dark |
![account-team-create-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-create-before-dark.png)
|
![account-team-create-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-create-after-dark.png)
|

### Analytics Queries

Touched analytics query page surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![analytics-queries-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-queries-before-light.png)
|
![analytics-queries-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-queries-after-light.png)
|
| Dark |
![analytics-queries-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-queries-before-dark.png)
|
![analytics-queries-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-queries-after-dark.png)
|

### Analytics Tables

Analytics table/query controls and data-grid surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![analytics-tables-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-tables-before-light.png)
|
![analytics-tables-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-tables-after-light.png)
|
| Dark |
![analytics-tables-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-tables-before-dark.png)
|
![analytics-tables-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-tables-after-dark.png)
|

### Auth Methods

Authentication method configuration surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![auth-methods-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/auth-methods-before-light.png)
|
![auth-methods-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/auth-methods-after-light.png)
|
| Dark |
![auth-methods-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/auth-methods-before-dark.png)
|
![auth-methods-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/auth-methods-after-dark.png)
|

### Conversations

Support conversation UI surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![conversations-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-before-light.png)
|
![conversations-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-after-light.png)
|
| Dark |
![conversations-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-before-dark.png)
|
![conversations-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-after-dark.png)
|

#### Conversations - Create Dialog

Attached screenshots for the create conversation dialog.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![conversations-dialog-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-dialog-before-light.png)
|
![conversations-dialog-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-dialog-after-light.png)
|

### Domains

Trusted domains alert/card styling.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![domains-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/domains-before-light.png)
|
![domains-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/domains-after-light.png)
|
| Dark |
![domains-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/domains-before-dark.png)
|
![domains-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/domains-after-dark.png)
|

### Email Sent

Sent email and reputation card styling.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![email-sent-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/email-sent-before-light.png)
|
![email-sent-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/email-sent-after-light.png)
|
| Dark |
![email-sent-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/email-sent-before-dark.png)
|
![email-sent-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/email-sent-after-dark.png)
|

### Launch Checklist

Launch checklist page surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![launch-checklist-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/launch-checklist-before-light.png)
|
![launch-checklist-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/launch-checklist-after-light.png)
|
| Dark |
![launch-checklist-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/launch-checklist-before-dark.png)
|
![launch-checklist-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/launch-checklist-after-dark.png)
|

### Payment Products

Products/items payment page surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![payments-products-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/payments-products-before-light.png)
|
![payments-products-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/payments-products-after-light.png)
|
| Dark |
![payments-products-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/payments-products-before-dark.png)
|
![payments-products-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/payments-products-after-dark.png)
|

### Session Replays

Session replay page layout.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![session-replays-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/session-replays-before-light.png)
|
![session-replays-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/session-replays-after-light.png)
|
| Dark |
![session-replays-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/session-replays-before-dark.png)
|
![session-replays-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/session-replays-after-dark.png)
|

### Sign-up Rules

Sign-up rules page surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![sign-up-rules-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/sign-up-rules-before-light.png)
|
![sign-up-rules-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/sign-up-rules-after-light.png)
|
| Dark |
![sign-up-rules-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/sign-up-rules-before-dark.png)
|
![sign-up-rules-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/sign-up-rules-after-dark.png)
|


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Added comprehensive account settings dashboard with profile
management, email and authentication settings, active sessions
monitoring, API key generation and management, payment methods,
notification preferences, and team creation/management.
* Introduced user profile image editing with circular cropping and
compression.
  * Added multi-factor authentication (MFA) setup via TOTP QR codes.
  * Enabled team-based API key management and team member invitations.

* **Design Improvements**
* Refined UI styling across analytics, forms, and dialogs for better
visual hierarchy.
  * Enhanced dark mode support throughout dashboard components.
  * Improved responsive layouts and spacing on dashboard pages.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-05 10:57:13 -07:00
..
app Better UX around hosted component errors 2026-06-04 17:27:04 -07:00
auto-migrations feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
lib Support local dashboard in remote SSH and GH Codespaces (#1538) 2026-06-04 16:36:17 -07:00
oauth Better UX around hosted component errors 2026-06-04 17:27:04 -07:00
private Fix CI/CD 2026-05-23 10:48:41 -07:00
route-handlers Consistency and design changes light mode (#1500) 2026-06-05 10:57:13 -07:00
scripts feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
utils feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
analytics.tsx feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
globals.d.ts Split backend and dashboard (#83) 2024-06-18 15:49:31 +02:00
hexclave.tsx feat(hexclave): PR 5 — internal symbol/path/package renames + brand strings (#1547) 2026-06-03 18:57:09 -07:00
instrumentation.ts feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
polyfills.tsx feat(hexclave): PR 5 — internal symbol/path/package renames + brand strings (#1547) 2026-06-03 18:57:09 -07:00
prisma-client.tsx feat(hexclave): PR 5 — internal symbol/path/package renames + brand strings (#1547) 2026-06-03 18:57:09 -07:00
proxy.tsx feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
s3.tsx feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
smart-router.tsx feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00