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/layout/ServerSidebar.tsx
+1 -1
View File
@@ -99,7 +99,7 @@ function SidebarItem({ id, name, icon, active, onClick, type = 'server', actionT
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (
<span className="text-[15px] font-medium">{firstLetter}</span> <span className="text-[15px] font-bold">{firstLetter}</span>
)} )}
</button> </button>
</div> </div>
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) { export function Avatar({ src, name, size = 40, status, className = '', onClick, user, userId }: AvatarProps) {
const openUserProfile = useUIStore((s) => s.openUserProfile); const openUserProfile = useUIStore((s) => s.openUserProfile);
const initials = name.charAt(0).toUpperCase(); 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 gradient = getAvatarGradient(userId ?? user?.id, name);
const handleClick = (e: React.MouseEvent) => { const handleClick = (e: React.MouseEvent) => {
@@ -93,8 +94,8 @@ export function Avatar({ src, name, size = 40, status, className = '', onClick,
/> />
) : null} ) : null}
<div <div
className={`avatar-fallback w-full h-full rounded-full flex items-center justify-center ${fontSize} font-semibold text-white ${src ? 'hidden' : 'flex'}`} 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, ...maskStyle }} style={src ? { display: 'none' } : { background: gradient.gradient, fontSize: fontPx, ...maskStyle }}
> >
{initials} {initials}
</div> </div>