website refactor

apps/website/components/leaderboards/SeasonSelector.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { Icon } from '@/ui/Icon';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
@@ -23,19 +23,18 @@ export function SeasonSelector({ seasons, selectedSeasonId, onSeasonChange }: Se
   }));
 
   return (
-    <Box display="flex" alignItems="center" gap={3}>
-      <Box display="flex" alignItems="center" gap={2} color="text-gray-500">
-        <Icon icon={Calendar} size={4} />
-        <Text size="xs" weight="bold" uppercase letterSpacing="wider">Season</Text>
-      </Box>
-      <Box width="48">
+    <Group gap={3}>
+      <Group gap={2}>
+        <Icon icon={Calendar} size={4} intent="low" />
+        <Text size="xs" weight="bold" uppercase letterSpacing="wider" variant="low">Season</Text>
+      </Group>
+      <Group>
         <Select
           options={options}
           value={selectedSeasonId}
           onChange={(e) => onSeasonChange(e.target.value)}
-          fullWidth={true}
         />
-      </Box>
-    </Box>
+      </Group>
+    </Group>
   );
 }