stack/docs
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
..
code-examples prompt fix 2026-03-13 13:20:25 -07:00
content/docs Consistency and design changes light mode (#1500) 2026-06-05 10:57:13 -07:00
lib [Docs] - Full cleanup (#1105) 2026-01-27 00:38:51 -06:00
public [Docs][Content] - MCP installation instructions (#915) 2025-10-10 13:31:48 -05:00
scripts Fix Docker build 2025-12-28 19:38:17 +01:00
src Fix types 2026-06-01 16:25:49 -07:00
templates-api Update missing docs redirects 2026-06-03 17:14:22 -07:00
.env mcp / tools update + internal tool (#1283) 2026-04-12 23:32:22 +00:00
.env.development feat(hexclave): PR 1 — wire compatibility layer (invisible) (#1475) 2026-05-23 17:24:55 -07:00
.eslintrc.json Upgrade ESLint 2026-02-27 10:58:28 -08:00
.gitignore [Docs][Site] + [Dashboard][UI] - Adds docs to Stack Companion (#869) 2025-10-30 20:01:30 -05:00
cli.json New docs (#698) 2025-06-20 13:30:01 -07:00
instrumentation-client.ts Upgrade PostHog 2026-01-30 23:38:06 -08:00
next.config.mjs feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
package.json chore: update package versions 2026-06-05 00:16:17 +00:00
postcss.config.mjs New docs (#698) 2025-06-20 13:30:01 -07:00
README.md Rename port prefix envvar 2026-05-27 18:09:52 -07:00
source.config.ts [Docs] - Full cleanup (#1105) 2026-01-27 00:38:51 -06:00
tsconfig.json New docs (#698) 2025-06-20 13:30:01 -07:00

Stack Auth Documentation

This is the documentation site for Stack Auth, built with Next.js and Fumadocs.

Development

pnpm dev

The docs server runs on port 8104 by default (or ${NEXT_PUBLIC_HEXCLAVE_PORT_PREFIX}04).

Project Structure

Content (/content)

Directory Description
content/docs/ Main documentation (guides, SDK reference, components)
content/api/ REST API reference documentation

App Routes (/src/app)

Route Description
/docs Main documentation pages
/api API reference pages (rendered from OpenAPI specs)
/docs-embed Embedded docs for dashboard companion widget
/api-embed Embedded API docs for dashboard companion widget
/mcp-browser MCP documentation browser
/handler/[...stack] Stack Auth handler route
/api/search Search API endpoint
/api/chat AI documentation chat endpoint
/llms.txt LLM-friendly documentation (plain text)
/llms.mdx LLM-friendly documentation (MDX format)

SDK Route Handlers

These routes serve SDK-specific documentation:

  • /js/[...path] - JavaScript SDK
  • /next/[...path] - Next.js SDK
  • /react/[...path] - React SDK
  • /python/[...path] - Python SDK
  • /rest-api/[...path] - REST API

Key Files

File Description
lib/source.ts Content source adapter using Fumadocs loader()
source.config.ts Fumadocs MDX configuration (frontmatter schema, etc.)
app/layout.config.tsx Shared layout options
lib/platform-config.ts Platform/framework configuration for code examples

Components (/src/components)

Directory Description
api/ API playground components
chat/ AI chat interface
layout/ Layout UI components (search, navigation)
layouts/ Page layouts (docs, API)
mdx/ Custom MDX components
stack-auth/ Stack Auth demo components
ui/ Base UI components (button, etc.)

OpenAPI Specs (/openapi)

Contains OpenAPI JSON specifications organized by access level:

  • client-*.json - Client-side API endpoints
  • server-*.json - Server-side API endpoints
  • admin-*.json - Admin API endpoints
  • webhooks-*.json - Webhook event schemas

Scripts

# Generate API docs from OpenAPI specs
pnpm generate-openapi-docs

# Clear generated docs
pnpm clear-docs

Learn More