website refactor

apps/website/components/leagues/StandingsTableShell.tsx

@@ -4,6 +4,8 @@ import { Icon } from '@/ui/Icon';
 import { Panel } from '@/ui/Panel';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { PositionBadge } from '@/ui/ResultRow';
 import { TrendingUp, Trophy } from 'lucide-react';
 import React from 'react';
@@ -32,7 +34,7 @@ export function StandingsTableShell({ standings, title = 'Championship Standings
         <Text size="xs" variant="low">{standings.length} Drivers</Text>
       }
     >
-      <div style={{ overflowX: 'auto' }}>
+      <Box overflowX="auto">
         <Table>
           <TableHead>
             <TableRow>
@@ -50,10 +52,10 @@ export function StandingsTableShell({ standings, title = 'Championship Standings
                   <PositionBadge position={entry.position} />
                 </TableCell>
                 <TableCell>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                  <Group gap={3}>
                     <Text weight="bold" variant="high">{entry.driverName}</Text>
                     {entry.change !== undefined && entry.change !== 0 && (
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.125rem' }}>
+                      <Group gap={0.5}>
                         <Icon 
                           icon={TrendingUp} 
                           size={3} 
@@ -63,9 +65,9 @@ export function StandingsTableShell({ standings, title = 'Championship Standings
                         <Text size="xs" variant={entry.change > 0 ? 'success' : 'critical'}>
                           {Math.abs(entry.change)}
                         </Text>
-                      </div>
+                      </Group>
                     )}
-                  </div>
+                  </Group>
                 </TableCell>
                 <TableCell textAlign="center">
                   <Text size="sm" variant={entry.wins > 0 ? 'high' : 'low'}>{entry.wins}</Text>
@@ -80,7 +82,7 @@ export function StandingsTableShell({ standings, title = 'Championship Standings
             ))}
           </TableBody>
         </Table>
-      </div>
+      </Box>
     </Panel>
   );
 }