website refactor

apps/website/components/leagues/LeagueMembershipFeesSection.tsx

@@ -3,6 +3,11 @@
 import { useState } from 'react';
 import { Button } from '@/ui/Button';
 import { Input } from '@/ui/Input';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
 import { DollarSign, Calendar, User, TrendingUp } from 'lucide-react';
 
 type FeeType = 'season' | 'monthly' | 'per_race';
@@ -20,8 +25,6 @@ interface LeagueMembershipFeesSectionProps {
 }
 
 export function LeagueMembershipFeesSection({ 
-  leagueId, 
-  seasonId,
   readOnly = false 
 }: LeagueMembershipFeesSectionProps) {
   const [feeConfig, setFeeConfig] = useState<MembershipFeeConfig>({
@@ -71,15 +74,15 @@ export function LeagueMembershipFeesSection({
   };
 
   return (
-    <div className="space-y-6">
+    <Stack gap={6}>
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold text-white">Membership Fees</h3>
-          <p className="text-sm text-gray-400 mt-1">
+      <Box display="flex" alignItems="center" justifyContent="between">
+        <Box>
+          <Heading level={3} fontSize="lg" weight="semibold" color="text-white">Membership Fees</Heading>
+          <Text size="sm" color="text-gray-400" mt={1} block>
             Charge drivers for league participation
-          </p>
-        </div>
+          </Text>
+        </Box>
         {!feeConfig.enabled && !readOnly && (
           <Button
             variant="primary"
@@ -88,152 +91,153 @@ export function LeagueMembershipFeesSection({
             Enable Fees
           </Button>
         )}
-      </div>
+      </Box>
 
       {!feeConfig.enabled ? (
-        <div className="text-center py-12 rounded-lg border border-charcoal-outline bg-iron-gray/30">
-          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
-            <DollarSign className="w-8 h-8 text-gray-500" />
-          </div>
-          <h4 className="text-lg font-medium text-white mb-2">No Membership Fees</h4>
-          <p className="text-sm text-gray-400 max-w-md mx-auto">
+        <Box textAlign="center" py={12} rounded="lg" border borderColor="border-charcoal-outline" bg="bg-iron-gray/30">
+          <Box w="16" h="16" mx="auto" mb={4} rounded="full" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
+            <Icon icon={DollarSign} size={8} color="text-gray-500" />
+          </Box>
+          <Heading level={4} fontSize="lg" weight="medium" color="text-white" mb={2}>No Membership Fees</Heading>
+          <Text size="sm" color="text-gray-400" maxWidth="md" mx="auto" block>
             This league is free to join. Enable membership fees to charge drivers for participation.
-          </p>
-        </div>
+          </Text>
+        </Box>
       ) : (
         <>
           {/* Fee Type Selection */}
-          <div className="space-y-3">
-            <label className="block text-sm font-medium text-gray-300">
+          <Stack gap={3}>
+            <Text as="label" size="sm" weight="medium" color="text-gray-300" block>
               Fee Type
-            </label>
-            <div className="grid grid-cols-3 gap-3">
+            </Text>
+            <Box display="grid" gridCols={3} gap={3}>
               {(['season', 'monthly', 'per_race'] as FeeType[]).map((type) => {
-                const Icon = type === 'season' ? Calendar : type === 'monthly' ? TrendingUp : User;
+                const FeeIcon = type === 'season' ? Calendar : type === 'monthly' ? TrendingUp : User;
                 const isSelected = feeConfig.type === type;
                 
                 return (
-                  <button
+                  <Box
                     key={type}
+                    as="button"
                     type="button"
                     onClick={() => handleTypeChange(type)}
                     disabled={readOnly}
-                    className={`p-4 rounded-lg border transition-all ${
-                      isSelected
-                        ? 'border-primary-blue bg-primary-blue/10'
-                        : 'border-charcoal-outline bg-iron-gray/30 hover:border-primary-blue/50'
-                    }`}
+                    p={4}
+                    rounded="lg"
+                    border
+                    transition
+                    borderColor={isSelected ? 'border-primary-blue' : 'border-charcoal-outline'}
+                    bg={isSelected ? 'bg-primary-blue/10' : 'bg-iron-gray/30'}
+                    hoverBorderColor={!isSelected ? 'border-primary-blue/50' : undefined}
                   >
-                    <Icon className={`w-5 h-5 mx-auto mb-2 ${
-                      isSelected ? 'text-primary-blue' : 'text-gray-400'
-                    }`} />
-                    <div className="text-sm font-medium text-white mb-1">
+                    <Icon icon={FeeIcon} size={5} mx="auto" mb={2} color={isSelected ? 'text-primary-blue' : 'text-gray-400'} />
+                    <Text size="sm" weight="medium" color="text-white" block mb={1}>
                       {typeLabels[type]}
-                    </div>
-                    <div className="text-xs text-gray-500">
+                    </Text>
+                    <Text size="xs" color="text-gray-500" block>
                       {typeDescriptions[type]}
-                    </div>
-                  </button>
+                    </Text>
+                  </Box>
                 );
               })}
-            </div>
-          </div>
+            </Box>
+          </Stack>
 
           {/* Amount Configuration */}
-          <div className="space-y-3">
-            <label className="block text-sm font-medium text-gray-300">
+          <Stack gap={3}>
+            <Text as="label" size="sm" weight="medium" color="text-gray-300" block>
               Amount
-            </label>
+            </Text>
             
             {editing ? (
-              <div className="flex items-center gap-3">
-                <div className="flex-1">
+              <Box display="flex" alignItems="center" gap={3}>
+                <Box flexGrow={1}>
                   <Input
                     type="number"
                     value={tempAmount}
-                    onChange={(e) => setTempAmount(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTempAmount(e.target.value)}
                     placeholder="0.00"
                     min="0"
                     step="0.01"
                   />
-                </div>
+                </Box>
                 <Button
                   variant="primary"
                   onClick={handleSave}
-                  className="px-4"
+                  px={4}
                 >
                   Save
                 </Button>
                 <Button
                   variant="secondary"
                   onClick={handleCancel}
-                  className="px-4"
+                  px={4}
                 >
                   Cancel
                 </Button>
-              </div>
+              </Box>
             ) : (
-              <div className="flex items-center justify-between p-4 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
-                <div>
-                  <div className="text-2xl font-bold text-white">
+              <Box display="flex" alignItems="center" justifyContent="between" p={4} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline">
+                <Box>
+                  <Text size="2xl" weight="bold" color="text-white" block>
                     ${feeConfig.amount.toFixed(2)}
-                  </div>
-                  <div className="text-xs text-gray-500 mt-1">
+                  </Text>
+                  <Text size="xs" color="text-gray-500" mt={1} block>
                     {typeLabels[feeConfig.type]}
-                  </div>
-                </div>
+                  </Text>
+                </Box>
                 {!readOnly && (
                   <Button
                     variant="secondary"
                     onClick={() => setEditing(true)}
-                    className="px-4"
+                    px={4}
                   >
                     Edit Amount
                   </Button>
                 )}
-              </div>
+              </Box>
             )}
-          </div>
+          </Stack>
 
           {/* Revenue Breakdown */}
           {feeConfig.amount > 0 && (
-            <div className="grid grid-cols-2 gap-4">
-              <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
-                <div className="text-xs text-gray-400 mb-1">Platform Fee (10%)</div>
-                <div className="text-lg font-bold text-warning-amber">
+            <Box display="grid" gridCols={2} gap={4}>
+              <Box rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" p={4}>
+                <Text size="xs" color="text-gray-400" block mb={1}>Platform Fee (10%)</Text>
+                <Text size="lg" weight="bold" color="text-warning-amber" block>
                   -${platformFee.toFixed(2)}
-                </div>
-              </div>
-              <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
-                <div className="text-xs text-gray-400 mb-1">Net per Driver</div>
-                <div className="text-lg font-bold text-performance-green">
+                </Text>
+              </Box>
+              <Box rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" p={4}>
+                <Text size="xs" color="text-gray-400" block mb={1}>Net per Driver</Text>
+                <Text size="lg" weight="bold" color="text-performance-green" block>
                   ${netAmount.toFixed(2)}
-                </div>
-              </div>
-            </div>
+                </Text>
+              </Box>
+            </Box>
           )}
 
           {/* Disable Fees */}
           {!readOnly && (
-            <div className="pt-4 border-t border-charcoal-outline">
+            <Box pt={4} borderTop borderColor="border-charcoal-outline">
               <Button
                 variant="danger"
                 onClick={() => setFeeConfig({ type: 'season', amount: 0, enabled: false })}
               >
                 Disable Membership Fees
               </Button>
-            </div>
+            </Box>
           )}
         </>
       )}
 
       {/* Alpha Notice */}
-      <div className="rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
-        <p className="text-xs text-gray-400">
-          <strong className="text-warning-amber">Alpha Note:</strong> Membership fee collection is demonstration-only.
+      <Box rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
+        <Text size="xs" color="text-gray-400" block>
+          <Text weight="bold" color="text-warning-amber">Alpha Note:</Text> Membership fee collection is demonstration-only.
           In production, fees are collected via payment gateway and deposited to league wallet (minus platform fee).
-        </p>
-      </div>
-    </div>
+        </Text>
+      </Box>
+    </Stack>
   );
 }