polish: ride count copy, open indicator, and badge sizing
All checks were successful
Build and Deploy / Build & Push (push) Successful in 1m5s

- "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>
This commit is contained in:
2026-04-04 20:54:14 -04:00
parent fbf4337a83
commit f1fec2355c
3 changed files with 28 additions and 16 deletions

View File

@@ -112,13 +112,13 @@ export default async function HomePage({ searchParams }: PageProps) {
</span> </span>
<span style={{ <span style={{
background: "var(--color-surface)", background: visibleParks.length > 0 ? "var(--color-open-bg)" : "var(--color-surface)",
border: "1px solid var(--color-border)", border: `1px solid ${visibleParks.length > 0 ? "var(--color-open-border)" : "var(--color-border)"}`,
borderRadius: 20, borderRadius: 20,
padding: "3px 10px", padding: "4px 14px",
fontSize: "0.7rem", fontSize: "0.78rem",
color: "var(--color-text-muted)", color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
fontWeight: 500, fontWeight: 600,
}}> }}>
{visibleParks.length} of {PARKS.length} parks open {visibleParks.length} of {PARKS.length} parks open
</span> </span>

View File

@@ -90,7 +90,7 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount }: Pa
fontWeight: 500, fontWeight: 500,
textAlign: "right", textAlign: "right",
}}> }}>
{openRideCount} open {openRideCount} {openRideCount === 1 ? "ride" : "rides"} operating
</div> </div>
)} )}
</div> </div>

View File

@@ -92,8 +92,8 @@ function DayCell({
</span> </span>
<span style={{ <span style={{
color: "var(--color-ph-hours)", color: "var(--color-ph-hours)",
fontSize: "0.7rem", fontSize: "0.78rem",
fontWeight: 500, fontWeight: 600,
letterSpacing: "-0.01em", letterSpacing: "-0.01em",
whiteSpace: "nowrap", whiteSpace: "nowrap",
}}> }}>
@@ -120,8 +120,8 @@ function DayCell({
}}> }}>
<span style={{ <span style={{
color: "var(--color-open-hours)", color: "var(--color-open-hours)",
fontSize: "0.7rem", fontSize: "0.78rem",
fontWeight: 500, fontWeight: 600,
letterSpacing: "-0.01em", letterSpacing: "-0.01em",
whiteSpace: "nowrap", whiteSpace: "nowrap",
}}> }}>
@@ -200,16 +200,28 @@ function ParkRow({
gap: 10, gap: 10,
}}> }}>
<div> <div>
<span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)" }}> <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
{park.name} <span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)" }}>
</span> {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 }}> <div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
{park.location.city}, {park.location.state} {park.location.city}, {park.location.state}
</div> </div>
</div> </div>
{rideCounts?.[park.id] !== undefined && ( {rideCounts?.[park.id] !== undefined && (
<div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)", fontWeight: 500, whiteSpace: "nowrap", flexShrink: 0 }}> <div style={{ fontSize: "0.72rem", color: "var(--color-open-hours)", fontWeight: 600, whiteSpace: "nowrap", flexShrink: 0 }}>
{rideCounts[park.id]} open {rideCounts[park.id]} {rideCounts[park.id] === 1 ? "ride" : "rides"} operating
</div> </div>
)} )}
</Link> </Link>