devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix: avatar and server icon font size/weight to match prototype

Browse Source 
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.
This commit is contained in:
Jannis Braun
2026-03-02 14:08:34 +01:00
parent 88b29200d5
commit 31562c2b29
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/ui/Avatar.tsx
+4 -3
View File
@@ -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>