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>