website refactor

apps/website/components/races/PenaltyRow.tsx

@@ -1,7 +1,6 @@
 
 
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
@@ -26,7 +25,7 @@ export function PenaltyRow({
   return (
     <Surface variant="dark" rounded="lg" p={3} border borderColor="border-charcoal-outline/50">
       <Stack direction="row" align="center" gap={3}>
-        <Box 
+        <Stack 
           display="flex" 
           h="10" 
           w="10" 
@@ -36,8 +35,8 @@ export function PenaltyRow({
           bg="bg-red-600/20"
         >
           <Text color="text-red-500" weight="bold">!</Text>
-        </Box>
-        <Box flexGrow={1}>
+        </Stack>
+        <Stack flexGrow={1}>
           <Stack direction="row" align="center" gap={2} mb={1}>
             <Text weight="medium" color="text-white">{driverName}</Text>
             <Badge variant="danger">
@@ -50,12 +49,12 @@ export function PenaltyRow({
               {notes}
             </Text>
           )}
-        </Box>
-        <Box textAlign="right">
+        </Stack>
+        <Stack textAlign="right">
           <Text size="2xl" weight="bold" color="text-red-500">
             {value} {valueLabel}
           </Text>
-        </Box>
+        </Stack>
       </Stack>
     </Surface>
   );