website refactor

apps/website/components/races/RaceSidebar.tsx

@@ -7,6 +7,8 @@ import { Panel } from '@/ui/Panel';
 import { Icon } from '@/ui/Icon';
 import { SidebarActionLink } from '@/ui/SidebarActionLink';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 import { Clock, Trophy, Users } from 'lucide-react';
 import React from 'react';
 
@@ -18,18 +20,18 @@ interface RaceSidebarProps {
 
 export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceSidebarProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+    <Stack gap={6}>
       {/* Upcoming This Week */}
       <Panel 
         title="Next Up" 
         description="This week"
       >
         {upcomingRaces.length === 0 ? (
-          <div style={{ padding: '1rem 0', textAlign: 'center' }}>
+          <Box paddingY={4} textAlign="center">
             <Text size="sm" variant="low">No races scheduled this week</Text>
-          </div>
+          </Box>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          <Stack gap={3}>
             {upcomingRaces.map((race) => (
               <SidebarRaceItem
                 key={race.id}
@@ -41,7 +43,7 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
                 onClick={() => onRaceClick(race.id)}
               />
             ))}
-          </div>
+          </Stack>
         )}
       </Panel>
 
@@ -50,11 +52,11 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
         title="Recent Results" 
       >
         {recentResults.length === 0 ? (
-          <div style={{ padding: '1rem 0', textAlign: 'center' }}>
+          <Box paddingY={4} textAlign="center">
             <Text size="sm" variant="low">No completed races yet</Text>
-          </div>
+          </Box>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          <Stack gap={3}>
             {recentResults.map((race) => (
               <SidebarRaceItem
                 key={race.id}
@@ -66,13 +68,13 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
                 onClick={() => onRaceClick(race.id)}
               />
             ))}
-          </div>
+          </Stack>
         )}
       </Panel>
 
       {/* Quick Actions */}
       <Panel title="Quick Actions">
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+        <Stack gap={2}>
           <SidebarActionLink
             href={routes.public.leagues}
             icon={Users}
@@ -83,8 +85,8 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
             icon={Trophy}
             label="View Leaderboards"
           />
-        </div>
+        </Stack>
       </Panel>
-    </div>
+    </Stack>
   );
 }