website refactor

apps/website/components/leagues/LeagueDropSection.tsx

@@ -4,6 +4,10 @@ import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { InfoFlyout } from '@/ui/InfoFlyout';
 import { Stepper } from '@/ui/Stepper';
 import { Button } from '@/ui/Button';
@@ -91,14 +95,22 @@ export function LeagueDropSection({
   const needsN = dropPolicy.strategy !== 'none';
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <Stack gap={4}>
       {/* Section header */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-        <div style={{ display: 'flex', width: '2.5rem', height: '2.5rem', alignItems: 'center', justifyContent: 'center', borderRadius: '0.75rem', backgroundColor: 'rgba(25, 140, 255, 0.1)' }}>
+      <Group gap={3}>
+        <Surface 
+          display="flex" 
+          width="2.5rem" 
+          height="2.5rem" 
+          alignItems="center" 
+          justifyContent="center" 
+          rounded="md" 
+          bg="rgba(25, 140, 255, 0.1)"
+        >
           <Icon icon={TrendingDown} size={5} intent="primary" />
-        </div>
-        <div style={{ flex: 1 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        </Surface>
+        <Stack flex={1} gap={0}>
+          <Group gap={2}>
             <Heading level={3}>Drop Rules</Heading>
             <IconButton 
               ref={dropInfoRef} 
@@ -108,10 +120,10 @@ export function LeagueDropSection({
               onClick={() => setShowDropFlyout(true)} 
               title="Help"
             />
-          </div>
+          </Group>
           <Text size="xs" variant="low">Protect from bad races</Text>
-        </div>
-      </div>
+        </Stack>
+      </Group>
 
       <InfoFlyout
         isOpen={showDropFlyout}
@@ -126,7 +138,7 @@ export function LeagueDropSection({
       </InfoFlyout>
 
       {/* Strategy buttons + N stepper inline */}
-      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '0.5rem' }}>
+      <Group gap={2} wrap>
         {DROP_OPTIONS.map((option) => {
           const isSelected = dropPolicy.strategy === option.value;
           return (
@@ -137,26 +149,26 @@ export function LeagueDropSection({
               onClick={() => handleStrategyChange(option.value)}
               disabled={disabled}
             >
-              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+              <Group gap={2}>
                 {isSelected && <Icon icon={Check} size={3} />}
-                <span>{option.emoji}</span>
-                <span>{option.label}</span>
-              </div>
+                <Text as="span">{option.emoji}</Text>
+                <Text as="span">{option.label}</Text>
+              </Group>
             </Button>
           );
         })}
 
         {needsN && (
-          <div style={{ marginLeft: '0.5rem' }}>
+          <Box marginLeft={2}>
             <Stepper
               value={dropPolicy.n ?? 1}
               onChange={handleNChange}
               label="N ="
               disabled={disabled}
             />
-          </div>
+          </Box>
         )}
-      </div>
+      </Group>
 
       {/* Explanation text */}
       <Text size="xs" variant="low" block>
@@ -164,6 +176,6 @@ export function LeagueDropSection({
         {dropPolicy.strategy === 'bestNResults' && `Only your best ${dropPolicy.n ?? 1} results will count.`}
         {dropPolicy.strategy === 'dropWorstN' && `Your worst ${dropPolicy.n ?? 1} results will be excluded.`}
       </Text>
-    </div>
+    </Stack>
   );
 }