From df3ca10a6d3baac5f8b2c6e9712eea6ed15e9b59 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 10 Jun 2024 12:43:27 +0200
Subject: [PATCH] chore: make the User Avatar size configurable (#7332)

This change makes the width of the user avatar configurable via a new
"avatarWidth" property.

It also sets the width to be `theme.spacing(3)` (currently 24px) for the
feature flag table.

It looks like this now:

![image](https://github.com/Unleash/unleash/assets/17786332/5e12ddad-234e-4e81-9eff-303b116991bb)

It used to look like this:


![image](https://github.com/Unleash/unleash/assets/17786332/357f7a52-7765-4f38-8700-c9884b6c49f0)
---
 .../common/UserAvatar/UserAvatar.tsx          | 25 ++++++++++++-------
 .../ProjectFeatureToggles.tsx                 |  1 +
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/common/UserAvatar/UserAvatar.tsx b/frontend/src/component/common/UserAvatar/UserAvatar.tsx
index 6b864d8467..69f2ce4020 100644
--- a/frontend/src/component/common/UserAvatar/UserAvatar.tsx
+++ b/frontend/src/component/common/UserAvatar/UserAvatar.tsx
@@ -9,15 +9,21 @@ import type { IUser } from 'interfaces/user';
 import type { FC } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
-const StyledAvatar = styled(Avatar)(({ theme }) => ({
-    width: theme.spacing(3.5),
-    height: theme.spacing(3.5),
-    margin: 'auto',
-    backgroundColor: theme.palette.secondary.light,
-    color: theme.palette.text.primary,
-    fontSize: theme.fontSizes.smallerBody,
-    fontWeight: theme.fontWeight.bold,
-}));
+const StyledAvatar = styled(Avatar, {
+    shouldForwardProp: (prop) => prop !== 'avatarWidth',
+})<{ avatarWidth?: (theme: Theme) => string }>(({ theme, avatarWidth }) => {
+    const width = avatarWidth ? avatarWidth(theme) : theme.spacing(3.5);
+
+    return {
+        width,
+        height: width,
+        margin: 'auto',
+        backgroundColor: theme.palette.secondary.light,
+        color: theme.palette.text.primary,
+        fontSize: theme.fontSizes.smallerBody,
+        fontWeight: theme.fontWeight.bold,
+    };
+});
 
 interface IUserAvatarProps extends AvatarProps {
     user?: Partial<
@@ -29,6 +35,7 @@ interface IUserAvatarProps extends AvatarProps {
     onMouseLeave?: () => void;
     className?: string;
     sx?: SxProps<Theme>;
+    avatarWidth?: (theme: Theme) => string;
 }
 
 export const UserAvatar: FC<IUserAvatarProps> = ({
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
index e7f9c3b4f1..cee05ff05f 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -182,6 +182,7 @@ export const ProjectFeatureToggles = ({
                                           name: original.createdBy.name,
                                           imageUrl: original.createdBy.imageUrl,
                                       }}
+                                      avatarWidth={(theme) => theme.spacing(3)}
                                   />
                               );
                           },