[No QA] Unify avatar sizes

src/CONST/index.ts

@@ -4505,21 +4505,18 @@ const CONST = {
     },
 
     AVATAR_SIZE: {
-        X_LARGE: 'xlarge',
-        LARGE: 'large',
-        MEDIUM: 'medium',
-        DEFAULT: 'default',
+        XXXX_SMALL: 'xxxx-small',
+        XXX_SMALL: 'xxx-small',
+        XX_SMALL: 'xx-small',
+        X_SMALL: 'x-small',
         SMALL: 'small',
-        SMALLER: 'smaller',
-        SUBSCRIPT: 'subscript',
-        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',
-        LARGE_NORMAL: 'large-normal',
+        // The default avatar size, mapping to the medium avatar dimensions (variables.avatarSizeMedium)
+        DEFAULT: 'medium',
+        LARGE: 'large',
+        X_LARGE: 'x-large',
+        XX_LARGE: 'xx-large',
+        XXX_LARGE: 'xxx-large',
+        XXXX_LARGE: 'xxxx-large',
     },
 
     COMPANY_CARD: {

src/components/AccountManagerBookCallButton.tsx

@@ -74,7 +74,7 @@ function AccountManagerBookCallButton({calendarLink, accountManagerAccountID, is
                     avatarID={accountManagerAccountID}
                     name={accountManagerDetails?.displayName ?? accountManagerDetails?.login}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
                 <Text style={[styles.buttonText, styles.buttonMediumText]}>{label}</Text>
             </View>

src/components/Attachments/AttachmentView/index.tsx

@@ -220,7 +220,7 @@ function AttachmentView({
             return (
                 <MultiGestureIcon
                     src={source}
-                    contentSize={{width: variables.defaultAvatarPreviewSize, height: variables.defaultAvatarPreviewSize}}
+                    contentSize={{width: variables.avatarPreview, height: variables.avatarPreview}}
                     fill={iconFillColor}
                     additionalStyles={additionalStyles}
                 />
@@ -230,8 +230,8 @@ function AttachmentView({
         return (
             <Icon
                 src={source}
-                height={variables.defaultAvatarPreviewSize}
-                width={variables.defaultAvatarPreviewSize}
+                height={variables.avatarPreview}
+                width={variables.avatarPreview}
                 fill={iconFillColor}
                 additionalStyles={additionalStyles}
             />

src/components/AvatarButtonWithIcon.tsx

@@ -28,7 +28,7 @@ type AvatarButtonWithIconProps = WithSentryLabel & {
     text: string;
 
     /** Style applied to the avatar */
-    avatarStyle: StyleProp<ViewStyle & ImageStyle>;
+    avatarStyle?: StyleProp<ViewStyle & ImageStyle>;
 
     /** Executed on click */
     onPress: () => void;
@@ -52,7 +52,7 @@ type AvatarButtonWithIconProps = WithSentryLabel & {
     DefaultAvatar?: () => React.ReactNode;
 
     /** Size of Indicator */
-    size?: typeof CONST.AVATAR_SIZE.X_LARGE | typeof CONST.AVATAR_SIZE.LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
+    size?: typeof CONST.AVATAR_SIZE.XXXX_LARGE | typeof CONST.AVATAR_SIZE.XXX_LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon?: AvatarSource;

src/components/AvatarSelector.tsx

@@ -36,7 +36,7 @@ const SPACER_SIZE = 10;
 /**
  * AvatarSelector — renders a grid of selectable avatars.
  */
-function AvatarSelector({selectedID, onSelect, label, size = CONST.AVATAR_SIZE.MEDIUM}: AvatarSelectorProps) {
+function AvatarSelector({selectedID, onSelect, label, size = CONST.AVATAR_SIZE.X_LARGE}: AvatarSelectorProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();

src/components/HeaderWithBackButton/index.tsx

@@ -289,7 +289,7 @@ function HeaderWithBackButton({
                 )}
                 {!!policyAvatar && (
                     <Avatar
-                        containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]}
+                        containerStyles={styles.mr3}
                         source={policyAvatar?.source}
                         name={policyAvatar?.name}
                         avatarID={policyAvatar?.id}

src/components/ImportedFromAccountingSoftware.tsx

@@ -69,7 +69,7 @@ function ImportedFromAccountingSoftware({policyID, currentConnectionName, transl
                             src={icon}
                             height={variables.iconSizeMedium}
                             width={variables.iconSizeMedium}
-                            additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.SMALLER, ''), styles.appBG]}
+                            additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.X_SMALL, ''), styles.appBG]}
                         />
                     ) : undefined
                 }

src/components/MentionSuggestions.tsx

@@ -97,7 +97,7 @@ function MentionSuggestions({
                         <View style={styles.mentionSuggestionsAvatarContainer}>
                             <Avatar
                                 source={item.icons.at(0)?.source}
-                                size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
+                                size={isIcon ? CONST.AVATAR_SIZE.XXX_SMALL : CONST.AVATAR_SIZE.X_SMALL}
                                 name={item.icons.at(0)?.name}
                                 avatarID={item.icons.at(0)?.id}
                                 type={item.icons.at(0)?.type ?? CONST.ICON_TYPE_AVATAR}

src/components/OnboardingHelpDropdownButton.tsx

@@ -2,15 +2,14 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import {openExternalLink} from '@libs/actions/Link';
 import {cancelBooking, clearBookingDraft, rescheduleBooking} from '@libs/actions/ScheduleCall';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 
-import variables from '@styles/variables';
-
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -45,7 +44,10 @@ const reportNameValuePartsSelector = (reportNameValuePairs?: ReportNameValuePair
 
 function OnboardingHelpDropdownButton({reportID, shouldUseNarrowLayout, shouldShowRegisterForWebinar, shouldShowGuideBooking, hasActiveScheduledCall}: OnboardingHelpButtonProps) {
     const {translate} = useLocalize();
-    const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: accountIDSelector});
+    const StyleUtils = useStyleUtils();
+    const [accountID] = useOnyx(ONYXKEYS.SESSION, {
+        selector: accountIDSelector,
+    });
 
     const [latestScheduledCall] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportID}`, {
         selector: reportNameValuePartsSelector,
@@ -92,12 +94,12 @@ function OnboardingHelpDropdownButton({reportID, shouldUseNarrowLayout, shouldSh
             descriptionTextStyle: [styles.themeTextColor, styles.ml2],
             displayInDefaultIconColor: true,
             icon: illustrations.HeadSet,
-            iconWidth: variables.avatarSizeLargeNormal,
-            iconHeight: variables.avatarSizeLargeNormal,
+            iconWidth: StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.LARGE),
+            iconHeight: StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.LARGE),
             wrapperStyle: [styles.mb3, styles.pl4, styles.pr5, styles.pt3, styles.pb6, styles.borderBottom],
             interactive: false,
             titleStyle: styles.ml2,
-            avatarSize: CONST.AVATAR_SIZE.LARGE_NORMAL,
+            avatarSize: CONST.AVATAR_SIZE.LARGE,
         });
         options.push({
             text: translate('common.reschedule'),

src/components/ReceiptEmptyState.tsx

@@ -1,6 +1,7 @@
 import useFilesValidation from '@hooks/useFilesValidation';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -85,6 +86,7 @@ function ReceiptEmptyState({
     setReceiptFile = () => {},
 }: ReceiptEmptyStateProps) {
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const theme = useTheme();
     const isLoadedRef = useRef(false);
@@ -164,11 +166,11 @@ function ReceiptEmptyState({
                                         height={variables.eReceiptEmptyIconWidth}
                                     />
                                     {!isThumbnail && (
-                                        <View style={[styles.moneyRequestAttachReceiptThumbnailIcon, {width: variables.avatarSizeSmall, height: variables.avatarSizeSmall}]}>
+                                        <View style={[styles.moneyRequestAttachReceiptThumbnailIcon, StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.SMALL))]}>
                                             <ReceiptPlaceholderPlusIcon
                                                 circleFill={theme.success}
                                                 plusFill={theme.receiptPlaceholderPlus}
-                                                size={variables.avatarSizeSmall}
+                                                size={StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.SMALL)}
                                             />
                                         </View>
                                     )}

src/components/ReportActionAvatars/ReportActionAvatar.tsx

@@ -70,7 +70,7 @@ type AvatarStyles = {
     secondAvatarStyles: ViewStyle & ImageStyle;
 };
 
-type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_SIZE.LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
+type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_SIZE.XXX_LARGE | typeof CONST.AVATAR_SIZE.XXXX_LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
 
 type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;
 
@@ -206,21 +206,17 @@ function ReportActionAvatarSubscript({
 
     const subscriptAvatarStyle = useMemo(() => {
         if (size === CONST.AVATAR_SIZE.SMALL) {
-            return styles.secondAvatarSubscriptCompact;
+            return styles.secondAvatarSubscriptSmall;
         }
 
-        if (size === CONST.AVATAR_SIZE.SMALL_NORMAL) {
-            return styles.secondAvatarSubscriptSmallNormal;
-        }
-
-        if (size === CONST.AVATAR_SIZE.X_LARGE) {
-            return styles.secondAvatarSubscriptXLarge;
+        if (size === CONST.AVATAR_SIZE.XXXX_LARGE) {
+            return styles.secondAvatarSubscriptXxxxLarge;
         }
 
         return styles.secondAvatarSubscript;
     }, [size, styles]);
 
-    const subscriptAvatarSize = size === CONST.AVATAR_SIZE.X_LARGE ? CONST.AVATAR_SIZE.HEADER : CONST.AVATAR_SIZE.SUBSCRIPT;
+    const subscriptAvatarSize = size === CONST.AVATAR_SIZE.XXXX_LARGE ? CONST.AVATAR_SIZE.DEFAULT : CONST.AVATAR_SIZE.XX_SMALL;
 
     return (
         <View
@@ -239,7 +235,6 @@ function ReportActionAvatarSubscript({
                 <View>
                     <ProfileAvatar
                         useProfileNavigationWrapper={useProfileNavigationWrapper}
-                        containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(size || CONST.AVATAR_SIZE.DEFAULT))}
                         source={primaryAvatar.source}
                         size={size}
                         name={primaryAvatar.name}
@@ -257,15 +252,18 @@ function ReportActionAvatarSubscript({
                     accountID={Number(secondaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
                     icon={secondaryAvatar}
                 >
-                    <View style={[size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.flex1 : {}, subscriptAvatarStyle]}>
+                    <View style={subscriptAvatarStyle}>
                         <ProfileAvatar
                             useProfileNavigationWrapper={useProfileNavigationWrapper}
                             iconAdditionalStyles={[
-                                StyleUtils.getAvatarBorderWidth(isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : subscriptAvatarSize),
+                                // The medium subscript on a xxxx-large avatar keeps the small border width (as before the size migration) — the default border width for its size is 1px thicker and would shrink the visible avatar.
+                                size === CONST.AVATAR_SIZE.XXXX_LARGE
+                                    ? StyleUtils.getAvatarBorderWidth(CONST.AVATAR_SIZE.SMALL)
+                                    : StyleUtils.getAvatarBorderWidth(isSmall ? CONST.AVATAR_SIZE.XXXX_SMALL : subscriptAvatarSize),
                                 StyleUtils.getBorderColorStyle(subscriptAvatarBorderColor ?? theme.componentBG),
                             ]}
                             source={secondaryAvatar.source}
-                            size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : subscriptAvatarSize}
+                            size={isSmall ? CONST.AVATAR_SIZE.XXXX_SMALL : subscriptAvatarSize}
                             fill={secondaryAvatar.fill}
                             name={secondaryAvatar.name}
                             avatarID={secondaryAvatar.id}
@@ -280,7 +278,6 @@ function ReportActionAvatarSubscript({
             {!!subscriptCardFeed && (
                 <View
                     style={[
-                        size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.flex1 : {},
                         // Nullish coalescing thinks that empty strings are truthy, thus I'm using OR operator
                         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                         StyleUtils.getBorderColorStyle(subscriptAvatarBorderColor || theme.sidebar),
@@ -336,8 +333,7 @@ function ReportActionAvatarMultipleHorizontal({
 
     const oneAvatarSize = StyleUtils.getAvatarStyle(size);
     const overlapSize = oneAvatarSize.width / overlapDivider;
-    const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0;
-    const height = oneAvatarSize.height + 2 * oneAvatarBorderWidth;
+    const height = StyleUtils.getAvatarSizeWithBorder(size);
     const avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height)]);
 
     const icons = useMemo(() => {
@@ -439,7 +435,7 @@ function ReportActionAvatarMultipleHorizontal({
 
                             // Set overlay background color with RGBA value so that the text will not inherit opacity
                             StyleUtils.getBackgroundColorWithOpacityStyle(theme.overlay, variables.overlayOpacity),
-                            StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
+                            StyleUtils.getHorizontalStackedOverlayAvatarStyle(size),
                             icons.at(3)?.type === CONST.ICON_TYPE_WORKSPACE && StyleUtils.getAvatarBorderRadius(size, icons.at(3)?.type),
                         ]}
                     >
@@ -488,48 +484,51 @@ function ReportActionAvatarMultipleDiagonal({
         () => (shouldShowTooltip ? icons.map((icon) => getUserDetailTooltipText(Number(icon.id), formatPhoneNumber, translate, icon.name)) : ['']),
         [shouldShowTooltip, icons, formatPhoneNumber, translate],
     );
-    const removeRightMargin = icons.length === 2 && size === CONST.AVATAR_SIZE.X_LARGE;
+    const removeRightMargin = icons.length === 2 && size === CONST.AVATAR_SIZE.XXXX_LARGE;
     const avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
 
     const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo(
         () => ({
             [CONST.AVATAR_SIZE.SMALL]: {
-                singleAvatarStyle: styles.singleAvatarSmall,
-                secondAvatarStyles: styles.secondAvatarSmall,
+                singleAvatarStyle: styles.singleAvatarXxxSmall,
+                secondAvatarStyles: styles.secondAvatarXxxSmall,
             },
-            [CONST.AVATAR_SIZE.LARGE]: {
-                singleAvatarStyle: styles.singleAvatarMedium,
-                secondAvatarStyles: styles.secondAvatarMedium,
+            [CONST.AVATAR_SIZE.XXX_LARGE]: {
+                singleAvatarStyle: styles.singleAvatarXLarge,
+                secondAvatarStyles: styles.secondAvatarXLarge,
             },
-            [CONST.AVATAR_SIZE.X_LARGE]: {
-                singleAvatarStyle: styles.singleAvatarMediumLarge,
-                secondAvatarStyles: styles.secondAvatarMediumLarge,
+            [CONST.AVATAR_SIZE.XXXX_LARGE]: {
+                singleAvatarStyle: styles.singleAvatarXxLarge,
+                secondAvatarStyles: styles.secondAvatarXxLarge,
             },
             [CONST.AVATAR_SIZE.DEFAULT]: {
-                singleAvatarStyle: styles.singleAvatar,
-                secondAvatarStyles: styles.secondAvatar,
+                singleAvatarStyle: styles.singleAvatarXSmall,
+                secondAvatarStyles: styles.secondAvatarXSmall,
             },
         }),
         [styles],
     );
 
     const avatarSize = useMemo(() => {
         if (useMidSubscriptSize) {
-            return CONST.AVATAR_SIZE.MID_SUBSCRIPT;
+            return CONST.AVATAR_SIZE.XXX_SMALL;
         }
 
-        if (size === CONST.AVATAR_SIZE.LARGE) {
-            return CONST.AVATAR_SIZE.MEDIUM;
+        if (size === CONST.AVATAR_SIZE.XXX_LARGE) {
+            return CONST.AVATAR_SIZE.X_LARGE;
         }
 
-        if (size === CONST.AVATAR_SIZE.X_LARGE) {
-            return CONST.AVATAR_SIZE.MEDIUM_LARGE;
+        if (size === CONST.AVATAR_SIZE.XXXX_LARGE) {
+            return CONST.AVATAR_SIZE.XX_LARGE;
         }
 
-        return CONST.AVATAR_SIZE.SMALLER;
+        return CONST.AVATAR_SIZE.X_SMALL;
     }, [useMidSubscriptSize, size]);
 
-    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
+    const {singleAvatarStyle, secondAvatarStyles} = useMemo(
+        () => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap[CONST.AVATAR_SIZE.DEFAULT],
+        [size, avatarSizeToStylesMap],
+    );
     const secondaryAvatarContainerStyles = secondaryAvatarContainerStyle ?? [StyleUtils.getBackgroundAndBorderStyle(isHovered ? theme.activeComponentBG : theme.componentBG)];
 
     return (

src/components/ReportActionItem/TaskView.tsx

@@ -276,7 +276,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
                                     title={getDisplayNameForParticipant({accountID: report.managerID, formatPhoneNumber, translate})}
                                     iconAccountID={report.managerID}
                                     iconType={CONST.ICON_TYPE_AVATAR}
-                                    avatarSize={CONST.AVATAR_SIZE.SMALLER}
+                                    avatarSize={CONST.AVATAR_SIZE.X_SMALL}
                                     titleStyle={styles.assigneeTextStyle}
                                     onPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.TASK_ASSIGNEE.path))}
                                     shouldShowRightIcon={!isDisableInteractive}