Repository navigation
mobile: port the design system + restyle all screens - #71
Merged
Merged
Conversation
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/.
3 tasks
5 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #65
Summary
app.cssdesign tokens (maroon/gold/paper/cream/ink palette, display/body/monotype roles, radii) to React Native as
mobile/src/lib/theme.ts— plainStyleSheetvaluesand two pure helper functions (
withOpacity,buttonColors), no component library, no newruntime dependency.
Card,Button(primary/secondary/ghost variants, sm size),Badge,Stat,EmptyState(
mobile/src/components/ui/). Theme + components were written red-first — see the red/greenlog below.
index(rebuilt as a Today-first home per web IA: Today-first home #64's IA — macro statsfrom device-local storage at top, deep-linking to
/today; dining halls below with thesame 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 theroot
Stackheader (_layout.tsx).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/FlatListheaders/footers where they weren't before; the home screen's hallslist moved from a nested
FlatListto a plain.map()since it now lives inside aScrollView, avoiding the nested-VirtualizedList warning).react-test-renderer+@types/react-test-rendereradded as devDependencies so componenttests can render RN trees under
jest-expo/tsc. Both were already transitivedependencies of
jest-expoat the exact version now declared (pnpm-lock.yamlalready hadthem pinned) — this promotes an already-resolved package to a direct devDependency rather
than adding anything new to the dependency graph.
pnpm installafter the change reported"Already up to date" and only moved the existing lockfile entries into
mobile's importerlist (6-line lockfile diff).
Red/green (theme + shared components)
Red — before
theme.ts/components/ui/*existed:Green — after implementing them:
Full suite (including pre-existing
pairSelection/webCryptoPolyfillspecs):Test Suites: 8 passed, 8 total,Tests: 28 passed, 28 total.npx tsc --noEmitis 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-5554has noexpo-dev-client(confirmed viapackage.jsonand logcat — noDevLaunchertraces 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
ReactHostlogs showit loading straight from Metro on port 8081, reached through the emulator's own
10.0.2.2NAT,not through
adb reverse, so remapping that port doesn't redirect it either); and both thegit-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:androidprocess another session/human depends on) to force it. Everythingelse asked for — tokens, components, red/green evidence, every screen restyled,
tsc/jestclean — is done and independently verifiable from this diff and the log above.
Test plan
npx tsc --noEmitclean inmobile/npx jestclean inmobile/(28/28)