From f1fec2355c825464824661f8730ff64f7659fe54 Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sat, 4 Apr 2026 20:54:14 -0400
Subject: [PATCH] polish: ride count copy, open indicator, and badge sizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "X rides open" → "X rides operating" (desktop + mobile)
- Green glowing dot next to park name when actively operating
- Hours text in calendar cells: larger (0.78rem) and bolder (600)
- Parks open badge: green tint when parks are open, larger text

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/page.tsx                | 12 ++++++------
 components/ParkCard.tsx     |  2 +-
 components/WeekCalendar.tsx | 30 +++++++++++++++++++++---------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 9115b06..2e0c4c1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -112,13 +112,13 @@ export default async function HomePage({ searchParams }: PageProps) {
           </span>
 
           <span style={{
-            background: "var(--color-surface)",
-            border: "1px solid var(--color-border)",
+            background: visibleParks.length > 0 ? "var(--color-open-bg)" : "var(--color-surface)",
+            border: `1px solid ${visibleParks.length > 0 ? "var(--color-open-border)" : "var(--color-border)"}`,
             borderRadius: 20,
-            padding: "3px 10px",
-            fontSize: "0.7rem",
-            color: "var(--color-text-muted)",
-            fontWeight: 500,
+            padding: "4px 14px",
+            fontSize: "0.78rem",
+            color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
+            fontWeight: 600,
           }}>
             {visibleParks.length} of {PARKS.length} parks open
           </span>
diff --git a/components/ParkCard.tsx b/components/ParkCard.tsx
index 2307a07..698a70f 100644
--- a/components/ParkCard.tsx
+++ b/components/ParkCard.tsx
@@ -90,7 +90,7 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount }: Pa
               fontWeight: 500,
               textAlign: "right",
             }}>
-              {openRideCount} open
+              {openRideCount} {openRideCount === 1 ? "ride" : "rides"} operating
             </div>
           )}
           </div>
diff --git a/components/WeekCalendar.tsx b/components/WeekCalendar.tsx
index dd0078c..8a3b8f3 100644
--- a/components/WeekCalendar.tsx
+++ b/components/WeekCalendar.tsx
@@ -92,8 +92,8 @@ function DayCell({
           </span>
           <span style={{
             color: "var(--color-ph-hours)",
-            fontSize: "0.7rem",
-            fontWeight: 500,
+            fontSize: "0.78rem",
+            fontWeight: 600,
             letterSpacing: "-0.01em",
             whiteSpace: "nowrap",
           }}>
@@ -120,8 +120,8 @@ function DayCell({
       }}>
         <span style={{
           color: "var(--color-open-hours)",
-          fontSize: "0.7rem",
-          fontWeight: 500,
+          fontSize: "0.78rem",
+          fontWeight: 600,
           letterSpacing: "-0.01em",
           whiteSpace: "nowrap",
         }}>
@@ -200,16 +200,28 @@ function ParkRow({
           gap: 10,
         }}>
           <div>
-            <span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)" }}>
-              {park.name}
-            </span>
+            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)" }}>
+                {park.name}
+              </span>
+              {rideCounts?.[park.id] !== undefined && (
+                <span style={{
+                  width: 7,
+                  height: 7,
+                  borderRadius: "50%",
+                  background: "var(--color-open-text)",
+                  flexShrink: 0,
+                  boxShadow: "0 0 5px var(--color-open-text)",
+                }} />
+              )}
+            </div>
             <div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
               {park.location.city}, {park.location.state}
             </div>
           </div>
           {rideCounts?.[park.id] !== undefined && (
-            <div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)", fontWeight: 500, whiteSpace: "nowrap", flexShrink: 0 }}>
-              {rideCounts[park.id]} open
+            <div style={{ fontSize: "0.72rem", color: "var(--color-open-hours)", fontWeight: 600, whiteSpace: "nowrap", flexShrink: 0 }}>
+              {rideCounts[park.id]} {rideCounts[park.id] === 1 ? "ride" : "rides"} operating
             </div>
           )}
         </Link>