website refactor

apps/website/components/sponsors/SponsorActivityPanel.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Box, BoxProps } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { LucideIcon, Clock } from 'lucide-react';
+import { Stack } from '@/ui/Stack';
 
 export interface Activity {
   id: string;
@@ -27,52 +27,50 @@ interface SponsorActivityPanelProps {
  */
 export function SponsorActivityPanel({ activities }: SponsorActivityPanelProps) {
   return (
-    <Box>
+    <Stack>
       <Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
         Recent Activity
       </Heading>
-      <Box border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
+      <Stack border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
         {activities.length === 0 ? (
-          <Box p={8} textAlign="center">
+          <Stack p={8} align="center">
             <Icon icon={Clock} size={8} color="text-gray-600" className="mx-auto mb-3" />
             <Text color="text-gray-500">No recent activity to show.</Text>
-          </Box>
+          </Stack>
         ) : (
-          <Box>
+          <Stack>
             {activities.map((activity, index) => (
-              <Box 
+              <Stack 
                 key={activity.id} 
                 p={4} 
-                display="flex" 
+                direction="row"
                 gap={4}
                 borderBottom={index !== activities.length - 1}
                 borderColor="border-charcoal-outline/30"
-                hoverBg="bg-iron-gray/20"
-                transition-colors
+                className="transition-colors hover:bg-bg-iron-gray/20"
               >
-                <Box 
+                <Stack 
                   w="10" 
                   h="10" 
                   rounded="lg" 
-                  display="flex" 
-                  alignItems="center" 
-                  justifyContent="center"
-                  bg={activity.color.replace('text-', 'bg-').concat('/10') as BoxProps<'div'>['bg']}
+                  align="center" 
+                  justify="center"
+                  bg={activity.color.replace('text-', 'bg-').concat('/10')}
                 >
                   <Icon icon={activity.icon} size={5} color={activity.color as any} />
-                </Box>
-                <Box flexGrow={1}>
-                  <Box display="flex" alignItems="center" justifyContent="between" mb={0.5}>
+                </Stack>
+                <Stack flexGrow={1}>
+                  <Stack direction="row" align="center" justify="between" mb={0.5}>
                     <Text weight="medium" color="text-white">{activity.title}</Text>
                     <Text size="xs" color="text-gray-500">{activity.timestamp}</Text>
-                  </Box>
+                  </Stack>
                   <Text size="sm" color="text-gray-400">{activity.description}</Text>
-                </Box>
-              </Box>
+                </Stack>
+              </Stack>
             ))}
-          </Box>
+          </Stack>
         )}
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }