issue(Comunica): fix size of avatars (#151)

Reviewed-by: @johan-fx Ref: #151
leemonade · May 7, 2024 · d026dda · d026dda
1 parent 1027158
commit d026dda
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/packages/components/src/informative/Avatar/Avatar.js b/packages/components/src/informative/Avatar/Avatar.js
@@ -25,6 +25,7 @@ const Avatar = forwardRef(
       activityStatus,
       showIconAndImage,
       alt,
+      customSize,
       ...props
     },
     ref,
@@ -51,6 +52,7 @@ const Avatar = forwardRef(
       state,
       activityStatus,
       subjectColor,
+      customSize,
     });
 
     return (

diff --git a/packages/components/src/informative/Avatar/Avatar.styles.js b/packages/components/src/informative/Avatar/Avatar.styles.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { createStyles } from '@mantine/styles';
 import { AlertWarningTriangleIcon } from '@bubbles-ui/icons/solid';
 
-const getSizes = (size, avatarSizes) => {
-  const avatarSize = avatarSizes[size];
+const getSizes = (size, avatarSizes, customSize) => {
+  const avatarSize = customSize ?? avatarSizes[size];
   return {
     height: avatarSize,
     width: avatarSize,
@@ -64,14 +64,14 @@ const getIconWrapperStyles = (size, theme, badgeTheme) => {
 };
 
 export const AvatarStyles = createStyles(
-  (theme, { size, radius, color, state, activityStatus, subjectColor }) => {
+  (theme, { size, radius, color, state, activityStatus, subjectColor, customSize }) => {
     const avatarTheme = theme.other.avatar;
     const badgeTheme = theme.other.badge;
 
     return {
       root: {
         borderRadius: radius ? avatarTheme.border.radius.circle : 0,
-        ...getSizes(size || 'md', avatarTheme.size),
+        ...getSizes(size || 'md', avatarTheme.size, customSize),
       },
       placeholder: {
         color: avatarTheme.content.color.default,