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 + + {placeholderChar} + ) : ( )} 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 = { args: { avatarUrl: AVATAR_URL_MOCK, size: 'md', - placeholder: 'L', + placeholder: 'E', type: 'rounded', }, };