website refactor

apps/website/components/social/FriendsPreview.tsx

@@ -3,14 +3,12 @@
 import React from 'react';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
-import { Box } from '@/ui/Box';
-import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Card , Card as Surface } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/Stack';
-import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 import { routes } from '@/lib/routing/RouteConfig';
@@ -29,17 +27,17 @@ interface FriendsPreviewProps {
 export function FriendsPreview({ friends }: FriendsPreviewProps) {
   return (
     <Card>
-      <Box mb={4}>
+      <Stack mb={4}>
         <Stack direction="row" align="center" justify="between">
           <Heading level={2} icon={<Icon icon={Users} size={5} color="#a855f7" />}>
             Friends
           </Heading>
           <Text size="sm" color="text-gray-500" weight="normal">({friends.length})</Text>
         </Stack>
-      </Box>
+      </Stack>
       <Stack direction="row" gap={3} wrap>
         {friends.slice(0, 8).map((friend) => (
-          <Box key={friend.id}>
+          <Stack key={friend.id}>
             <Link
               href={routes.driver.detail(friend.id)}
               variant="ghost"
@@ -55,7 +53,7 @@ export function FriendsPreview({ friends }: FriendsPreviewProps) {
                 bg="bg-neutral-800/50" 
                 borderColor="border-neutral-800"
               >
-                <Box 
+                <Stack 
                   w="8" 
                   h="8" 
                   rounded="full" 
@@ -69,17 +67,17 @@ export function FriendsPreview({ friends }: FriendsPreviewProps) {
                    height={32}
                    objectFit="cover"
                  />
-                </Box>
+                </Stack>
                 <Text size="sm" color="text-white">{friend.name}</Text>
                 <Text size="lg">{CountryFlagDisplay.fromCountryCode(friend.country).toString()}</Text>
               </Surface>
             </Link>
-          </Box>
+          </Stack>
         ))}
         {friends.length > 8 && (
-          <Box p={2}>
+          <Stack p={2}>
             <Text size="sm" color="text-gray-500">+{friends.length - 8} more</Text>
-          </Box>
+          </Stack>
         )}
       </Stack>
     </Card>

apps/website/components/social/FriendsSidebar.tsx

@@ -1,7 +1,7 @@
 
 
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
 import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
 import { FriendItem } from '@/components/social/FriendItem';
@@ -9,7 +9,6 @@ import { FriendsList } from '@/components/social/FriendsList';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { UserPlus, Users } from 'lucide-react';
 
@@ -45,14 +44,14 @@ export function FriendsSidebar({ friends, hasFriends }: FriendsSidebarProps) {
             />
           ))}
           {friends.length > 6 && (
-            <Box py={2}>
+            <Stack py={2}>
               <Link
                 href={routes.protected.profile}
                 variant="primary"
               >
                 <Text size="sm" block align="center">+{friends.length - 6} more</Text>
               </Link>
-            </Box>
+            </Stack>
           )}
         </FriendsList>
       ) : (