website refactor

apps/website/components/social/FriendItem.tsx

@@ -3,6 +3,7 @@
 import { Image } from '@/ui/Image';
 import { SidebarItem } from '@/ui/SidebarItem';
 import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
 import React from 'react';
 
 interface FriendItemProps {
@@ -15,7 +16,7 @@ export function FriendItem({ name, avatarUrl, country }: FriendItemProps) {
   return (
     <SidebarItem
       icon={
-        <div style={{ width: '100%', height: '100%', borderRadius: '9999px', overflow: 'hidden' }}>
+        <Surface width="100%" height="100%" rounded="full" overflow="hidden">
           <Image
             src={avatarUrl}
             alt={name}
@@ -23,7 +24,7 @@ export function FriendItem({ name, avatarUrl, country }: FriendItemProps) {
             height={36}
             objectFit="cover"
           />
-        </div>
+        </Surface>
       }
     >
       <Text size="sm" variant="high" weight="medium" truncate block>

apps/website/components/social/FriendsList.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { Stack } from '@/ui/Stack';
 
 interface FriendsListProps {
   children: ReactNode;
@@ -6,8 +7,8 @@ interface FriendsListProps {
 
 export function FriendsList({ children }: FriendsListProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+    <Stack gap={2}>
       {children}
-    </div>
+    </Stack>
   );
 }

apps/website/components/social/FriendsSidebar.tsx

@@ -9,6 +9,7 @@ import { SectionHeader } from '@/ui/SectionHeader';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
 import { UserPlus, Users } from 'lucide-react';
 import React from 'react';
 
@@ -44,14 +45,14 @@ export function FriendsSidebar({ friends, hasFriends }: FriendsSidebarProps) {
             />
           ))}
           {friends.length > 6 && (
-            <div style={{ padding: '0.5rem 0' }}>
+            <Box paddingY={2}>
               <Link
                 href={routes.protected.profile}
                 variant="primary"
               >
                 <Text size="sm" block align="center">+{friends.length - 6} more</Text>
               </Link>
-            </div>
+            </Box>
           )}
         </FriendsList>
       ) : (