website refactor

apps/website/components/drivers/DriverEntryRow.tsx

@@ -30,17 +30,17 @@ export function DriverEntryRow({
   return (
     <Stack
       onClick={onClick}
-      display="flex"
-      alignItems="center"
+      direction="row"
+      align="center"
       gap={3}
       p={3}
       rounded="xl"
       cursor="pointer"
       transition
-      bg={isCurrentUser ? 'bg-primary-blue/10' : 'transparent'}
+      bg={isCurrentUser ? 'rgba(25, 140, 255, 0.1)' : 'transparent'}
       border
-      borderColor={isCurrentUser ? 'border-primary-blue/30' : 'transparent'}
-      hoverBorderColor={isCurrentUser ? 'primary-blue/40' : 'charcoal-outline/20'}
+      borderColor={isCurrentUser ? 'rgba(25, 140, 255, 0.3)' : 'transparent'}
+      hoverBorderColor={isCurrentUser ? 'rgba(25, 140, 255, 0.4)' : 'var(--ui-color-border-low)'}
     >
       <Stack 
         display="flex" 
@@ -49,9 +49,10 @@ export function DriverEntryRow({
         w="8" 
         h="8" 
         rounded="lg" 
-        bg="bg-iron-gray" 
-        color="text-gray-500"
-        style={{ fontWeight: 'bold', fontSize: '0.875rem' }}
+        bg="var(--ui-color-bg-surface-muted)" 
+        color="var(--ui-color-text-low)"
+        weight="bold"
+        fontSize="0.875rem"
       >
         {index + 1}
       </Stack>
@@ -63,7 +64,7 @@ export function DriverEntryRow({
           rounded="full" 
           overflow="hidden" 
           border={isCurrentUser} 
-          borderColor={isCurrentUser ? 'border-primary-blue' : ''}
+          borderColor={isCurrentUser ? 'var(--ui-color-intent-primary)' : ''}
         >
           <Image 
             src={avatarUrl} 
@@ -81,11 +82,11 @@ export function DriverEntryRow({
           w="5" 
           h="5" 
           rounded="full" 
-          bg="bg-deep-graphite" 
+          bg="var(--ui-color-bg-base)" 
           display="flex" 
           alignItems="center" 
           justifyContent="center" 
-          style={{ fontSize: '0.625rem' }}
+          fontSize="0.625rem"
         >
           {CountryFlagDisplay.fromCountryCode(country).toString()}
         </Stack>
@@ -96,14 +97,14 @@ export function DriverEntryRow({
           <Text 
             weight="semibold" 
             size="sm" 
-            color={isCurrentUser ? 'text-primary-blue' : 'text-white'} 
+            variant={isCurrentUser ? 'primary' : 'high'} 
             truncate
           >
             {name}
           </Text>
           {isCurrentUser && <Badge variant="primary">You</Badge>}
         </Stack>
-        <Text size="xs" color="text-gray-500">{country}</Text>
+        <Text size="xs" variant="low">{country}</Text>
       </Stack>
 
       {rating != null && (