Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-23 13:46:45 +02:00
Code Issues Projects Releases Wiki Activity

Chore: additional styling for group card avatars

Browse Source
This commit is contained in:
Thomas Heartman 2024-07-23 09:06:48 +02:00
parent 0fcc5b45ba
commit c0e954e69d
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/component/feature/FeatureView/Contributors.tsx
View File

@ -1,4 +1,4 @@
import { styled } from '@mui/material'; import { type Theme, styled } from '@mui/material';
import { GroupCardAvatars } from 'component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/NewGroupCardAvatars'; import { GroupCardAvatars } from 'component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/NewGroupCardAvatars';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
import type { IFeatureToggle } from 'interfaces/featureToggle'; import type { IFeatureToggle } from 'interfaces/featureToggle';
@ -11,13 +11,15 @@ type LastModifiedByProps = {
imageUrl: string; imageUrl: string;
}; };
const gap = (theme: Theme) => theme.spacing(1);
const LastModifiedByContainer = styled('div')(({ theme }) => ({ const LastModifiedByContainer = styled('div')(({ theme }) => ({
display: 'grid', display: 'grid',
gridTemplateAreas: ` gridTemplateAreas: `
'description description' 'description description'
'avatar link' 'avatar link'
`, `,
gap: theme.spacing(1), gap: gap(theme),
alignItems: 'center', alignItems: 'center',
height: 'min-content', height: 'min-content',
fontSize: theme.typography.body2.fontSize, fontSize: theme.typography.body2.fontSize,
@ -48,15 +50,35 @@ const LastModifiedBy: FC<LastModifiedByProps> = ({ id, name, imageUrl }) => {
type CollaboratorListProps = { type CollaboratorListProps = {
users: Array<{ id: number; name: string; imageUrl: string }>; users: Array<{ id: number; name: string; imageUrl: string }>;
}; };
const CollaboratorListContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexFlow: 'column',
gap: gap(theme),
alignItems: 'flex-start',
height: 'min-content',
fontSize: theme.typography.body2.fontSize,
}));
const Collaborators: FC<CollaboratorListProps> = ({ users }) => { const Collaborators: FC<CollaboratorListProps> = ({ users }) => {
return <GroupCardAvatars users={users} avatarLimit={8} />; return (
<CollaboratorListContainer>
<span className='description'>Collaborators</span>
<GroupCardAvatars users={users} avatarLimit={8} />
</CollaboratorListContainer>
);
}; };
const Container = styled('article')(({ theme }) => ({ const Container = styled('article')(({ theme }) => ({
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
gap: theme.spacing(2), gap: theme.spacing(4),
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between',
marginInlineEnd: theme.spacing(4),
[theme.breakpoints.down('xl')]: {
display: 'none',
},
})); }));
type Props = { type Props = {