website refactor

apps/website/components/leaderboards/LeaderboardHeaderPanel.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';
 import { Surface } from '@/ui/Surface';
@@ -26,9 +25,9 @@ export function LeaderboardHeaderPanel({
   children,
 }: LeaderboardHeaderPanelProps) {
   return (
-    <Box mb={8}>
+    <Stack mb={8}>
       {onBack && (
-        <Box mb={6}>
+        <Stack mb={6}>
           <Button
             variant="secondary"
             onClick={onBack}
@@ -36,7 +35,7 @@ export function LeaderboardHeaderPanel({
           >
             {backLabel}
           </Button>
-        </Box>
+        </Stack>
       )}
 
       <Stack direction="row" align="center" justify="between" gap={4}>
@@ -53,17 +52,17 @@ export function LeaderboardHeaderPanel({
               <Icon icon={icon} size={7} color="text-primary-blue" />
             </Surface>
           )}
-          <Box>
+          <Stack>
             <Heading level={1}>{title}</Heading>
             {description && (
               <Text color="text-gray-400" block mt={1}>
                 {description}
               </Text>
             )}
-          </Box>
+          </Stack>
         </Stack>
         {children}
       </Stack>
-    </Box>
+    </Stack>
   );
 }