website refactor

apps/website/components/sponsors/ActivityItem.tsx

@@ -1,3 +1,8 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
 interface ActivityItemProps {
   activity: {
     id: string;
@@ -8,22 +13,22 @@ interface ActivityItemProps {
   };
 }
 
-export default function ActivityItem({ activity }: ActivityItemProps) {
+export function ActivityItem({ activity }: ActivityItemProps) {
   return (
-    <div className="flex items-start gap-3 py-3 border-b border-charcoal-outline/50 last:border-b-0">
-      <div className={`w-2 h-2 rounded-full mt-2 ${activity.typeColor}`} />
-      <div className="flex-1 min-w-0">
-        <p className="text-sm text-white truncate">{activity.message}</p>
-        <div className="flex items-center gap-2 mt-1">
-          <span className="text-xs text-gray-500">{activity.time}</span>
+    <Stack direction="row" align="start" gap={3} style={{ padding: '0.75rem 0', borderBottom: '1px solid rgba(38, 38, 38, 0.5)' }}>
+      <Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', marginTop: '0.5rem', backgroundColor: activity.typeColor }} />
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        <Text size="sm" color="text-white" style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{activity.message}</Text>
+        <Stack direction="row" align="center" gap={2} style={{ marginTop: '0.25rem' }}>
+          <Text size="xs" color="text-gray-500">{activity.time}</Text>
           {activity.formattedImpressions && (
             <>
-              <span className="text-xs text-gray-600">•</span>
-              <span className="text-xs text-gray-400">{activity.formattedImpressions} views</span>
+              <Text size="xs" color="text-gray-600">•</Text>
+              <Text size="xs" color="text-gray-400">{activity.formattedImpressions} views</Text>
             </>
           )}
-        </div>
-      </div>
-    </div>
+        </Stack>
+      </Box>
+    </Stack>
   );
-}
+}