website refactor

apps/website/components/leagues/LeagueMemberRow.tsx

@@ -1,6 +1,7 @@
 import { DriverIdentity } from '@/ui/DriverIdentity';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { DateDisplay } from '@/lib/display-objects/DateDisplay';
@@ -41,7 +42,7 @@ export function LeagueMemberRow({
   return (
     <TableRow variant={isTopPerformer ? 'highlight' : 'default'}>
       <TableCell>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <Box display="flex" alignItems="center" gap={2}>
           {driver ? (
             <DriverIdentity
               driver={driver}
@@ -59,7 +60,7 @@ export function LeagueMemberRow({
           {isTopPerformer && (
             <Text size="xs">⭐</Text>
           )}
-        </div>
+        </Box>
       </TableCell>
       <TableCell>
         <Text variant="primary" weight="medium">

apps/website/components/leagues/LeagueMembers.tsx

@@ -17,8 +17,7 @@ import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
 import { Group } from '@/ui/Group';
 import { ControlBar } from '@/ui/ControlBar';
-import { useCallback, useEffect, useState } from 'react';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 interface LeagueMembersProps {
   leagueId: string;

apps/website/components/leagues/LeagueSchedule.tsx

@@ -7,7 +7,7 @@ import type { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueSchedu
 import { useState } from 'react';
 
 // Shared state components
-import { StateContainer } from '@/ui/StateContainer';
+import { StateContainer } from '@/components/shared/state/StateContainer';
 import { useLeagueSchedule } from "@/hooks/league/useLeagueSchedule";
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';