refactor: make avatar group more customizable (#7989)

frontend/src/component/common/AvatarGroup/AvatarGroup.tsx

@@ -14,21 +14,21 @@ const StyledAvatars = styled('div')(({ theme }) => ({
     justifyContent: 'start',
 }));
 
-const StyledAvatar = (component: typeof UserAvatar) =>
-    styled(component)(({ theme }) => ({
-        outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`,
-        margin: 0,
-        marginLeft: theme.spacing(-1),
-        '&:hover': {
-            outlineColor: theme.palette.primary.main,
-        },
-    }));
+export const AvatarComponent = styled(UserAvatar)(({ theme }) => ({
+    outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`,
+    margin: 0,
+    marginLeft: theme.spacing(-1),
+    '&:hover': {
+        outlineColor: theme.palette.primary.main,
+    },
+}));
 
 type User = {
     name: string;
     description?: string;
     imageUrl?: string;
 };
+
 type AvatarGroupProps = {
     users: User[];
     avatarLimit?: number;
@@ -36,14 +36,12 @@ type AvatarGroupProps = {
     className?: string;
 };
 
-export const AvatarGroup = ({
-    AvatarComponent,
-    ...props
-}: AvatarGroupProps) => {
-    const Avatar = StyledAvatar(AvatarComponent ?? UserAvatar);
-
-    return <AvatarGroupInner AvatarComponent={Avatar} {...props} />;
-};
+export const AvatarGroup = ({ ...props }: AvatarGroupProps) => (
+    <AvatarGroupInner
+        AvatarComponent={props.AvatarComponent ?? AvatarComponent}
+        {...props}
+    />
+);
 
 type AvatarGroupInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
     AvatarComponent: typeof UserAvatar;

frontend/src/component/feature/FeatureView/Collaborators.tsx

@@ -1,15 +1,21 @@
 import { styled } from '@mui/material';
-import { AvatarGroup } from 'component/common/AvatarGroup/AvatarGroup';
-import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+import {
+    AvatarComponent,
+    AvatarGroup,
+} from 'component/common/AvatarGroup/AvatarGroup';
 import type { Collaborator } from 'interfaces/featureToggle';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 
-const StyledAvatar = styled(UserAvatar)(({ theme }) => ({
+const StyledAvatarComponent = styled(AvatarComponent)(({ theme }) => ({
     width: theme.spacing(3),
     height: theme.spacing(3),
 }));
 
+const StyledAvatar = styled(StyledAvatarComponent)(() => ({
+    marginLeft: 0,
+}));
+
 const SectionContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexFlow: 'column',
@@ -50,7 +56,7 @@ const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({
             <StyledAvatarGroup
                 users={collaborators}
                 avatarLimit={6}
-                AvatarComponent={StyledAvatar}
+                AvatarComponent={StyledAvatarComponent}
             />
         </SectionContainer>
     );