website refactor

apps/website/components/leaderboards/LeaderboardHeader.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { ArrowLeft, LucideIcon } from 'lucide-react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 
@@ -25,9 +24,9 @@ export function LeaderboardHeader({
   children,
 }: LeaderboardHeaderProps) {
   return (
-    <Box mb={8}>
+    <Stack mb={8}>
       {onBack && (
-        <Box mb={6}>
+        <Stack mb={6}>
           <Button
             variant="secondary"
             onClick={onBack}
@@ -35,13 +34,13 @@ export function LeaderboardHeader({
           >
             {backLabel}
           </Button>
-        </Box>
+        </Stack>
       )}
 
       <Stack direction="row" align="center" justify="between" gap={4}>
         <Stack direction="row" align="center" gap={4}>
           {icon && (
-            <Box 
+            <Stack 
               p={3} 
               bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.15), rgba(25, 140, 255, 0.05))" 
               border 
@@ -52,21 +51,21 @@ export function LeaderboardHeader({
               justifyContent="center"
             >
               <Icon icon={icon} size={6} color="text-primary-blue" />
-            </Box>
+            </Stack>
           )}
-          <Box>
+          <Stack>
             <Heading level={1} weight="bold" letterSpacing="tight">{title}</Heading>
             {description && (
               <Text color="text-gray-400" block mt={1} size="sm">
                 {description}
               </Text>
             )}
-          </Box>
+          </Stack>
         </Stack>
-        <Box>
+        <Stack>
           {children}
-        </Box>
+        </Stack>
       </Stack>
-    </Box>
+    </Stack>
   );
 }