polish: ride count copy, open indicator, and badge sizing
All checks were successful
Build and Deploy / Build & Push (push) Successful in 1m5s
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:
12
app/page.tsx
12
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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user