website refactor

apps/website/components/leagues/JoinLeagueButton.tsx

@@ -1,10 +1,13 @@
 'use client';
 
-import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
+import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
 import { getMembership } from '@/lib/leagueMembership';
 import { useState } from 'react';
-import { useLeagueMembershipMutation } from "@/lib/hooks/league/useLeagueMembershipMutation";
-import Button from '../ui/Button';
+import { useLeagueMembershipMutation } from "@/hooks/league/useLeagueMembershipMutation";
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Modal } from '@/ui/Modal';
 
 interface JoinLeagueButtonProps {
   leagueId: string;
@@ -12,7 +15,7 @@ interface JoinLeagueButtonProps {
   onMembershipChange?: () => void;
 }
 
-export default function JoinLeagueButton({
+export function JoinLeagueButton({
   leagueId,
   isInviteOnly = false,
   onMembershipChange,
@@ -93,7 +96,7 @@ export default function JoinLeagueButton({
   const isDisabled = membership?.role === 'owner' || joinLeague.isPending || leaveLeague.isPending;
 
   return (
-    <>
+    <Box>
       <Button
         variant={getButtonVariant()}
         onClick={() => {
@@ -104,58 +107,41 @@ export default function JoinLeagueButton({
           }
         }}
         disabled={isDisabled}
-        className="w-full"
+        fullWidth
       >
         {(joinLeague.isPending || leaveLeague.isPending) ? 'Processing...' : getButtonText()}
       </Button>
 
       {error && (
-        <p className="mt-2 text-sm text-red-400">{error}</p>
+        <Text size="sm" color="text-red-400" mt={2} block>{error}</Text>
       )}
 
       {/* Confirmation Dialog */}
-      {showConfirmDialog && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-iron-gray border border-charcoal-outline rounded-lg max-w-md w-full p-6">
-            <h3 className="text-xl font-semibold text-white mb-4">
-              {dialogAction === 'leave' ? 'Leave League' : dialogAction === 'request' ? 'Request to Join' : 'Join League'}
-            </h3>
-            
-            <p className="text-gray-400 mb-6">
-              {dialogAction === 'leave' 
-                ? 'Are you sure you want to leave this league? You can rejoin later.'
-                : dialogAction === 'request'
-                ? 'Your join request will be sent to the league admins for approval.'
-                : 'Are you sure you want to join this league?'}
-            </p>
+      <Modal
+        isOpen={showConfirmDialog}
+        onOpenChange={setShowConfirmDialog}
+        title={dialogAction === 'leave' ? 'Leave League' : dialogAction === 'request' ? 'Request to Join' : 'Join League'}
+        primaryActionLabel={(joinLeague.isPending || leaveLeague.isPending) ? 'Processing...' : 'Confirm'}
+        onPrimaryAction={dialogAction === 'leave' ? handleLeave : handleJoin}
+        secondaryActionLabel="Cancel"
+        onSecondaryAction={closeDialog}
+      >
+        <Box>
+          <Text color="text-gray-400" block mb={6}>
+            {dialogAction === 'leave' 
+              ? 'Are you sure you want to leave this league? You can rejoin later.'
+              : dialogAction === 'request'
+              ? 'Your join request will be sent to the league admins for approval.'
+              : 'Are you sure you want to join this league?'}
+          </Text>
 
-            {error && (
-              <div className="mb-4 p-3 rounded bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
-                {error}
-              </div>
-            )}
-
-            <div className="flex gap-3">
-              <Button
-                variant={dialogAction === 'leave' ? 'danger' : 'primary'}
-                onClick={dialogAction === 'leave' ? handleLeave : handleJoin}
-                disabled={joinLeague.isPending || leaveLeague.isPending}
-                className="flex-1"
-              >
-                {(joinLeague.isPending || leaveLeague.isPending) ? 'Processing...' : 'Confirm'}
-              </Button>
-              <Button
-                variant="secondary"
-                onClick={closeDialog}
-                disabled={joinLeague.isPending || leaveLeague.isPending}
-                className="flex-1"
-              >
-                Cancel
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
+          {error && (
+            <Box mb={4} p={3} rounded="md" bg="bg-red-500/10" border borderColor="border-red-500/30">
+              <Text size="sm" color="text-red-400">{error}</Text>
+            </Box>
+          )}
+        </Box>
+      </Modal>
+    </Box>
   );
 }