website refactor

apps/website/components/leagues/LeagueOwnershipTransfer.tsx

@@ -4,11 +4,10 @@ import { Button } from '@/ui/Button';
 import { UserCog } from 'lucide-react';
 import { LeagueSettingsViewModel } from '@/lib/view-models/LeagueSettingsViewModel';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
-import { Surface } from '@/ui/Surface';
+import { Card } from '@/ui/Card';
 import { Select } from '@/ui/Select';
 import { Icon } from '@/ui/Icon';
 
@@ -48,10 +47,10 @@ export function LeagueOwnershipTransfer({
   return (
     <Stack gap={4}>
       {/* League Owner */}
-      <Surface variant="muted" rounded="xl" border padding={5}>
-        <Box mb={3}>
+      <Card variant="outline" p={5} rounded="xl" className="bg-panel-gray/40">
+        <Stack mb={3}>
           <Heading level={3}>League Owner</Heading>
-        </Box>
+        </Stack>
         {ownerSummary ? (
           <DriverSummaryPill
             driver={new DriverViewModel({
@@ -69,20 +68,20 @@ export function LeagueOwnershipTransfer({
         ) : (
           <Text size="sm" color="text-gray-500">Loading owner details...</Text>
         )}
-      </Surface>
+      </Card>
 
       {/* Transfer Ownership - Owner Only */}
       {settings.league.ownerId === currentDriverId && settings.members.length > 0 && (
-        <Surface variant="muted" rounded="xl" border padding={5}>
+        <Card variant="outline" p={5} rounded="xl" className="bg-panel-gray/40">
           <Stack direction="row" align="center" gap={2} mb={3}>
             <Icon icon={UserCog} size={4} color="text-gray-400" />
             <Heading level={3}>Transfer Ownership</Heading>
           </Stack>
-          <Box mb={4}>
+          <Stack mb={4}>
             <Text size="xs" color="text-gray-500">
               Transfer league ownership to another active member. You will become an admin.
             </Text>
-          </Box>
+          </Stack>
 
           {!showTransferDialog ? (
             <Button
@@ -126,7 +125,7 @@ export function LeagueOwnershipTransfer({
               </Stack>
             </Stack>
           )}
-        </Surface>
+        </Card>
       )}
     </Stack>
   );