mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
0532a18c36
## Summary The **Block new purchases** toggle on the Payments → Settings page was visually out of place: it rendered as a bare `SettingSwitch` outside the `max-w-3xl` settings column, while every neighboring setting (Stripe Connection, Test Mode, Payment Methods, Platform-Managed Methods) was a full-width `Card`. This PR wraps it in a `Card` that matches the existing `TestModeToggle` pattern so it inherits the same width constraint, border, padding, title/description structure, and state-colored icon badge. **File changed:** [`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/settings/page-client.tsx`](https://github.com/stack-auth/stack-auth/blob/fix/payments-block-new-purchases-card/apps/dashboard/src/app/(main)/(protected)/projects/%5BprojectId%5D/payments/settings/page-client.tsx) ## What was wrong Two concrete mismatches with the rest of the page: 1. **Wrong container.** The `SettingSwitch` was a direct child of `<PageLayout>` rather than the `<div className="space-y-6 max-w-3xl">` column that wraps the other settings — so it stretched to the full page width instead of the 3xl column and broke the vertical rhythm (no consistent `space-y-6` gap from the card above). 2. **Wrong style primitive.** It used the bare `SettingSwitch` row component instead of a `Card` + `CardHeader`/`CardTitle`/`CardDescription`/`CardContent` structure — so there was no border, no heading hierarchy, and no state-colored icon badge, which every other setting on the page has. ## Fix - Moved the block inside the `space-y-6 max-w-3xl` column so it's constrained and spaced like its siblings. - Replaced the `SettingSwitch` with a `Card` mirroring `TestModeToggle`: - `CardHeader` with `CardTitle` (\"Block New Purchases\") and `CardDescription` (\"Stops new checkouts while keeping existing subscriptions active.\"). - `CardContent` with an icon badge (`ProhibitIcon`) that turns red when blocking is active, plus a short \"Block new purchases\" label and the `Switch`. - Copy is intentionally minimal: one title, one sentence of description, one label next to the switch. No two-state narration. ## Visual comparison ### Pixel diff (changed pixels tinted red over the after image) 4.7% of pixels changed, all concentrated in the bottom of the settings column — everything else is pixel-identical, confirming the fix is scoped.  ### Cropped before/after toggle (zoomed to the changed region) Full-viewport comparisons are noisy when the delta is a single component at the bottom. This one is cropped to the changed bbox so the card fix is the whole frame — 1s before, 1s after, looped.  ### Wipe reveal (before on the left, after swept in from the left) A vertical red sweeps across the full page, revealing the after state over the before state. Useful for spotting any unintended drift elsewhere on the page (there is none).  ## Test plan - [ ] Open `/projects/<id>/payments/settings` in the dashboard. - [ ] Verify \"Block New Purchases\" renders as a `Card` with the same width as Stripe Connection / Test Mode / Payment Methods. - [ ] Toggle the switch on — icon badge turns red, config write fires (`payments.blockNewPurchases = true`, `pushable: true`). - [ ] Toggle off — icon returns to muted gray, config write fires with `false`. - [ ] Reload the page and confirm the persisted state matches the toggle. - [ ] `pnpm lint` and `pnpm typecheck` pass. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Redesigned the "Block New Purchases" toggle in payment settings with a new card-based interface and visual prohibit indicator for improved clarity and user experience. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|---|---|---|
| .. | ||
| backend | ||
| dashboard | ||
| dev-launchpad | ||
| e2e | ||
| hosted-components | ||
| internal-tool | ||
| mock-oauth-server | ||
| oauth-mock-server | ||
