admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix alignment and background icon color on record page header (#10817)

Browse Source 
Before:
<img width="501" alt="Capture d’écran 2025-03-12 à 17 23 58"
src="https://github.com/user-attachments/assets/b9f58bc1-61e5-4a6b-905d-76eeb63f88be"
/>

After:
<img width="499" alt="Capture d’écran 2025-03-12 à 17 22 12"
src="https://github.com/user-attachments/assets/30c95603-77e9-4647-b233-8c0ea2a27df8"
/>
This commit is contained in:
Raphaël Bosi
2025-03-12 17:46:07 +01:00
committed by GitHub
parent 89faccad4f
commit 3eb1aa1b5a
1 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
View File

@ -62,10 +62,17 @@ const StyledTitle = styled.div<{ isMobile: boolean }>`
font-size: ${({ theme }) => theme.font.size.xl}; font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.font.weight.semiBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')}; justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')};
padding-left: ${({ theme, isMobile }) => (isMobile ? theme.spacing(2) : 0)};
width: 90%; width: 90%;
`; `;
const StyledAvatarWrapper = styled.div<{ isAvatarEditable: boolean }>` const StyledAvatarWrapper = styled.div<{
isAvatarEditable: boolean;
hasIcon: boolean;
}>`
background-color: ${({ theme, hasIcon }) =>
hasIcon ? theme.background.transparent.light : 'unset'};
border-radius: ${({ theme }) => theme.border.radius.sm};
cursor: ${({ isAvatarEditable }) => cursor: ${({ isAvatarEditable }) =>
isAvatarEditable ? 'pointer' : 'default'}; isAvatarEditable ? 'pointer' : 'default'};
`; `;
@ -133,7 +140,10 @@ export const ShowPageSummaryCard = ({
return ( return (
<StyledShowPageSummaryCard isMobile={isMobile}> <StyledShowPageSummaryCard isMobile={isMobile}>
<StyledAvatarWrapper isAvatarEditable={!!onUploadPicture}> <StyledAvatarWrapper
isAvatarEditable={isDefined(onUploadPicture)}
hasIcon={isDefined(icon)}
>
<Avatar <Avatar
avatarUrl={logoOrAvatar} avatarUrl={logoOrAvatar}
onClick={onUploadPicture ? handleAvatarClick : undefined} onClick={onUploadPicture ? handleAvatarClick : undefined}