website refactor

apps/website/components/leaderboards/LeaderboardHeader.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { ArrowLeft, LucideIcon } from 'lucide-react';
 import React from 'react';
@@ -24,9 +24,9 @@ export function LeaderboardHeader({
   children,
 }: LeaderboardHeaderProps) {
   return (
-    <Stack mb={8}>
+    <Group direction="column" align="stretch" gap={8}>
       {onBack && (
-        <Stack mb={6}>
+        <Group>
           <Button
             variant="secondary"
             onClick={onBack}
@@ -34,38 +34,32 @@ export function LeaderboardHeader({
           >
             {backLabel}
           </Button>
-        </Stack>
+        </Group>
       )}
 
-      <Stack direction="row" align="center" justify="between" gap={4}>
-        <Stack direction="row" align="center" gap={4}>
+      <Group justify="between" gap={4}>
+        <Group gap={4}>
           {icon && (
-            <Stack 
-              p={3} 
-              bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.15), rgba(25, 140, 255, 0.05))" 
-              border 
-              borderColor="border-primary-blue/20"
-              rounded="xl"
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
+            <Group 
+              gap={0}
+              justify="center"
             >
-              <Icon icon={icon} size={6} color="text-primary-blue" />
-            </Stack>
+              <Icon icon={icon} size={6} intent="primary" />
+            </Group>
           )}
-          <Stack>
-            <Heading level={1} weight="bold" letterSpacing="tight">{title}</Heading>
+          <Group direction="column" align="start" gap={1}>
+            <Heading level={1} weight="bold">{title}</Heading>
             {description && (
-              <Text color="text-gray-400" block mt={1} size="sm">
+              <Text variant="low" size="sm">
                 {description}
               </Text>
             )}
-          </Stack>
-        </Stack>
-        <Stack>
+          </Group>
+        </Group>
+        <Group>
           {children}
-        </Stack>
-      </Stack>
-    </Stack>
+        </Group>
+      </Group>
+    </Group>
   );
 }