mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fixed avatar font weight and associated story (#12989)

Browse Source 
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"
/>
This commit is contained in:
Lucas Bordeau
2025-07-01 17:56:56 +02:00
committed by GitHub
parent e832a3a609
commit 76c517aa29
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-ui/src/display/avatar/components/Avatar.tsx
View File

@ -51,6 +51,12 @@ const StyledImage = styled.img`
width: 100%; width: 100%;
`; `;
const StyledPlaceholderChar = styled.span<{
fontWeight: number;
}>`
font-weight: ${({ fontWeight }) => fontWeight};
`;
export type AvatarProps = { export type AvatarProps = {
avatarUrl?: string | null; avatarUrl?: string | null;
className?: string; className?: string;
@ -132,7 +138,9 @@ export const Avatar = ({
size={theme.icon.size.xl} size={theme.icon.size.xl}
/> />
) : showPlaceholder ? ( ) : showPlaceholder ? (
placeholderChar <StyledPlaceholderChar fontWeight={theme.font.weight.medium}>
{placeholderChar}
</StyledPlaceholderChar>
) : ( ) : (
<StyledImage src={avatarImageURI} onError={handleImageError} alt="" /> <StyledImage src={avatarImageURI} onError={handleImageError} alt="" />
)} )}

2
packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
View File

@ -15,7 +15,7 @@ const meta: Meta<typeof Avatar> = {
args: { args: {
avatarUrl: AVATAR_URL_MOCK, avatarUrl: AVATAR_URL_MOCK,
size: 'md', size: 'md',
placeholder: 'L', placeholder: 'E',
type: 'rounded', type: 'rounded',
}, },
}; };