Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: use nested flexboxes instead of grid area (#7654)

Browse Source 
This change removes the use of grid area from the collaborators
component, replacing it with a nested flexbox setup.
This commit is contained in:
Thomas Heartman 2024-07-29 12:55:52 +02:00 committed by GitHub
parent d825b49f43
commit 0fe0079053
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/component/feature/FeatureView/Collaborators.tsx
View File

@ -11,56 +11,48 @@ const StyledAvatar = styled(UserAvatar)(({ theme }) => ({
height: theme.spacing(3),
}));
const LastModifiedByContainer = styled('div')(({ theme }) => ({
display: 'grid',
gridTemplateAreas: `
'description description'
'avatar link'
`,
rowGap: theme.spacing(0.5),
columnGap: theme.spacing(1),
alignItems: 'center',
height: 'min-content',
}));
const GridDescription = styled('span')({ gridArea: 'description' });
const GridTooltip = styled(HtmlTooltip)({ gridArea: 'avatar' });
const GridLink = styled(Link)({ gridArea: 'link' });
const LastModifiedBy: FC<Collaborator> = ({ id, name, imageUrl }) => {
return (
<LastModifiedByContainer>
<GridDescription>Last modified by</GridDescription>
<GridTooltip arrow describeChild title={name}>
<span>
<StyledAvatar user={{ id, name, imageUrl }} hideTitle />
</span>
</GridTooltip>
<GridLink to='logs'>view change</GridLink>
</LastModifiedByContainer>
);
};
const CollaboratorListContainer = styled('div')(({ theme }) => ({
const SectionContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexFlow: 'column',
flexFlow: 'row',
gap: theme.spacing(0.5),
alignItems: 'flex-start',
height: 'min-content',
}));
const LastModifiedByAvatarAndLink = styled('div')(({ theme }) => ({
display: 'flex',
flexFlow: 'column',
gap: theme.spacing(1),
}));
const LastModifiedBy: FC<Collaborator> = ({ id, name, imageUrl }) => {
return (
<SectionContainer>
<span>Last modified by</span>
<LastModifiedByAvatarAndLink>
<HtmlTooltip arrow describeChild title={name}>
<span>
<StyledAvatar user={{ id, name, imageUrl }} hideTitle />
</span>
</HtmlTooltip>
<Link to='logs'>view change</Link>
</LastModifiedByAvatarAndLink>
</SectionContainer>
);
};
const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({
collaborators,
}) => {
return (
<CollaboratorListContainer>
<SectionContainer>
<span className='description'>Collaborators</span>
<GroupCardAvatars
users={collaborators}
avatarLimit={8}
AvatarComponent={StyledAvatar}
/>
</CollaboratorListContainer>
</SectionContainer>
);
};