Merge pull request #42735 from s77rt/AvatarWithImagePicker-styles

Fix AvatarWithImagePicker error styles
Expensify · May 29, 2024 · ee1196d · ee1196d
2 parents 9988663 + f40359a
commit ee1196d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 40 deletions.
diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx
@@ -303,12 +303,11 @@ function AvatarWithImagePicker({
     }, [isMenuVisible, windowWidth]);
 
     return (
-        <View style={StyleSheet.flatten([styles.alignItemsCenter, style])}>
+        <View style={style}>
             <View style={styles.w100}>
                 <OfflineWithFeedback
                     errors={errors}
                     errorRowStyles={errorRowStyles}
-                    style={type === CONST.ICON_TYPE_AVATAR && styles.alignItemsCenter}
                     onClose={onErrorClose}
                 >
                     <Tooltip
@@ -327,7 +326,7 @@ function AvatarWithImagePicker({
                             accessibilityLabel={translate('avatarWithImagePicker.editImage')}
                             disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
                             disabledStyle={disabledStyle}
-                            style={[styles.pRelative, avatarStyle]}
+                            style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}
                             ref={anchorRef}
                         >
                             <OfflineWithFeedback pendingAction={pendingAction}>

diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx
@@ -129,6 +129,7 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
                     editIcon={Expensicons.Camera}
                     editIconStyle={styles.smallEditIconAccount}
                     shouldUseStyleUtilityForAnchorPosition
+                    style={styles.w100}
                 />
             </View>
             <MenuItemWithTopDescription

diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
@@ -230,34 +230,51 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         />
     ) : null;
 
-    const renderAvatar =
-        isGroupChat && !isThread ? (
-            <AvatarWithImagePicker
-                source={icons[0].source}
-                avatarID={icons[0].id}
-                isUsingDefaultAvatar={!report.avatarUrl}
-                size={CONST.AVATAR_SIZE.XLARGE}
-                avatarStyle={styles.avatarXLarge}
-                shouldDisableViewPhoto
-                onImageRemoved={() => {
-                    // Calling this without a file will remove the avatar
-                    Report.updateGroupChatAvatar(report.reportID ?? '');
-                }}
-                onImageSelected={(file) => Report.updateGroupChatAvatar(report.reportID ?? '', file)}
-                editIcon={Expensicons.Camera}
-                editIconStyle={styles.smallEditIconAccount}
-                pendingAction={report.pendingFields?.avatar ?? undefined}
-                errors={report.errorFields?.avatar ?? null}
-                errorRowStyles={styles.mt6}
-                onErrorClose={() => Report.clearAvatarErrors(report.reportID ?? '')}
-                shouldUseStyleUtilityForAnchorPosition
-            />
-        ) : (
-            <RoomHeaderAvatars
-                icons={icons}
-                reportID={report?.reportID}
-            />
+    const renderAvatar = useMemo(() => {
+        if (isMoneyRequestReport || isInvoiceReport) {
+            return (
+                <View style={styles.mb3}>
+                    <MultipleAvatars
+                        icons={icons}
+                        size={CONST.AVATAR_SIZE.LARGE}
+                    />
+                </View>
+            );
+        }
+        if (isGroupChat && !isThread) {
+            return (
+                <AvatarWithImagePicker
+                    source={icons[0].source}
+                    avatarID={icons[0].id}
+                    isUsingDefaultAvatar={!report.avatarUrl}
+                    size={CONST.AVATAR_SIZE.XLARGE}
+                    avatarStyle={styles.avatarXLarge}
+                    shouldDisableViewPhoto
+                    onImageRemoved={() => {
+                        // Calling this without a file will remove the avatar
+                        Report.updateGroupChatAvatar(report.reportID ?? '');
+                    }}
+                    onImageSelected={(file) => Report.updateGroupChatAvatar(report.reportID ?? '', file)}
+                    editIcon={Expensicons.Camera}
+                    editIconStyle={styles.smallEditIconAccount}
+                    pendingAction={report.pendingFields?.avatar ?? undefined}
+                    errors={report.errorFields?.avatar ?? null}
+                    errorRowStyles={styles.mt6}
+                    onErrorClose={() => Report.clearAvatarErrors(report.reportID ?? '')}
+                    shouldUseStyleUtilityForAnchorPosition
+                    style={[styles.w100, styles.mb3]}
+                />
+            );
+        }
+        return (
+            <View style={styles.mb3}>
+                <RoomHeaderAvatars
+                    icons={icons}
+                    reportID={report?.reportID}
+                />
+            </View>
         );
+    }, [report, icons, isMoneyRequestReport, isInvoiceReport, isGroupChat, isThread, styles]);
 
     const reportName =
         ReportUtils.isDeprecatedGroupDM(report) || ReportUtils.isGroupChat(report)
@@ -273,16 +290,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 />
                 <ScrollView style={[styles.flex1]}>
                     <View style={styles.reportDetailsTitleContainer}>
-                        <View style={styles.mb3}>
-                            {isMoneyRequestReport || isInvoiceReport ? (
-                                <MultipleAvatars
-                                    icons={icons}
-                                    size={CONST.AVATAR_SIZE.LARGE}
-                                />
-                            ) : (
-                                renderAvatar
-                            )}
-                        </View>
+                        {renderAvatar}
                         <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
                             <View style={[styles.alignSelfCenter, styles.w100, styles.mt1]}>
                                 <DisplayNames