website refactor

apps/website/components/leaderboards/RankingListItem.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';
 
 interface RankingListItemProps {
   name: string;
@@ -21,7 +20,7 @@ export function RankingListItem({
   rating,
 }: RankingListItemProps) {
   return (
-    <Box
+    <Stack
       display="flex"
       alignItems="center"
       justifyContent="between"
@@ -39,32 +38,32 @@ export function RankingListItem({
         </Text>
       </Stack>
 
-      <Box display="flex" alignItems="center" gap={6} textAlign="right">
-        <Box>
+      <Stack display="flex" alignItems="center" gap={6} textAlign="right">
+        <Stack>
           <Text color="text-primary-blue" size="base" weight="semibold" block>
             #{rank}
           </Text>
           <Text color="text-gray-500" size="xs" block>Position</Text>
-        </Box>
-        <Box>
+        </Stack>
+        <Stack>
           <Text color="text-white" size="sm" weight="semibold" block>
             {totalDrivers}
           </Text>
           <Text color="text-gray-500" size="xs" block>Drivers</Text>
-        </Box>
-        <Box>
+        </Stack>
+        <Stack>
           <Text color="text-green-400" size="sm" weight="semibold" block>
             {percentile.toFixed(1)}%
           </Text>
           <Text color="text-gray-500" size="xs" block>Percentile</Text>
-        </Box>
-        <Box>
+        </Stack>
+        <Stack>
           <Text color="text-warning-amber" size="sm" weight="semibold" block>
             {rating}
           </Text>
           <Text color="text-gray-500" size="xs" block>Rating</Text>
-        </Box>
-      </Box>
-    </Box>
+        </Stack>
+      </Stack>
+    </Stack>
   );
 }