website refactor

apps/website/templates/LeaguesTemplate.tsx

@@ -8,6 +8,8 @@ import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
 import { Group } from '@/ui/Group';
 import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { Section } from '@/ui/Section';
@@ -71,7 +73,7 @@ export function LeaguesTemplate({
   onClearFilters,
 }: LeaguesTemplateProps) {
   return (
-    <Section variant="default" padding="lg">
+    <Section variant="default" padding="md">
       {/* Header Section */}
       <PageHeader
         icon={Trophy}
@@ -82,15 +84,15 @@ export function LeaguesTemplate({
             onClick={onCreateLeague}
             variant="primary"
             size="lg"
-            icon={<Plus size={16} />}
+            icon={<Icon icon={Plus} size={4} />}
           >
             Create League
           </Button>
         }
       />
 
-      {/* Stats Overview */}
-      <Container size="full" padding="none" py={8}>
+      <Stack gap={12}>
+        {/* Stats Overview */}
         <FeatureGrid columns={{ base: 1, md: 3 }} gap={4}>
           <MetricCard 
             label="Active Leagues" 
@@ -111,38 +113,35 @@ export function LeaguesTemplate({
             intent="success"
           />
         </FeatureGrid>
-      </Container>
 
-      {/* Control Bar */}
-      <ControlBar
-        leftContent={
-          <Group gap={4} align="center">
-            <Icon icon={Filter} size={4} intent="low" />
-            <SegmentedControl
-              options={categories.map(c => ({
-                id: c.id,
-                label: c.label,
-                icon: <Icon icon={c.icon} size={3} />
-              }))}
-              activeId={activeCategory}
-              onChange={(id) => onCategoryChange(id as CategoryId)}
-            />
-          </Group>
-        }
-      >
-        <Input
-          type="text"
-          placeholder="Search infrastructure..."
-          value={searchQuery}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
-          icon={<Search size={16} />}
-          size="sm"
-          width="300px"
-        />
-      </ControlBar>
+        {/* Control Bar */}
+        <ControlBar
+          leftContent={
+            <Group gap={4} align="center">
+              <Icon icon={Filter} size={4} intent="low" />
+              <SegmentedControl
+                options={categories.map(c => ({
+                  id: c.id,
+                  label: c.label,
+                  icon: <Icon icon={c.icon} size={3} />
+                }))}
+                activeId={activeCategory}
+                onChange={(id) => onCategoryChange(id as CategoryId)}
+              />
+            </Group>
+          }
+        >
+          <Input
+            type="text"
+            placeholder="Search infrastructure..."
+            value={searchQuery}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+            icon={<Icon icon={Search} size={4} />}
+            size="sm"
+          />
+        </ControlBar>
 
-      {/* Results */}
-      <Container size="full" padding="none" py={6}>
+        {/* Results */}
         {filteredLeagues.length > 0 ? (
           <FeatureGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6}>
             {filteredLeagues.map((league) => (
@@ -154,23 +153,23 @@ export function LeaguesTemplate({
             ))}
           </FeatureGrid>
         ) : (
-          <Section variant="dark" padding="lg">
-            <Group direction="col" align="center" justify="center" gap={4}>
+          <Surface variant="dark" padding={12} rounded="xl" border>
+            <Stack align="center" justify="center" gap={6}>
               <Icon icon={Search} size={12} intent="low" />
-              <Group direction="col" align="center" gap={1}>
+              <Stack align="center" gap={2}>
                 <Text size="lg" weight="bold">No results found</Text>
                 <Text variant="low" size="sm">Adjust filters to find matching infrastructure.</Text>
-              </Group>
+              </Stack>
               <Button 
                 variant="secondary"
                 onClick={onClearFilters}
               >
                 Reset Filters
               </Button>
-            </Group>
-          </Section>
+            </Stack>
+          </Surface>
         )}
-      </Container>
+      </Stack>
     </Section>
   );
 }