diff --git a/src/api/groupLessons.ts b/src/api/groupLessons.ts index 891d76e2..d5ecc17f 100644 --- a/src/api/groupLessons.ts +++ b/src/api/groupLessons.ts @@ -96,8 +96,8 @@ export interface UpcomingGroupLessonsApiResponse { export interface GroupLessonsFilters { coachId?: number; - level?: number; - radiusMiles?: number; + level?: string | number; + radius?: number; dateStart?: string; dateEnd?: string; q?: string; diff --git a/src/pages/GroupLessonsPage.css b/src/pages/GroupLessonsPage.css index a9041902..6801a0cc 100644 --- a/src/pages/GroupLessonsPage.css +++ b/src/pages/GroupLessonsPage.css @@ -20,6 +20,22 @@ white-space: nowrap; } +.group-lessons-page .fc-header__title { + font-size: 28px; + line-height: 1.2; + font-weight: 700; + letter-spacing: normal; +} + +.group-lessons-page .fc-header__description { + font-size: 16px; + line-height: 1.4; +} + +.group-lessons-page .fc-header { + margin-bottom: 16px; +} + @media (max-width: 640px) { .group-lessons-page .fc-header__description { white-space: normal; @@ -33,7 +49,8 @@ @media (min-width: 1024px) { .group-lessons-page__inner { - padding-bottom: 88px; + padding: 32px 32px 88px; + box-sizing: border-box; } } @@ -1023,17 +1040,18 @@ .group-lessons-mobile-hero h1 { margin: 0; - font-size: 24px; - font-weight: 800; + font-size: 18px; + line-height: 1.2; + font-weight: 700; color: var(--fc-color-text-primary); - letter-spacing: -0.03em; + letter-spacing: normal; } .group-lessons-mobile-hero p { margin: 0; font-size: 13px; color: var(--fc-color-text-secondary); - line-height: 1.35; + line-height: 1.4; white-space: nowrap; } diff --git a/src/pages/GroupLessonsPage.tsx b/src/pages/GroupLessonsPage.tsx index cc8e3cc9..d2ed110d 100644 --- a/src/pages/GroupLessonsPage.tsx +++ b/src/pages/GroupLessonsPage.tsx @@ -30,7 +30,20 @@ import "../components/coaches/coaches.css"; import "./GroupLessonsPage.css"; const DEFAULT_LOCATION = "San Francisco, CA"; -const radiusOptions = ["All", "1 mi", "3 mi", "5 mi", "10 mi", "20 mi"]; +const radiusOptions = [ + "All", + "1 mi", + "3 mi", + "5 mi", + "10 mi", + "20 mi", + "30 mi", + "50 mi", + "75 mi", + "100 mi", + "150 mi", + "200 mi", +]; const DEFAULT_RADIUS_OPTION = "10 mi"; const parseRadius = (radius: string) => { @@ -46,6 +59,15 @@ const formatLevelRange = (level: number) => { return `${level.toFixed(1)} - ${upperBound}`; }; +const LEVEL_FILTER_LABELS: Record = { + "2.5": "Beginner (NTRP 2.5)", + "3.0": "Advanced Beginner (NTRP 3.0)", + "3.5": "Intermediate (NTRP 3.5)", + "4.0": "Advanced (NTRP 4.0)", + "4.5": "Advanced Plus (NTRP 4.5)", + "5.0": "Expert (NTRP 5.0)", +}; + const toIsoDate = (date: Date) => { return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())) .toISOString() @@ -686,8 +708,8 @@ const GroupLessonsPage = () => { setIsLoading(true); setLoadError(null); - const parsedLevel = - levelFilter === "All levels" ? undefined : Number.parseFloat(levelFilter); + const selectedLevelLabel = + levelFilter === "All levels" ? undefined : LEVEL_FILTER_LABELS[levelFilter]; const radiusMiles = parseRadius(selectedRadius); const dateRange = dateFilter.type === "all" @@ -706,8 +728,8 @@ const GroupLessonsPage = () => { ...(resolvedPosition ? { position: resolvedPosition } : {}), filters: { coachId: selectedCoachId, - level: Number.isFinite(parsedLevel ?? NaN) ? parsedLevel : undefined, - radiusMiles: + level: selectedLevelLabel, + radius: useLocationFilter && Number.isFinite(radiusMiles) ? radiusMiles : undefined, ...dateRange, }, @@ -1261,10 +1283,10 @@ const GroupLessonsPage = () => {
-
+ {/*

Available sessions nearby

{resultsSummary}

-
+
*/}
Sort by