website refactor

apps/website/components/leagues/JoinRequestItem.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
 
 interface JoinRequestItemProps {
@@ -22,7 +21,7 @@ export function JoinRequestItem({
   isRejecting,
 }: JoinRequestItemProps) {
   return (
-    <Box
+    <Stack
       display="flex"
       alignItems="center"
       justifyContent="between"
@@ -33,7 +32,7 @@ export function JoinRequestItem({
       borderColor="border-charcoal-outline"
     >
       <Stack direction="row" align="center" gap={4} flexGrow={1}>
-        <Box 
+        <Stack 
           width="12" 
           height="12" 
           rounded="full" 
@@ -45,13 +44,13 @@ export function JoinRequestItem({
           style={{ fontSize: '1.125rem' }}
         >
           {driverId.charAt(0)}
-        </Box>
-        <Box flexGrow={1}>
+        </Stack>
+        <Stack flexGrow={1}>
           <Text color="text-white" weight="medium" block>{driverId}</Text>
           <Text size="sm" color="text-gray-400" block>
             Requested {new Date(requestedAt).toLocaleDateString()}
           </Text>
-        </Box>
+        </Stack>
       </Stack>
       <Stack direction="row" gap={2}>
         <Button
@@ -71,6 +70,6 @@ export function JoinRequestItem({
           {isRejecting ? 'Rejecting...' : 'Reject'}
         </Button>
       </Stack>
-    </Box>
+    </Stack>
   );
 }