wip

apps/website/components/leagues/LeagueOwnershipTransfer.tsx

@@ -1,9 +1,16 @@
 import React, { useState } from 'react';
-import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
-import Button from '@/ui/Button';
+import { DriverSummaryPill } from '@/components/profile/DriverSummaryPill';
+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 { Select } from '@/ui/Select';
+import { Icon } from '@/ui/Icon';
 
 interface LeagueOwnershipTransferProps {
   settings: LeagueSettingsViewModel;
@@ -11,7 +18,7 @@ interface LeagueOwnershipTransferProps {
   onTransferOwnership: (newOwnerId: string) => Promise<void>;
 }
 
-export default function LeagueOwnershipTransfer({
+export function LeagueOwnershipTransfer({
   settings,
   currentDriverId,
   onTransferOwnership
@@ -39,10 +46,12 @@ export default function LeagueOwnershipTransfer({
   const ownerSummary = settings.owner;
 
   return (
-    <div className="space-y-4">
+    <Stack gap={4}>
       {/* League Owner */}
-      <div className="rounded-xl border border-charcoal-outline bg-gradient-to-br from-iron-gray/40 to-iron-gray/20 p-5">
-        <h3 className="text-sm font-semibold text-gray-400 mb-3">League Owner</h3>
+      <Surface variant="muted" rounded="xl" border padding={5}>
+        <Box mb={3}>
+          <Heading level={3}>League Owner</Heading>
+        </Box>
         {ownerSummary ? (
           <DriverSummaryPill
             driver={new DriverViewModel({
@@ -58,20 +67,22 @@ export default function LeagueOwnershipTransfer({
             rank={ownerSummary.rank}
           />
         ) : (
-          <p className="text-sm text-gray-500">Loading owner details...</p>
+          <Text size="sm" color="text-gray-500">Loading owner details...</Text>
         )}
-      </div>
+      </Surface>
 
       {/* Transfer Ownership - Owner Only */}
       {settings.league.ownerId === currentDriverId && settings.members.length > 0 && (
-        <div className="rounded-xl border border-charcoal-outline bg-gradient-to-br from-iron-gray/40 to-iron-gray/20 p-5">
-          <div className="flex items-center gap-2 mb-3">
-            <UserCog className="w-4 h-4 text-gray-400" />
-            <h3 className="text-sm font-semibold text-gray-400">Transfer Ownership</h3>
-          </div>
-          <p className="text-xs text-gray-500 mb-4">
-            Transfer league ownership to another active member. You will become an admin.
-          </p>
+        <Surface variant="muted" rounded="xl" border padding={5}>
+          <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}>
+            <Text size="xs" color="text-gray-500">
+              Transfer league ownership to another active member. You will become an admin.
+            </Text>
+          </Box>
 
           {!showTransferDialog ? (
             <Button
@@ -81,21 +92,20 @@ export default function LeagueOwnershipTransfer({
               Transfer Ownership
             </Button>
           ) : (
-            <div className="space-y-3">
-              <select
+            <Stack gap={3}>
+              <Select
                 value={selectedNewOwner}
                 onChange={(e) => setSelectedNewOwner(e.target.value)}
-                className="w-full rounded-lg border border-charcoal-outline bg-charcoal-card px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none"
-              >
-                <option value="">Select new owner...</option>
-                {settings.members.map((member) => (
-                  <option key={member.driver.id} value={member.driver.id}>
-                    {member.driver.name}
-                  </option>
-                ))}
-              </select>
+                options={[
+                  { value: '', label: 'Select new owner...' },
+                  ...settings.members.map((member) => ({
+                    value: member.driver.id,
+                    label: member.driver.name,
+                  })),
+                ]}
+              />
 
-              <div className="flex gap-2">
+              <Stack direction="row" gap={2}>
                 <Button
                   variant="primary"
                   onClick={handleTransferOwnership}
@@ -113,11 +123,11 @@ export default function LeagueOwnershipTransfer({
                 >
                   Cancel
                 </Button>
-              </div>
-            </div>
+              </Stack>
+            </Stack>
           )}
-        </div>
+        </Surface>
       )}
-    </div>
+    </Stack>
   );
-}
+}