feat(results): Results Screen Dark Theme & Coordinated Confirmation Beat#3
Merged
Conversation
… warnings, and handle unconfirmed timeout fallback
…d theme and add custom dark variant support
…lding2, Droplet, Zap, Phone)
…polymorphic Button component
- Hero: switch to min-h-[80vh] with responsive padding (pt-20 pb-12), remove dead space above title - Problem Statement: py-12 md:py-16 (was py-20 md:py-28) and space-y-8 (was space-y-16) - Intake Console: py-12 md:py-16 (was py-20 md:py-24) - How It Works: height 75vh (was 90vh) and py-6 header (was py-8) - Stats: py-12 md:py-16 and mb-10 (was py-20 md:py-28 and mb-20) - Footer: py-12 md:py-16 and space-y-8, pt-10 heartbeat (was py-20 md:py-24 and space-y-10, pt-16)
…ay system - Raise image opacity 0.35 → 0.55 (clearly intentional texture, not muddy) - Layer 1: solid base tint bg-[#0A0A0F]/75 (~75% dark, anchors darkness) - Layer 2: top vignette from-[#0A0A0F]/90 (nav area stays fully dark) - Layer 3: bottom fade to-[#0A0A0F] (clean bleed into next section) - Layer 4: center radial darkening ellipse (keeps headline area darkest) - Layer 5: crimson ambient glow at 75% Y (accent behind CTA zone) - h1 gets drop-shadow filter for crisp gradient text against texture - subtitle gets text-shadow for legibility - Slower Ken Burns: 2.4s (was 2.2s), gentler initial scale 1.12 (was 1.15)
Per design intent: gradient is now a deliberate accent, not a motif. Keep text-gradient: - Hero h1 "Every Second Counts" (L280) — the anchor - Closing CTA h2 "When someone..." (L600) — the bookend Remove text-gradient (→ off-white text-white/90): - Intake console span "Save." (was L369) - How It Works span "Zero delay." (was L503) - Stats heading span "Designed for trust." (was L562) Remove text-gradient from stat counters (→ solid text-goldenhour): - "< 6 min", "24/7", "100%" counters (was L567/575/583)
dark-ink-muted: #8A8580 → #B0ACA7 Contrast ratios on #0A0A0F (dark-bg): Before: ~5.9:1 (marginal, fails at /60 opacity modifier) After: ~9.8:1 (headroom for /60 → ~5.5:1, still passes AA) Contrast on #14141F (glass-card surface): After: ~8.5:1 (solid headroom for all opacity variants) Color stays clearly subordinate to dark-ink (#F0EDE8, ~19:1 on dark-bg) so visual hierarchy is preserved. Single-token change — applies universally everywhere text-dark-ink-muted / text-ink-muted is used.
Before: bg-emergency (red) w-2.5 h-2.5 — looked like a recording indicator After: bg-white w-2 h-2 with mix-blend-difference — reads as intended cursor Also fix initial position flash: GSAP now sets x/y to -9999 before first mousemove so the dot never briefly appears at the viewport edge. The amber follower ring is unchanged — still clearly a custom cursor element.
The old image had "CALLING 911" (US emergency number) baked into the phone screen. Replaced with a new image showing "CALLING 112" (India's emergency number) to be consistent with the CTA "CALL 112" button. No 911 references remain anywhere in the codebase or public assets.
…aesthetic
New images (generated, cinematic, dark red palette):
- hero_ambulance_speed.png: speeding Indian ambulance at night with motion
blur, wet road reflections, flashing emergency lights
- hero_hospital_er.png: ER entrance at night, ambulance pulling up, medical
staff rushing, HUD data overlays, rain-soaked pavement
- hero_blood_donor.png: medical professional holding blood bag, dark ICU
background, cinematic red bokeh
Total slides: 3 → 6 (app mockup, ambulance speed, ER entrance, blood donor,
city ambulance, paramedics)
Slide interval: 6s → 7s (more breathing room for Ken Burns slow zoom)
The overlays were stacking too heavily (75% solid tint + 55% opacity image = ~14% image visible). Fix: - image opacity: 0.55 → 1.0 (full opacity, images ARE the hero) - base tint: bg/75 → bg/40 (40% — light darken, not blackout) - top vignette: /90 → /80 (softer) - bottom fade: /30 → /20 (softer) - centre radial: 0.45 → 0.55 (slightly more around text for legibility) - crimson glow: 0.12 → 0.18 (slightly stronger signature accent) Result: dramatic cinematic photos are now the visual anchor of the hero, exactly like red.health — photo IS the content, overlays only serve contrast.
… points
Root cause: some Supabase rows (persisted before a /60 guard was confirmed
or from an older schema) store eta_minutes as raw seconds (e.g. 2947 s =
~49 min). The backend estimate_eta_minutes() and _google_eta() are both
correct (return minutes), but old DB rows caused the UI to display '2947 min'.
Fix:
- Add normalizeEta(raw) helper in PatientResultsView:
if raw > 120 → treat as seconds: Math.round(raw / 60)
else → already minutes: Math.round(raw)
clamp to 1–120 min always
- Apply normalizeEta() at every eta_minutes ingestion point:
• updateStateFromPayload (polling path)
• Supabase Realtime emergency_requests hospitals array update
- No backend changes needed (backend formula is correct)
'REAL API' / 'MOCK: ON' badge, 'TIMEOUT: ON/OFF' toggle, and 'ID: req...' text are now hidden in any production build (Vite sets DEV=false on build). All three remain fully functional in local dev (npm run dev) so the mock/real toggle still works for development and testing.
…t-border accent to cards
…r card-stacking effect on Live Results
…dependencies, and completely remove REAL API and ID badges
…verlay, map radar ping, and hospital confirmed moment
…d prefers-reduced-motion safety
… preloader overlays for instant loading
…onfirmation beat, and live map directions
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
2 participants
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.
This PR introduces results screen enhancements: dark theme conversion, layout spacing alignment, orchestrated confirmation beat sequence (Web Audio chime, Leaflet map auto-pan/zoom, success banner, prefers-reduced-motion checking), and interactive Directions buttons next to each Call option.