Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

chore: make the User Avatar size configurable (#7332)

Browse Source 
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)
This commit is contained in:
Thomas Heartman 2024-06-10 12:43:27 +02:00 committed by GitHub
parent 08713c918c
commit df3ca10a6d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/component/common/UserAvatar/UserAvatar.tsx
View File

@ -9,15 +9,21 @@ import type { IUser } from 'interfaces/user';
import type { FC } from 'react'; import type { FC } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const StyledAvatar = styled(Avatar)(({ theme }) => ({ const StyledAvatar = styled(Avatar, {
width: theme.spacing(3.5), shouldForwardProp: (prop) => prop !== 'avatarWidth',
height: theme.spacing(3.5), })<{ avatarWidth?: (theme: Theme) => string }>(({ theme, avatarWidth }) => {
margin: 'auto', const width = avatarWidth ? avatarWidth(theme) : theme.spacing(3.5);
backgroundColor: theme.palette.secondary.light,
color: theme.palette.text.primary, return {
fontSize: theme.fontSizes.smallerBody, width,
fontWeight: theme.fontWeight.bold, 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 { interface IUserAvatarProps extends AvatarProps {
user?: Partial< user?: Partial<
@ -29,6 +35,7 @@ interface IUserAvatarProps extends AvatarProps {
onMouseLeave?: () => void; onMouseLeave?: () => void;
className?: string; className?: string;
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
avatarWidth?: (theme: Theme) => string;
} }
export const UserAvatar: FC<IUserAvatarProps> = ({ export const UserAvatar: FC<IUserAvatarProps> = ({

1
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -182,6 +182,7 @@ export const ProjectFeatureToggles = ({
name: original.createdBy.name, name: original.createdBy.name,
imageUrl: original.createdBy.imageUrl, imageUrl: original.createdBy.imageUrl,
}} }}
avatarWidth={(theme) => theme.spacing(3)}
/> />
); );
}, },