Redesign UI across marketing, auth, recipients, and settings

[kentcdodds]

Site-wide visual and usability pass. Fixes inconsistent spacing and typography, missing empty/error states, unclear copy, broken links, accessibility gaps, and mobile layout problems across every user-facing route.

App chrome

• Self-hosted Inter and Lora variable fonts; consistent container padding; global focus-visible styles for links and native controls
• Sticky header with skip-to-content link, distinct Log in / Sign up CTAs, user menu with avatar initial and a Settings entry, mobile menu with Escape handling
• Footer: tagline, working contact link (the old /contact link was a 404), current year

Marketing

• Home: copy-first hero on mobile, accurate plan copy (unlimited recipients, per-day limits), anchor-linked How it works / Pricing sections, "Most popular" badge
• Real content for Privacy, Terms of Service, Support, and About on a shared ProsePage layout

Auth

• All auth pages share an AuthPage card; login's "Create an account" link now preserves redirectTo; onboarding ToS checkbox links to /tos and /privacy; verify page copy is specific to each verification type

Recipients

• List: clearer plan banners, mobile-friendly rows, empty state with CTA, "Unknown" typo fixed
• Detail: phone and next-send visible on mobile, opted-out / unverified badges with tooltips
• Editor: schedule presets (daily 9 AM default for new recipients), live next-send preview, visible pause toggle, verification callout
• Thread: correct message count, accurate queue-order copy, compact bubbles that fit narrow screens, compose box with focus ring, empty state button

Settings

• Profile index rebuilt as a settings list with icons and descriptions; phone number card; sessions/danger zone
• Subscription: feature lists, "Current plan" badge, cancellation notice, links to the Stripe portal; helpful error boundary
• Password, phone change, and 2FA (index, verify, disable) share a SettingsCard; 2FA setup is a two-step flow
• Breadcrumbs use icons instead of emoji

Shared components

• Larger checkbox, dropdown menus without emoji indicators, search bar with icon and clear button, ErrorMessage used by all error boundaries, 404 page, StatusButton icon spacing

Bugs found by the e2e suite while doing this

• Removed global scroll-behavior: smooth: it made React Router's ScrollRestoration animate scroll-to-top after every navigation
• Dropdown menus are now non-modal (Radix's scroll lock set overflow: hidden on body, which breaks the sticky header) and no longer animate out (the still-mounted closing layer dismissed a quickly re-opened menu)

Cleanup

• Removed dead /components stub route
• Removed the profile page's "<name>'s recipients" link, which pointed at the viewer's recipients

Test Plan

• bun run typecheck, bun run lint, bun run test, bun run test:browser pass
• bun run test:e2e:run (Playwright, 14 tests) passes serially with system Chrome
• Manual walkthrough of /, /about, /privacy, /tos, /support, /login, /signup, /recipients, recipient detail/edit/new, /settings/profile and subpages, /users/:username, and a 404 at desktop and mobile widths, light and dark

Checklist

• Tests updated (user-profile.test.browser.tsx updated for the redesigned profile card; all existing e2e selectors preserved)
• Docs updated (n/a)

Screenshots

  

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 916f423. Configure here.}