From 76c517aa2963d7d08f1dd4635b413af3593b3a3f Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Tue, 1 Jul 2025 17:56:56 +0200
Subject: [PATCH] Fixed avatar font weight and associated story (#12989)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR changes the avatar placeholder letter font-weight to medium.

I also updated the story to use a symmetric letter “E” instead of “L”,
so that it is easier to spot alignment problems.

Before :

<img width="347" alt="Capture d’écran 2025-07-01 à 15 51 57"
src="https://github.com/user-attachments/assets/b622083e-b9a8-45a9-9956-a15c0cb3508a"
/>

After :

<img width="257" alt="Capture d’écran 2025-07-01 à 15 53 29"
src="https://github.com/user-attachments/assets/e491af60-cfce-486d-9ee0-6bb4dff0f022"
/>
---
 .../twenty-ui/src/display/avatar/components/Avatar.tsx | 10 +++++++++-
 .../avatar/components/__stories__/Avatar.stories.tsx   |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
index 5adc94db1..d02f0f872 100644
--- a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
@@ -51,6 +51,12 @@ const StyledImage = styled.img`
   width: 100%;
 `;
 
+const StyledPlaceholderChar = styled.span<{
+  fontWeight: number;
+}>`
+  font-weight: ${({ fontWeight }) => fontWeight};
+`;
+
 export type AvatarProps = {
   avatarUrl?: string | null;
   className?: string;
@@ -132,7 +138,9 @@ export const Avatar = ({
           size={theme.icon.size.xl}
         />
       ) : showPlaceholder ? (
-        placeholderChar
+        <StyledPlaceholderChar fontWeight={theme.font.weight.medium}>
+          {placeholderChar}
+        </StyledPlaceholderChar>
       ) : (
         <StyledImage src={avatarImageURI} onError={handleImageError} alt="" />
       )}
diff --git a/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
index 5818b6980..570a14c9b 100644
--- a/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
@@ -15,7 +15,7 @@ const meta: Meta<typeof Avatar> = {
   args: {
     avatarUrl: AVATAR_URL_MOCK,
     size: 'md',
-    placeholder: 'L',
+    placeholder: 'E',
     type: 'rounded',
   },
 };