website refactor

apps/website/components/races/RaceSidebar.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Clock, Trophy, Users } from 'lucide-react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
 import { SidebarRaceItem } from '@/components/races/SidebarRaceItem';
 import { SidebarActionLink } from '@/ui/SidebarActionLink';
@@ -31,9 +30,9 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
           </Stack>
 
           {upcomingRaces.length === 0 ? (
-            <Box py={4} textAlign="center">
+            <Stack py={4} textAlign="center">
               <Text size="sm" color="text-gray-400">No races scheduled this week</Text>
-            </Box>
+            </Stack>
           ) : (
             <Stack gap={3}>
               {upcomingRaces.map((race) => (
@@ -60,9 +59,9 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
           </Heading>
 
           {recentResults.length === 0 ? (
-            <Box py={4} textAlign="center">
+            <Stack py={4} textAlign="center">
               <Text size="sm" color="text-gray-400">No completed races yet</Text>
-            </Box>
+            </Stack>
           ) : (
             <Stack gap={3}>
               {recentResults.map((race) => (