website refactor

apps/website/components/races/RaceSidebar.tsx

@@ -4,12 +4,11 @@ import { SidebarRaceItem } from '@/components/races/SidebarRaceItem';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { RaceViewData } from '@/lib/view-data/RacesViewData';
 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 { Trophy, Users } from 'lucide-react';
 import React from 'react';
 
 interface RaceSidebarProps {
@@ -23,15 +22,16 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
     <Stack gap={6}>
       {/* Upcoming This Week */}
       <Panel 
+        variant="precision"
         title="Next Up" 
-        description="This week"
+        description="Scheduled sessions"
       >
         {upcomingRaces.length === 0 ? (
           <Box paddingY={4} textAlign="center">
             <Text size="sm" variant="low">No races scheduled this week</Text>
           </Box>
         ) : (
-          <Stack gap={3}>
+          <Stack gap={1}>
             {upcomingRaces.map((race) => (
               <SidebarRaceItem
                 key={race.id}
@@ -49,14 +49,16 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
 
       {/* Recent Results */}
       <Panel 
+        variant="precision"
         title="Recent Results" 
+        description="Latest finishes"
       >
         {recentResults.length === 0 ? (
           <Box paddingY={4} textAlign="center">
             <Text size="sm" variant="low">No completed races yet</Text>
           </Box>
         ) : (
-          <Stack gap={3}>
+          <Stack gap={1}>
             {recentResults.map((race) => (
               <SidebarRaceItem
                 key={race.id}
@@ -73,7 +75,7 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
       </Panel>
 
       {/* Quick Actions */}
-      <Panel title="Quick Actions">
+      <Panel variant="precision" title="Quick Actions">
         <Stack gap={2}>
           <SidebarActionLink
             href={routes.public.leagues}