website refactor

apps/website/components/sponsors/PendingSponsorshipRequests.tsx

@@ -2,10 +2,9 @@
 
 import React, { useState } from 'react';
 import { Building } from 'lucide-react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
 import { Badge } from '@/ui/Badge';
 import { SponsorshipRequestItem } from '@/components/sponsors/SponsorshipRequestItem';
@@ -68,34 +67,34 @@ export function PendingSponsorshipRequests({
 
   if (isLoading) {
     return (
-      <Box textAlign="center" py={8}>
+      <Stack textAlign="center" py={8}>
         <Text color="text-gray-400" animate="pulse">Loading sponsorship requests...</Text>
-      </Box>
+      </Stack>
     );
   }
 
   if (requests.length === 0) {
     return (
-      <Box textAlign="center" py={8}>
-        <Box w="12" h="12" mx="auto" mb={3} rounded="full" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
+      <Stack textAlign="center" py={8}>
+        <Stack w="12" h="12" mx="auto" mb={3} rounded="full" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
           <Icon icon={Building} size={6} color="rgb(115, 115, 115)" />
-        </Box>
+        </Stack>
         <Text color="text-gray-400" size="sm" block>No pending sponsorship requests</Text>
         <Text color="text-gray-500" size="xs" mt={1} block>
           When sponsors apply to sponsor this {entityType}, their requests will appear here. Sponsorships are attached to seasons, so you can change partners from season to season.
         </Text>
-      </Box>
+      </Stack>
     );
   }
 
   return (
     <Stack gap={4}>
-      <Box display="flex" alignItems="center" justifyContent="between">
+      <Stack display="flex" alignItems="center" justifyContent="between">
         <Heading level={3}>Sponsorship Requests</Heading>
         <Badge variant="primary">
           {requests.length} pending
         </Badge>
-      </Box>
+      </Stack>
 
       <Stack gap={3}>
         {requests.map((request) => (
@@ -123,12 +122,12 @@ export function PendingSponsorshipRequests({
         ))}
       </Stack>
 
-      <Box mt={4}>
+      <Stack mt={4}>
         <Text size="xs" color="text-gray-500" block>
           <Text weight="bold" color="text-gray-400">Note:</Text> Accepting a request will activate the sponsorship.
           The sponsor will be charged per season and you&apos;ll receive the payment minus 10% platform fee.
         </Text>
-      </Box>
+      </Stack>
     </Stack>
   );
 }