website refactor

apps/website/components/feed/FeedItemCard.tsx

@@ -3,6 +3,8 @@
 import React, { useEffect, useState } from 'react';
 import { Button } from '@/ui/Button';
 import { FeedItem } from '@/ui/FeedItem';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 import { TimeDisplay } from '@/lib/display-objects/TimeDisplay';
 
 interface FeedItemData {
@@ -50,10 +52,10 @@ export function FeedItemCard({ item }: FeedItemCardProps) {
       }}
       timestamp={TimeDisplay.timeAgo(item.timestamp)}
       content={
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-          <div style={{ fontWeight: 'bold' }}>{item.headline}</div>
-          {item.body && <div>{item.body}</div>}
-        </div>
+        <Stack gap={2}>
+          <Text weight="bold" variant="high">{item.headline}</Text>
+          {item.body && <Text variant="med">{item.body}</Text>}
+        </Stack>
       }
       actions={item.ctaHref && item.ctaLabel ? (
         <Button

apps/website/components/feed/RecentActivity.tsx

@@ -6,6 +6,8 @@ import { ActiveDriverCard } from '@/ui/ActiveDriverCard';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { SectionHeader } from '@/ui/SectionHeader';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { Grid } from '@/ui/Grid';
 import { Activity } from 'lucide-react';
 import React from 'react';
 
@@ -25,7 +27,7 @@ export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps)
   const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);
 
   return (
-    <div style={{ marginBottom: '2.5rem' }}>
+    <Box marginBottom={10}>
       <SectionHeader
         title="Active Drivers"
         description="Currently competing in leagues"
@@ -33,7 +35,7 @@ export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps)
         actions={<Icon icon={Activity} size={5} intent="success" />}
       />
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(10rem, 1fr))', gap: '0.75rem' }}>
+      <Grid cols={{ base: 2, sm: 3, md: 4, lg: 6 }} gap={3}>
         {activeDrivers.map((driver) => {
           return (
             <ActiveDriverCard
@@ -46,7 +48,7 @@ export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps)
             />
           );
         })}
-      </div>
-    </div>
+      </Grid>
+    </Box>
   );
 }