Change size of the avatars in details page

Author: JakubKorytko

src/CONST/index.ts

@@ -3131,6 +3131,7 @@ const CONST = {
         SMALL_SUBSCRIPT: 'small-subscript',
         MID_SUBSCRIPT: 'mid-subscript',
         LARGE_BORDERED: 'large-bordered',
+        MEDIUM_LARGE: 'medium-large',
         HEADER: 'header',
         MENTION_ICON: 'mention-icon',
         SMALL_NORMAL: 'small-normal',

src/components/ReportActionAvatars/ReportActionAvatar.tsx

@@ -418,7 +418,7 @@ function ReportActionAvatarMultipleDiagonal({
     const StyleUtils = useStyleUtils();
 
     const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => getUserDetailTooltipText(Number(icon.id), icon.name)) : ['']), [shouldShowTooltip, icons]);
-    const useHugeBottomMargin = icons.length === 2 && size === CONST.AVATAR_SIZE.X_LARGE;
+    const removeRightMargin = icons.length === 2 && size === CONST.AVATAR_SIZE.X_LARGE;
     const avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
 
     const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo(
@@ -432,8 +432,8 @@ function ReportActionAvatarMultipleDiagonal({
                 secondAvatarStyles: styles.secondAvatarMedium,
             },
             [CONST.AVATAR_SIZE.X_LARGE]: {
-                singleAvatarStyle: styles.singleAvatarLarge,
-                secondAvatarStyles: styles.secondAvatarLarge,
+                singleAvatarStyle: styles.singleAvatarMediumLarge,
+                secondAvatarStyles: styles.secondAvatarMediumLarge,
             },
             [CONST.AVATAR_SIZE.DEFAULT]: {
                 singleAvatarStyle: styles.singleAvatar,
@@ -453,7 +453,7 @@ function ReportActionAvatarMultipleDiagonal({
         }
 
         if (size === CONST.AVATAR_SIZE.X_LARGE) {
-            return CONST.AVATAR_SIZE.LARGE;
+            return CONST.AVATAR_SIZE.MEDIUM_LARGE;
         }
 
         return CONST.AVATAR_SIZE.SMALLER;
@@ -463,7 +463,7 @@ function ReportActionAvatarMultipleDiagonal({
     const secondaryAvatarContainerStyles = secondaryAvatarContainerStyle ?? [StyleUtils.getBackgroundAndBorderStyle(isHovered ? theme.activeComponentBG : theme.componentBG)];
 
     return (
-        <View style={[avatarContainerStyles, useHugeBottomMargin && styles.mb7]}>
+        <View style={[avatarContainerStyles, removeRightMargin && styles.mr0]}>
             <View
                 style={[singleAvatarStyle, icons.at(0)?.type === CONST.ICON_TYPE_WORKSPACE && StyleUtils.getAvatarBorderRadius(size, icons.at(0)?.type)]}
                 testID="ReportActionAvatars-MultipleAvatars"

src/styles/index.ts

@@ -2380,11 +2380,11 @@ const styles = (theme: ThemeColors) =>
             borderRadius: 52,
         },
 
-        singleAvatarLarge: {
-            height: 80,
-            width: 80,
+        singleAvatarMediumLarge: {
+            height: 60,
+            width: 60,
             backgroundColor: theme.icon,
-            borderRadius: 52,
+            borderRadius: 80,
         },
 
         secondAvatar: {
@@ -2407,18 +2407,18 @@ const styles = (theme: ThemeColors) =>
 
         secondAvatarMedium: {
             position: 'absolute',
-            right: -42,
-            bottom: -42,
+            right: -36,
+            bottom: -36,
             borderWidth: 3,
             borderRadius: 52,
             borderColor: 'transparent',
         },
 
-        secondAvatarLarge: {
+        secondAvatarMediumLarge: {
             position: 'absolute',
-            right: -50,
-            bottom: -50,
-            borderWidth: 4,
+            right: -42,
+            bottom: -42,
+            borderWidth: 3,
             borderRadius: 80,
             borderColor: 'transparent',
         },

src/styles/utils/index.ts

@@ -100,6 +100,7 @@ const avatarBorderSizes: Partial<Record<AvatarSizeName, number>> = {
     [CONST.AVATAR_SIZE.MEDIUM]: variables.componentBorderRadiusLarge,
     [CONST.AVATAR_SIZE.LARGE]: variables.componentBorderRadiusLarge,
     [CONST.AVATAR_SIZE.X_LARGE]: variables.componentBorderRadiusLarge,
+    [CONST.AVATAR_SIZE.MEDIUM_LARGE]: variables.componentBorderRadiusLarge,
     [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.componentBorderRadiusRounded,
     [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.componentBorderRadiusMedium,
 };
@@ -115,6 +116,7 @@ const avatarSizes: Record<AvatarSizeName, AvatarSizeValue> = {
     [CONST.AVATAR_SIZE.X_LARGE]: variables.avatarSizeXLarge,
     [CONST.AVATAR_SIZE.MEDIUM]: variables.avatarSizeMedium,
     [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.avatarSizeLargeBordered,
+    [CONST.AVATAR_SIZE.MEDIUM_LARGE]: variables.avatarSizeMediumLarge,
     [CONST.AVATAR_SIZE.HEADER]: variables.avatarSizeHeader,
     [CONST.AVATAR_SIZE.MENTION_ICON]: variables.avatarSizeMentionIcon,
     [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.avatarSizeSmallNormal,
@@ -129,6 +131,7 @@ const avatarFontSizes: Partial<Record<AvatarSizeName, number>> = {
     [CONST.AVATAR_SIZE.SMALL]: variables.fontSizeSmall,
     [CONST.AVATAR_SIZE.SMALLER]: variables.fontSizeExtraSmall,
     [CONST.AVATAR_SIZE.LARGE]: variables.fontSizeXLarge,
+    [CONST.AVATAR_SIZE.MEDIUM_LARGE]: variables.fontSizeXLarge,
     [CONST.AVATAR_SIZE.MEDIUM]: variables.fontSizeMedium,
     [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.fontSizeXLarge,
 };
@@ -142,6 +145,7 @@ const avatarBorderWidths: Partial<Record<AvatarSizeName, number>> = {
     [CONST.AVATAR_SIZE.SMALLER]: 2,
     [CONST.AVATAR_SIZE.HEADER]: 2,
     [CONST.AVATAR_SIZE.LARGE]: 4,
+    [CONST.AVATAR_SIZE.MEDIUM_LARGE]: 3,
     [CONST.AVATAR_SIZE.X_LARGE]: 4,
     [CONST.AVATAR_SIZE.MEDIUM]: 3,
     [CONST.AVATAR_SIZE.LARGE_BORDERED]: 4,

src/styles/utils/types.ts

@@ -22,6 +22,7 @@ type AvatarSizeValue = ValueOf<
         | 'avatarSizeXLarge'
         | 'avatarSizeLarge'
         | 'avatarSizeMedium'
+        | 'avatarSizeMediumLarge'
         | 'avatarSizeLargeBordered'
         | 'avatarSizeHeader'
         | 'avatarSizeMentionIcon'

src/styles/variables.ts

@@ -35,6 +35,7 @@ export default {
     avatarSizeLargeBordered: 88,
     avatarSizeXLarge: 100,
     avatarSizeLarge: 80,
+    avatarSizeMediumLarge: 60,
     avatarSizeMedium: 52,
     avatarSizeHeader: 40,
     avatarSizeNormal: 40,