website refactor

apps/website/components/leaderboards/RankingRow.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Image } from '@/ui/Image';
 import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { RankMedal } from './RankMedal';
@@ -42,20 +41,20 @@ export function RankingRow({
     >
       <TableCell>
         <Stack direction="row" align="center" gap={4}>
-          <Box w="8" display="flex" justifyContent="center">
+          <Stack w="8" display="flex" justifyContent="center">
             <RankMedal rank={rank} size="md" />
-          </Box>
+          </Stack>
           {rankDelta !== undefined && (
-            <Box w="10">
+            <Stack w="10">
               <DeltaChip value={rankDelta} type="rank" />
-            </Box>
+            </Stack>
           )}
         </Stack>
       </TableCell>
 
       <TableCell>
-        <Box display="flex" alignItems="center" gap={3}>
-          <Box 
+        <Stack display="flex" alignItems="center" gap={3}>
+          <Stack 
             position="relative" 
             w="10" 
             h="10" 
@@ -75,8 +74,8 @@ export function RankingRow({
               fullHeight
               objectFit="cover" 
             />
-          </Box>
-          <Box minWidth="0">
+          </Stack>
+          <Stack minWidth="0">
             <Text 
               weight="semibold" 
               color="text-white" 
@@ -89,11 +88,11 @@ export function RankingRow({
             </Text>
             <Stack direction="row" align="center" gap={2} mt={0.5}>
               <Text size="xs" color="text-gray-500">{nationality}</Text>
-              <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
+              <Stack w="1" h="1" rounded="full" bg="bg-gray-700" />
               <Text size="xs" color="text-gray-500">{skillLevel}</Text>
             </Stack>
-          </Box>
-        </Box>
+          </Stack>
+        </Stack>
       </TableCell>
 
       <TableCell textAlign="center">