website refactor

apps/website/components/races/RaceResultRow.tsx

@@ -5,6 +5,10 @@ import { Image } from '@/ui/Image';
 import { ResultRow, PositionBadge, ResultPoints } from '@/ui/ResultRow';
 import { Text } from '@/ui/Text';
 import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import React from 'react';
 
 interface ResultEntry {
@@ -35,37 +39,56 @@ export function RaceResultRow({ result, points }: RaceResultRowProps) {
       <PositionBadge position={position} />
 
       {/* Avatar */}
-      <div style={{ position: 'relative', flexShrink: 0 }}>
-        <div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)' }}>
+      <Box position="relative" flexShrink={0}>
+        <Surface 
+          width="2.5rem" 
+          height="2.5rem" 
+          rounded="full" 
+          overflow="hidden" 
+          border={isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : true}
+        >
           <Image src={driverAvatar} alt={driverName} width={40} height={40} objectFit="cover" />
-        </div>
-        <div style={{ position: 'absolute', bottom: '-0.125rem', right: '-0.125rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-bg-base)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem' }}>
-          {CountryFlagDisplay.fromCountryCode(country).toString()}
-        </div>
-      </div>
+        </Surface>
+        <Surface 
+          position="absolute" 
+          bottom="-0.125rem" 
+          right="-0.125rem" 
+          width="1.25rem" 
+          height="1.25rem" 
+          rounded="full" 
+          variant="dark" 
+          display="flex" 
+          alignItems="center" 
+          justifyContent="center"
+        >
+          <Text size="xs" style={{ fontSize: '0.625rem' }}>
+            {CountryFlagDisplay.fromCountryCode(country).toString()}
+          </Text>
+        </Surface>
+      </Box>
 
       {/* Driver Info */}
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <Stack flex={1} minWidth="0" gap={1}>
+        <Group gap={2}>
           <Text weight="semibold" size="sm" variant={isCurrentUser ? 'primary' : 'high'} truncate>{driverName}</Text>
           {isCurrentUser && (
             <Badge variant="primary" size="sm">YOU</Badge>
           )}
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '0.25rem' }}>
+        </Group>
+        <Group gap={2}>
           <Text size="xs" variant="low">{car}</Text>
           <Text size="xs" variant="low">•</Text>
           <Text size="xs" variant="low">Laps: {laps}</Text>
           <Text size="xs" variant="low">•</Text>
           <Text size="xs" variant="low">Incidents: {incidents}</Text>
-        </div>
-      </div>
+        </Group>
+      </Stack>
 
       {/* Times */}
-      <div style={{ textAlign: 'right', minWidth: '100px' }}>
+      <Stack textAlign="right" minWidth="100px" gap={1}>
         <Text size="sm" font="mono" variant="high" block>{time}</Text>
-        <Text size="xs" variant="success" block style={{ marginTop: '0.25rem' }}>FL: {fastestLap}</Text>
-      </div>
+        <Text size="xs" variant="success" block>FL: {fastestLap}</Text>
+      </Stack>
 
       {/* Points */}
       <ResultPoints points={points} />