Skip to content

mobile: port the design system + restyle all screens - #71

Merged
TSVRN9 merged 3 commits into
mainfrom
mobile/design-system
Aug 19, 2026
Merged

TSVRN9 merged 3 commits into
mainfrom
mobile/design-system

Conversation

@TSVRN9

@TSVRN9 TSVRN9 commented Aug 19, 2026

Copy link
Copy Markdown
Owner

Closes #65

Summary

  • Ports web's app.css design tokens (maroon/gold/paper/cream/ink palette, display/body/mono
    type roles, radii) to React Native as mobile/src/lib/theme.ts — plain StyleSheet values
    and two pure helper functions (withOpacity, buttonColors), no component library, no new
    runtime dependency.
  • Adds the five shared components the issue calls for, mirroring web's component layer:
    Card, Button (primary/secondary/ghost variants, sm size), Badge, Stat, EmptyState
    (mobile/src/components/ui/). Theme + components were written red-first — see the red/green
    log below.
  • Restyles every screen: index (rebuilt as a Today-first home per web IA: Today-first home #64's IA — macro stats
    from device-local storage at top, deep-linking to /today; dining halls below with the
    same favorite-star behavior; then quick links to every other screen, so nothing that was
    reachable from the old nav grid became unreachable), halls/[slug], today, filters,
    favorites, rank, friends, notifications, events, press, newsletter, plus the
    root Stack header (_layout.tsx).
  • Behavior is unchanged: same storage calls, same Supabase queries/RLS-gated writes, same
    favorite/log/rank logic in every screen. The only functional-adjacent changes are layout
    fixes needed to host the new components without breaking scroll (wrapping screens in
    ScrollView/FlatList headers/footers where they weren't before; the home screen's halls
    list moved from a nested FlatList to a plain .map() since it now lives inside a
    ScrollView, avoiding the nested-VirtualizedList warning).
  • react-test-renderer + @types/react-test-renderer added as devDependencies so component
    tests can render RN trees under jest-expo/tsc. Both were already transitive
    dependencies of jest-expo at the exact version now declared (pnpm-lock.yaml already had
    them pinned) — this promotes an already-resolved package to a direct devDependency rather
    than adding anything new to the dependency graph. pnpm install after the change reported
    "Already up to date" and only moved the existing lockfile entries into mobile's importer
    list (6-line lockfile diff).

Red/green (theme + shared components)

Red — before theme.ts/components/ui/* existed:

FAIL src/lib/theme.test.ts
  Cannot find module './theme' from 'src/lib/theme.test.ts'
FAIL src/components/ui/Button.test.tsx
  Cannot find module './Button' from 'src/components/ui/Button.test.tsx'
FAIL src/components/ui/Badge.test.tsx
  Cannot find module './Badge' from 'src/components/ui/Badge.test.tsx'
FAIL src/components/ui/Stat.test.tsx
  Cannot find module './Stat' from 'src/components/ui/Stat.test.tsx'
FAIL src/components/ui/EmptyState.test.tsx
  Cannot find module './EmptyState' from 'src/components/ui/EmptyState.test.tsx'
FAIL src/components/ui/Card.test.tsx
  Cannot find module './Card' from 'src/components/ui/Card.test.tsx'

Test Suites: 6 failed, 6 total

Green — after implementing them:

PASS src/lib/theme.test.ts
PASS src/components/ui/Card.test.tsx
PASS src/components/ui/EmptyState.test.tsx
PASS src/components/ui/Badge.test.tsx
PASS src/components/ui/Stat.test.tsx
PASS src/components/ui/Button.test.tsx

Test Suites: 6 passed, 6 total
Tests:       17 passed, 17 total

Full suite (including pre-existing pairSelection/webCryptoPolyfill specs): Test Suites: 8 passed, 8 total, Tests: 28 passed, 28 total. npx tsc --noEmit is clean.

Verification gap — please read before merging

I could not get real Android-emulator screenshots of these screens, despite trying every
approach the issue described, and I don't want to claim otherwise. Details, and what I'd need
to close this gap, are in my comment on #65. Short version: the installed build on
emulator-5554 has no expo-dev-client (confirmed via package.json and logcat — no
DevLauncher traces anywhere), so it can't be redirected to a second Metro via deep link;
its bundle host is compiled in at native-build time (bridgeless new-arch ReactHost logs show
it loading straight from Metro on port 8081, reached through the emulator's own 10.0.2.2 NAT,
not through adb reverse, so remapping that port doesn't redirect it either); and both the
git-checkout fallback and a plain non-git file copy into the main checkout were blocked by this
environment's own guardrails. I did not rebuild native or seize the shared port 8081 (a
long-running expo run:android process another session/human depends on) to force it. Everything
else asked for — tokens, components, red/green evidence, every screen restyled, tsc/jest
clean — is done and independently verifiable from this diff and the log above.

Test plan

  • npx tsc --noEmit clean in mobile/
  • npx jest clean in mobile/ (28/28)
  • Real-device/emulator screenshots of each restyled screen — not completed, see above

Port web's app.css design tokens (maroon/gold/paper/cream/ink palette, display/body/mono
type roles, radii) to a plain RN StyleSheet theme (mobile/src/lib/theme.ts) plus a small
set of shared components mirroring web's component layer: Card, Button (primary/secondary/
ghost, sm size), Badge, Stat, EmptyState (mobile/src/components/ui/). Theme and components
were written red-first (see PR/issue for the red output).

Restyle every screen (index, halls/[slug], today, filters, favorites, rank, friends,
notifications, events, press, newsletter) plus the root Stack header to use the new tokens
and components instead of ad hoc hex colors. index.tsx is rebuilt as a Today-first home per
#64's IA: today's macro stats (device-local, deep-linking to /today) at top, dining halls
below (favorite-star behavior unchanged), then quick links to every other screen (nothing
dropped from the old nav grid — same destinations, different layout).

Behavior is unchanged: same storage calls, same RLS/Supabase queries, same favorite/log/rank
logic. The only functional-adjacent changes are layout fixes needed to host the new
components without breaking scroll (FlatList/ScrollView wrapping, halls list on the home
screen switched from FlatList to a plain map since it now sits inside a ScrollView).

react-test-renderer + @types/react-test-renderer added as devDependencies so component tests
can render RN trees under jest-expo/tsc — both were already transitive deps of jest-expo at
the exact same version (pnpm-lock.yaml already pinned them), so this just promotes an
already-resolved package to a direct devDependency rather than adding anything new to the
dependency graph.

npx tsc --noEmit and npx jest are both clean in mobile/.
@TSVRN9
TSVRN9 merged commit cd6998e into main Aug 19, 2026
7 checks passed
@TSVRN9
TSVRN9 deleted the mobile/design-system branch August 19, 2026 15:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

mobile: port the design system + restyle all screens

1 participant