Merge pull request #49555 from BhuvaneshPatil/49435-change-avatar-size

chore: change size of avatar to 100x100 for react action item created
Expensify · Oct 6, 2024 · 6155703 · 6155703
2 parents 134bbd0 + 4ff1aad
commit 6155703
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
@@ -54,6 +54,9 @@ type MultipleAvatarsProps = {
 
     /** Prop to limit the amount of avatars displayed horizontally */
     maxAvatarsInRow?: number;
+
+    /** Prop to limit the amount of avatars displayed horizontally */
+    overlapDivider?: number;
 };
 
 type AvatarStyles = {
@@ -79,6 +82,7 @@ function MultipleAvatars({
     shouldShowTooltip = true,
     shouldUseCardBackground = false,
     maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
+    overlapDivider = 3,
 }: MultipleAvatarsProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -167,7 +171,7 @@ function MultipleAvatars({
 
     const oneAvatarSize = StyleUtils.getAvatarStyle(size);
     const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0;
-    const overlapSize = oneAvatarSize.width / 3;
+    const overlapSize = oneAvatarSize.width / overlapDivider;
 
     if (shouldStackHorizontally) {
         // Height of one avatar + border space

diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx
@@ -6,7 +6,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import ReportWelcomeText from '@components/ReportWelcomeText';
 import useLocalize from '@hooks/useLocalize';
-import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -24,14 +23,14 @@ type ReportActionItemCreatedProps = {
     // eslint-disable-next-line react/no-unused-prop-types
     policyID: string | undefined;
 };
-function ReportActionItemCreated({policyID, reportID}: ReportActionItemCreatedProps) {
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
-    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
-    const policy = usePolicy(policyID);
+function ReportActionItemCreated({reportID, policyID}: ReportActionItemCreatedProps) {
     const styles = useThemeStyles();
 
     const {translate} = useLocalize();
-    const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
     const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`);
 
     if (!ReportUtils.isChatReport(report)) {
@@ -68,7 +67,8 @@ function ReportActionItemCreated({policyID, reportID}: ReportActionItemCreatedPr
                         >
                             <MultipleAvatars
                                 icons={icons}
-                                size={isLargeScreenWidth || (icons && icons.length < 3) ? CONST.AVATAR_SIZE.LARGE : CONST.AVATAR_SIZE.MEDIUM}
+                                size={CONST.AVATAR_SIZE.XLARGE}
+                                overlapDivider={4}
                                 shouldStackHorizontally
                                 shouldDisplayAvatarsInRows={shouldUseNarrowLayout}
                                 maxAvatarsInRow={shouldUseNarrowLayout ? CONST.AVATAR_ROW_SIZE.DEFAULT : CONST.AVATAR_ROW_SIZE.LARGE_SCREEN}

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -132,6 +132,7 @@ const avatarBorderWidths: Partial<Record<AvatarSizeName, number>> = {
     [CONST.AVATAR_SIZE.SMALL]: 2,
     [CONST.AVATAR_SIZE.SMALLER]: 2,
     [CONST.AVATAR_SIZE.LARGE]: 4,
+    [CONST.AVATAR_SIZE.XLARGE]: 4,
     [CONST.AVATAR_SIZE.MEDIUM]: 3,
     [CONST.AVATAR_SIZE.LARGE_BORDERED]: 4,
 };