From 742504793c04c92819d683d05d38b66f8ed3a770 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 27 Aug 2024 14:37:45 +0200
Subject: [PATCH] refactor: make avatar group more customizable (#7989)

---
 .../common/AvatarGroup/AvatarGroup.tsx        | 32 +++++++++----------
 .../feature/FeatureView/Collaborators.tsx     | 14 +++++---
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx b/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
index 458f108caf..ec7ee2d553 100644
--- a/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
+++ b/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;
diff --git a/frontend/src/component/feature/FeatureView/Collaborators.tsx b/frontend/src/component/feature/FeatureView/Collaborators.tsx
index 62cb522ace..150a338b83 100644
--- a/frontend/src/component/feature/FeatureView/Collaborators.tsx
+++ b/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>
     );