website refactor

apps/website/components/races/LatestResultsSidebar.tsx

@@ -35,7 +35,7 @@ export function LatestResultsSidebar({ results }: LatestResultsSidebarProps) {
               <RaceSummaryItem
                 track={result.track}
                 meta={`${result.winnerName} • ${result.car}`}
-                date={scheduledAt}
+                dateLabel={scheduledAt.toLocaleDateString()}
               />
             </Box>
           );

apps/website/components/races/RaceListItemWrapper.tsx

@@ -24,22 +24,22 @@ interface RaceListItemProps {
 export function RaceListItem({ race, onClick }: RaceListItemProps) {
   const statusConfig = {
     scheduled: {
-      icon: Clock,
+      iconName: 'Clock',
       variant: 'primary' as const,
       label: 'Scheduled',
     },
     running: {
-      icon: PlayCircle,
+      iconName: 'PlayCircle',
       variant: 'success' as const,
       label: 'LIVE',
     },
     completed: {
-      icon: CheckCircle2,
+      iconName: 'CheckCircle2',
       variant: 'default' as const,
       label: 'Completed',
     },
     cancelled: {
-      icon: XCircle,
+      iconName: 'XCircle',
       variant: 'warning' as const,
       label: 'Cancelled',
     },
@@ -64,11 +64,13 @@ export function RaceListItem({ race, onClick }: RaceListItemProps) {
       dayLabel={date.getDate().toString()}
       timeLabel={formatTime(race.scheduledAt)}
       status={race.status}
+      statusLabel={config.label}
+      statusVariant={config.variant}
+      statusIconName={config.iconName}
       leagueName={race.leagueName}
       leagueHref={race.leagueId ? routes.league.detail(race.leagueId) : undefined}
       strengthOfField={race.strengthOfField}
       onClick={() => onClick(race.id)}
-      statusConfig={config}
     />
   );
 }

apps/website/components/races/SessionSummaryPanel.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@/ui/Box';
 import { Panel } from '@/ui/Panel';
+import { Stack } from '@/ui/Stack';
 import { StatusDot } from '@/ui/StatusDot';
 import { Text } from '@/ui/Text';
 
@@ -30,16 +31,16 @@ export function SessionSummaryPanel({
 
   return (
     <Panel title="Session Summary" className={className}>
-      <Box display="flex" flexDirection="col" gap={3}>
-        <Box display="flex" align="center" justify="between">
+      <Stack gap={3}>
+        <Stack direction="row" align="center" justify="between">
           <Text weight="bold" size="lg">{title}</Text>
-          <Box display="flex" align="center" gap={2}>
+          <Stack direction="row" align="center" gap={2}>
             <StatusDot color={statusColor} pulse={status === 'live'} size={2} />
             <Text size="xs" uppercase weight="bold" style={{ color: statusColor }}>
               {status}
             </Text>
-          </Box>
-        </Box>
+          </Stack>
+        </Stack>
 
         <Box display="grid" gridCols={2} gap={4} borderTop borderStyle="solid" borderColor="border-gray/10" pt={3}>
           {startTime && (
@@ -61,7 +62,7 @@ export function SessionSummaryPanel({
             </Box>
           )}
         </Box>
-      </Box>
+      </Stack>
     </Panel>
   );
 }

apps/website/components/races/TelemetryStrip.tsx

@@ -1,4 +1,5 @@
 import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TelemetryItem {
@@ -25,7 +26,7 @@ export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
       className={`bg-graphite-black/80 border-y border-border-gray/30 py-2 px-4 flex items-center gap-8 overflow-x-auto no-scrollbar ${className}`}
     >
       {items.map((item, index) => (
-        <Box key={index} display="flex" align="center" gap={2} className="whitespace-nowrap">
+        <Stack key={index} direction="row" align="center" gap={2} className="whitespace-nowrap">
           <Text size="xs" color="text-gray-500" uppercase weight="bold" letterSpacing="widest">
             {item.label}
           </Text>
@@ -42,7 +43,7 @@ export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
               {item.trend === 'up' ? '↑' : item.trend === 'down' ? '↓' : '•'}
             </Text>
           )}
-        </Box>
+        </Stack>
       ))}
     </Box>
   );

apps/website/components/races/TrackConditionsPanel.tsx

@@ -3,6 +3,7 @@
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 import { Droplets, Sun, Thermometer, Wind, type LucideIcon } from 'lucide-react';
 
 interface TrackConditionsPanelProps {
@@ -26,7 +27,7 @@ export function TrackConditionsPanel({
         Track Conditions
       </Text>
       
-      <Stack display="grid" gridCols={2} mdCols={4} gap={4}>
+      <Grid cols={2} mdCols={4} gap={4}>
         <ConditionItem 
           icon={Thermometer} 
           label="Air Temp" 
@@ -51,7 +52,7 @@ export function TrackConditionsPanel({
           value={windSpeed} 
           color="text-gray-400" 
         />
-      </Stack>
+      </Grid>
 
       <Stack mt={4} pt={4} borderTop borderColor="border-outline-steel" bgOpacity={0.5} display="flex" alignItems="center" gap={3}>
         <Icon icon={Sun} size={4} color="#FFBE4D" />

apps/website/components/races/UpcomingRacesSidebar.tsx

@@ -42,7 +42,7 @@ export function UpcomingRacesSidebar({ races }: UpcomingRacesSidebarProps) {
               key={race.id}
               track={race.track}
               meta={race.car}
-              date={scheduledAt}
+              dateLabel={scheduledAt.toLocaleDateString()}
             />
           );
         })}