website refactor

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>
       ) : (