From 31562c2b29baa24d31c820c99705f3aec3af8e30 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 2 Mar 2026 14:08:34 +0100
Subject: [PATCH] fix: avatar and server icon font size/weight to match
 prototype
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Avatar: font-semibold (600) → font-bold (700), replaced Tailwind text
classes with exact pixel sizes matching prototype (24px→10px, 32px→12px,
40px→15px, 56px+→18px). Server sidebar: font-medium → font-bold.
---
 packages/web/src/components/layout/ServerSidebar.tsx | 2 +-
 packages/web/src/components/ui/Avatar.tsx            | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/layout/ServerSidebar.tsx b/packages/web/src/components/layout/ServerSidebar.tsx
index e51bec14..b70b1aa4 100644
--- a/packages/web/src/components/layout/ServerSidebar.tsx
+++ b/packages/web/src/components/layout/ServerSidebar.tsx
@@ -99,7 +99,7 @@ function SidebarItem({ id, name, icon, active, onClick, type = 'server', actionT
             className="w-full h-full object-cover"
           />
         ) : (
-          <span className="text-[15px] font-medium">{firstLetter}</span>
+          <span className="text-[15px] font-bold">{firstLetter}</span>
         )}
       </button>
     </div>
diff --git a/packages/web/src/components/ui/Avatar.tsx b/packages/web/src/components/ui/Avatar.tsx
index 026db272..552e3359 100644
--- a/packages/web/src/components/ui/Avatar.tsx
+++ b/packages/web/src/components/ui/Avatar.tsx
@@ -46,7 +46,8 @@ function getDotMetrics(size: number) {
 export function Avatar({ src, name, size = 40, status, className = '', onClick, user, userId }: AvatarProps) {
   const openUserProfile = useUIStore((s) => s.openUserProfile);
   const initials = name.charAt(0).toUpperCase();
-  const fontSize = size < 32 ? 'text-xs' : size < 48 ? 'text-sm' : 'text-lg';
+  // Match prototype: 24px→10px, 32-34px→12px, 40px→15px, 56px+→18px
+  const fontPx = size <= 24 ? 10 : size <= 34 ? 12 : size <= 44 ? 15 : 18;
   const gradient = getAvatarGradient(userId ?? user?.id, name);
 
   const handleClick = (e: React.MouseEvent) => {
@@ -93,8 +94,8 @@ export function Avatar({ src, name, size = 40, status, className = '', onClick,
         />
       ) : null}
       <div
-        className={`avatar-fallback w-full h-full rounded-full flex items-center justify-center ${fontSize} font-semibold text-white ${src ? 'hidden' : 'flex'}`}
-        style={src ? { display: 'none' } : { background: gradient.gradient, ...maskStyle }}
+        className={`avatar-fallback w-full h-full rounded-full flex items-center justify-center font-bold text-white ${src ? 'hidden' : 'flex'}`}
+        style={src ? { display: 'none' } : { background: gradient.gradient, fontSize: fontPx, ...maskStyle }}
       >
         {initials}
       </div>