uhryniuk
587f75eab4
Full UI redesign pass complete: persistent tab shell with an always-visible background map, Modern Professional Dark theme, monochrome dark map tiles, offline skeleton map, a shared GlassPanel/FloatingPill component kit, customizable HUD telemetry widgets, and the Map HUD / Plan & Route Planning / Rides History screen rebuilds. 374 tests passing, up from 316. The APK is a fresh release build (debug-signed, no release signing config exists yet). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012Xki7YAcc2TiN2PRZJ2tXr
63 lines
4.1 KiB
Markdown
63 lines
4.1 KiB
Markdown
# Stitch export — Rippr Minimalist Activity Tracker
|
|
|
|
Pulled from [stitch.withgoogle.com](https://stitch.withgoogle.com) project
|
|
`8187200995279352789` via the Stitch MCP server on 2026-08-23.
|
|
|
|
## Correction
|
|
|
|
An earlier version of this README got the design systems backwards. There are **three**
|
|
distinct design systems in this project (`list_design_systems`), and the four screens
|
|
below actually render with the one this doc originally called "stale." That's now fixed.
|
|
|
|
| Asset | Display name | Mode | Primary | Fonts | Used by the 4 screens below? |
|
|
|---|---|---|---|---|---|
|
|
| `assets/e73325c5365a4a56b93823236777e95a` | **Modern Professional Dark** | Dark | Blue `#1978e5` (rendered `#4090fe`/`#aac7ff`) | Inter (everywhere) | **Yes — confirmed by hex-matching the downloaded HTML** |
|
|
| `assets/41670631a4b64b118fb9ea1b54f1bd60` | Rippr (neon HUD) | Dark | Electric green `#00FF41` | Sora / Inter / JetBrains Mono | No |
|
|
| `assets/3938003907261369831` | Modern Professional | Light | Blue `#1275e2` | Inter | No |
|
|
|
|
**The one you specifically asked for** (screen ID
|
|
`asset-stub-assets_e73325c5365a4a56b93823236777e95a`, i.e.
|
|
`assets/e73325c5365a4a56b93823236777e95a`) is **Modern Professional Dark** — deep
|
|
charcoal/navy (`#0a0a0c` base, `#131313` surface, `#16161a` cards), Professional Blue
|
|
primary, Inter throughout, 8px rounding, tonal-layer depth (no shadows, lighter surface
|
|
= more elevated), and a soft blue glow on elevated/active elements instead of a shadow.
|
|
This is `design-system-modern-professional-dark.md` below, and it's the design system
|
|
actually used by all four screens already pulled.
|
|
|
|
`design-system-rippr-neon.md` is kept for reference — it's a real design system in the
|
|
project (`get_project`'s top-level `designTheme`, i.e. whatever a brand-new screen would
|
|
default to), but it is **not** what any of the four fetched screens render with.
|
|
|
|
## Contents
|
|
|
|
| File | What it is |
|
|
|---|---|
|
|
| `design-system-modern-professional-dark.md` | **The design system actually applied to the four screens below.** Full spec: color tokens, typography, spacing, elevation, shape, components. |
|
|
| `design-system-rippr-neon.md` | A second, unused-by-these-screens design system also present in the project (green/cyan HUD aesthetic). Reference only. |
|
|
| `screens/export-summary.md` | Stitch's own generated project overview. Its "Design System: Modern Professional Dark" section was correct all along. |
|
|
| `screens/map-hud-dark.html` + `.png` | Map HUD - Dark Mode: active-recording map screen, floating telemetry cards (speed, avg speed, distance, time), Pause/Stop controls. |
|
|
| `screens/plan-screen-dark.html` + `.png` | Plan Screen - Dark Mode: empty-state route planner, "Tap to drop a pin" prompt. |
|
|
| `screens/route-planning-dark.html` + `.png` | Route Planning - Dark Mode: pins dropped, distance/time/pin-count header, dotted route line, Start Route button. |
|
|
| `screens/rides-history-dark.html` + `.png` | Rides History - Dark Mode: search bar, unit toggle, ride cards with a mini-map thumbnail, date, distance, time, avg speed. |
|
|
|
|
Each `.html` is Stitch's generated markup (Tailwind CSS, vanilla JS) for that screen — a
|
|
reference for structure and interaction, not something to drop into the Flutter app
|
|
as-is.
|
|
|
|
## Not pulled as a screen/image
|
|
|
|
"Design System" (`assets_e73325c5365a4a56b93823236777e95a`) is a **design-system asset
|
|
instance**, not a regular screen — Stitch's `get_screen` call only works on
|
|
`projects/{project}/screens/{screen}` resources and returns `invalid argument` for an
|
|
`assets/{id}` resource. There is no separate HTML/screenshot file for it the way there is
|
|
for a screen; its full content (structured theme tokens + style-guideline prose) is
|
|
fetched via `list_design_systems` instead, and that's what
|
|
`design-system-modern-professional-dark.md` is built from.
|
|
|
|
## Next step
|
|
|
|
This is raw material, not yet applied to the app. `lib/src/ui/theme.dart`'s current
|
|
palette (safety-orange accent, warm near-black ground — see V3-16) is a different
|
|
direction from **either** of these Stitch design systems. Reconciling or replacing is a
|
|
decision for whoever picks up the actual UI work on this branch.
|