website refactor

apps/website/templates/RacesTemplate.tsx

@@ -8,12 +8,13 @@ import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
 import { RaceSidebar } from '@/components/races/RaceSidebar';
 import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
-import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
-import { Stack } from '@/ui/Stack';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
+import { Panel } from '@/ui/Panel';
+import React from 'react';
 
 export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
 export type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
@@ -50,78 +51,77 @@ export function RacesTemplate({
   setShowFilterModal,
 }: RacesTemplateProps) {
   return (
-    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
-      <Container size="lg">
-        <Stack gap={8}>
-          <RacePageHeader 
-            totalCount={viewData.totalCount}
-            scheduledCount={viewData.scheduledCount}
-            runningCount={viewData.runningCount}
-            completedCount={viewData.completedCount}
-          />
+    <Container size="lg" py={8}>
+      <Group direction="column" gap={8} fullWidth>
+        <RacePageHeader 
+          totalCount={viewData.totalCount}
+          scheduledCount={viewData.scheduledCount}
+          runningCount={viewData.runningCount}
+          completedCount={viewData.completedCount}
+        />
 
-          <LiveRacesBanner 
-            liveRaces={viewData.liveRaces}
-            onRaceClick={onRaceClick}
-          />
+        <LiveRacesBanner 
+          liveRaces={viewData.liveRaces}
+          onRaceClick={onRaceClick}
+        />
 
-          <Grid cols={12} gap={6}>
-            <GridItem colSpan={12} lgSpan={8}>
-              <Stack gap={6}>
-                <RaceFilterBar 
-                  timeFilter={timeFilter}
-                  setTimeFilter={setTimeFilter}
-                  leagueFilter={leagueFilter}
-                  setLeagueFilter={setLeagueFilter}
-                  leagues={viewData.leagues}
-                  onShowMoreFilters={() => setShowFilterModal(true)}
-                />
-
-                <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
-                  <Box p={4} borderBottom borderColor="border-outline-steel" bg="bg-base-black" bgOpacity={0.2}>
-                    <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">Race Schedule</Text>
-                  </Box>
-                  <RaceScheduleTable 
-                    races={viewData.races.map(race => ({
-                      id: race.id,
-                      track: race.track,
-                      car: race.car,
-                      leagueName: race.leagueName,
-                      time: race.timeLabel,
-                      status: race.status as SessionStatus
-                    }))}
-                    onRaceClick={onRaceClick}
-                  />
-                </Box>
-              </Stack>
-            </GridItem>
-
-            <GridItem colSpan={12} lgSpan={4}>
-              <RaceSidebar 
-                upcomingRaces={viewData.upcomingRaces}
-                recentResults={viewData.recentResults}
-                onRaceClick={onRaceClick}
+        <Grid cols={12} gap={6}>
+          <GridItem colSpan={12} lgSpan={8}>
+            <Group direction="column" gap={6} fullWidth>
+              <RaceFilterBar 
+                timeFilter={timeFilter}
+                setTimeFilter={setTimeFilter}
+                leagueFilter={leagueFilter}
+                setLeagueFilter={setLeagueFilter}
+                leagues={viewData.leagues}
+                onShowMoreFilters={() => setShowFilterModal(true)}
               />
-            </GridItem>
-          </Grid>
 
-          <RaceFilterModal
-            isOpen={showFilterModal}
-            onClose={() => setShowFilterModal(false)}
-            statusFilter={statusFilter}
-            setStatusFilter={setStatusFilter}
-            leagueFilter={leagueFilter}
-            setLeagueFilter={setLeagueFilter}
-            timeFilter={timeFilter}
-            setTimeFilter={setTimeFilter}
-            searchQuery=""
-            setSearchQuery={() => {}}
-            leagues={viewData.leagues}
-            showSearch={false}
-            showTimeFilter={false}
-          />
-        </Stack>
-      </Container>
-    </Box>
+              <Panel 
+                title="Race Schedule" 
+                variant="dark" 
+                padding={0}
+              >
+                <RaceScheduleTable 
+                  races={viewData.races.map(race => ({
+                    id: race.id,
+                    track: race.track,
+                    car: race.car,
+                    leagueName: race.leagueName,
+                    time: race.timeLabel,
+                    status: race.status as SessionStatus
+                  }))}
+                  onRaceClick={onRaceClick}
+                />
+              </Panel>
+            </Group>
+          </GridItem>
+
+          <GridItem colSpan={12} lgSpan={4}>
+            <RaceSidebar 
+              upcomingRaces={viewData.upcomingRaces}
+              recentResults={viewData.recentResults}
+              onRaceClick={onRaceClick}
+            />
+          </GridItem>
+        </Grid>
+
+        <RaceFilterModal
+          isOpen={showFilterModal}
+          onClose={() => setShowFilterModal(false)}
+          statusFilter={statusFilter}
+          setStatusFilter={setStatusFilter}
+          leagueFilter={leagueFilter}
+          setLeagueFilter={setLeagueFilter}
+          timeFilter={timeFilter}
+          setTimeFilter={setTimeFilter}
+          searchQuery=""
+          setSearchQuery={() => {}}
+          leagues={viewData.leagues}
+          showSearch={false}
+          showTimeFilter={false}
+        />
+      </Group>
+    </Container>
   );
 }