website refactor

apps/website/components/races/RaceListItem.tsx

@@ -4,6 +4,8 @@ import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { RaceCard, RaceTimeColumn, RaceInfo } from '@/ui/RaceCard';
 import { Car, Trophy, Zap, ArrowRight, Clock, PlayCircle, CheckCircle2, XCircle, HelpCircle } from 'lucide-react';
 import React from 'react';
@@ -61,7 +63,7 @@ export function RaceListItem({
         isLive={isLive}
       />
 
-      <div style={{ width: '1px', height: '2.5rem', backgroundColor: 'var(--ui-color-border-muted)', opacity: 0.2 }} />
+      <Box width="1px" height="2.5rem" bg="var(--ui-color-border-muted)" opacity={0.2} />
 
       <RaceInfo
         title={track}
@@ -73,12 +75,12 @@ export function RaceListItem({
           </Badge>
         }
         meta={
-          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+          <Group gap={4}>
             {strengthOfField && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+              <Group gap={1}>
                 <Icon icon={Zap} size={3.5} intent="warning" />
                 <Text size="sm" variant="low">SOF {strengthOfField}</Text>
-              </div>
+              </Group>
             )}
             {leagueName && leagueHref && (
               <Link
@@ -86,14 +88,14 @@ export function RaceListItem({
                 onClick={(e) => e.stopPropagation()}
                 variant="primary"
               >
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                <Group gap={1}>
                   <Icon icon={Trophy} size={3.5} intent="primary" />
                   <Text size="sm" variant="primary">{leagueName}</Text>
                   <Icon icon={ArrowRight} size={3} intent="primary" />
-                </div>
+                </Group>
               </Link>
             )}
-          </div>
+          </Group>
         }
       />
     </RaceCard>