website refactor

apps/website/components/races/FileProtestModal.tsx

@@ -3,9 +3,8 @@
 import { useState } from 'react';
 import { Modal } from '@/ui/Modal';
 import { Button } from '@/ui/Button';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { InfoBox } from '@/ui/InfoBox';
 import { Input } from '@/ui/Input';
@@ -112,10 +111,10 @@ export function FileProtestModal({
         onOpenChange={handleClose}
         title="Protest Filed Successfully"
       >
-        <Box display="flex" flexDirection="col" alignItems="center" py={6} textAlign="center">
-          <Box p={4} bg="bg-performance-green/20" rounded="full" mb={4}>
+        <Stack display="flex" flexDirection="col" alignItems="center" py={6} textAlign="center">
+          <Stack p={4} bg="bg-performance-green/20" rounded="full" mb={4}>
             <Icon icon={CheckCircle2} size={8} color="rgb(16, 185, 129)" />
-          </Box>
+          </Stack>
           <Text color="text-white" weight="medium" mb={2} block>Your protest has been submitted</Text>
           <Text size="sm" color="text-gray-400" mb={6} block>
             The stewards will review your protest and make a decision.
@@ -124,7 +123,7 @@ export function FileProtestModal({
           <Button variant="primary" onClick={handleClose}>
             Close
           </Button>
-        </Box>
+        </Stack>
       </Modal>
     );
   }
@@ -147,7 +146,7 @@ export function FileProtestModal({
         )}
 
         {/* Driver Selection */}
-        <Box>
+        <Stack>
           <Select
             label="Driver involved *"
             options={[
@@ -158,10 +157,10 @@ export function FileProtestModal({
             onChange={(e) => setAccusedDriverId(e.target.value)}
             disabled={fileProtestMutation.isPending}
           />
-        </Box>
+        </Stack>
 
         {/* Lap and Time */}
-        <Box display="grid" gridCols={2} gap={4}>
+        <Stack display="grid" gridCols={2} gap={4}>
           <Input
             label="Lap number *"
             type="number"
@@ -180,7 +179,7 @@ export function FileProtestModal({
             disabled={fileProtestMutation.isPending}
             placeholder="Optional"
           />
-        </Box>
+        </Stack>
 
         {/* Incident Description */}
         <TextArea
@@ -203,7 +202,7 @@ export function FileProtestModal({
         />
 
         {/* Video Proof */}
-        <Box>
+        <Stack>
           <Input
             label="Video proof URL"
             type="url"
@@ -215,19 +214,19 @@ export function FileProtestModal({
           <Text size="xs" color="text-gray-500" mt={1.5} block>
             Providing video evidence significantly helps the stewards review your protest.
           </Text>
-        </Box>
+        </Stack>
 
         {/* Info Box */}
-        <Box p={3} bg="bg-iron-gray" rounded="lg" border borderColor="border-charcoal-outline">
+        <Stack p={3} bg="bg-iron-gray" rounded="lg" border borderColor="border-charcoal-outline">
           <Text size="xs" color="text-gray-400" block>
             <Text as="strong" color="text-gray-300">Note:</Text> Filing a protest does not guarantee action.
             The stewards will review the incident and may apply penalties ranging from time penalties
             to grid penalties for future races, depending on the severity.
           </Text>
-        </Box>
+        </Stack>
 
         {/* Actions */}
-        <Box display="flex" gap={3} pt={2}>
+        <Stack display="flex" gap={3} pt={2}>
           <Button
             variant="secondary"
             onClick={handleClose}
@@ -244,7 +243,7 @@ export function FileProtestModal({
           >
             {fileProtestMutation.isPending ? 'Submitting...' : 'Submit Protest'}
           </Button>
-        </Box>
+        </Stack>
       </Stack>
     </Modal>
   );