Merge pull request #28323 from Pujan92/fix/27523

Fix: Web - Room - Stacked avatars on sign-in banner do not match and are misaligned in public room thread
Expensify · Oct 11, 2023 · 2cf9616 · 2cf9616
2 parents fa34d33 + 4a17110
commit 2cf9616
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 28 deletions.
diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js
@@ -6,22 +6,26 @@ import AvatarWithDisplayName from './AvatarWithDisplayName';
 import ExpensifyWordmark from './ExpensifyWordmark';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import reportPropTypes from '../pages/reportPropTypes';
-import CONST from '../CONST';
 import styles from '../styles/styles';
 import * as Session from '../libs/actions/Session';
+import participantPropTypes from './participantPropTypes';
 
 const propTypes = {
     /** The report currently being looked at */
     report: reportPropTypes,
 
     isSmallSizeLayout: PropTypes.bool,
 
+    /** Personal details of all the users */
+    personalDetails: PropTypes.objectOf(participantPropTypes),
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     report: {},
     isSmallSizeLayout: false,
+    personalDetails: {},
 };
 
 function AnonymousReportFooter(props) {
@@ -30,7 +34,7 @@ function AnonymousReportFooter(props) {
             <View style={[styles.flexRow, styles.flexShrink1]}>
                 <AvatarWithDisplayName
                     report={props.report}
-                    size={CONST.AVATAR_SIZE.MEDIUM}
+                    personalDetails={props.personalDetails}
                     isAnonymous
                 />
             </View>

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
@@ -85,31 +85,8 @@ const avatarSizeToStylesMap = {
         secondAvatarStyles: styles.secondAvatar,
     },
 };
-
-function getContainerStyles(size, isInReportAction) {
-    let containerStyles;
-
-    switch (size) {
-        case CONST.AVATAR_SIZE.SMALL:
-            containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall];
-            break;
-        case CONST.AVATAR_SIZE.SMALLER:
-            containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller];
-            break;
-        case CONST.AVATAR_SIZE.MEDIUM:
-            containerStyles = [styles.emptyAvatarMedium, styles.emptyAvatarMargin];
-            break;
-        case CONST.AVATAR_SIZE.LARGE:
-            containerStyles = [styles.emptyAvatarLarge, styles.mb2, styles.mr2];
-            break;
-        default:
-            containerStyles = [styles.emptyAvatar, isInReportAction ? styles.emptyAvatarMarginChat : styles.emptyAvatarMargin];
-    }
-
-    return containerStyles;
-}
 function MultipleAvatars(props) {
-    let avatarContainerStyles = getContainerStyles(props.size, props.isInReportAction);
+    let avatarContainerStyles = StyleUtils.getContainerStyles(props.size, props.isInReportAction);
     const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[props.size] || avatarSizeToStylesMap.default, [props.size]);
 
     const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : [''];

diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js
@@ -43,7 +43,7 @@ const defaultProps = {
 function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, noMargin, showTooltip}) {
     const isSmall = size === CONST.AVATAR_SIZE.SMALL;
     const subscriptStyle = size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.secondAvatarSubscriptSmallNormal : styles.secondAvatarSubscript;
-    const containerStyle = isSmall ? styles.emptyAvatarSmall : styles.emptyAvatar;
+    const containerStyle = StyleUtils.getContainerStyles(size);
     // Default the margin style to what is normal for small or normal sized avatars
     let marginStyle = isSmall ? styles.emptyAvatarMarginSmall : styles.emptyAvatarMargin;
 

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
@@ -438,6 +438,7 @@ function ReportScreen({
                                         isComposerFullSize={isComposerFullSize}
                                         onSubmitComment={onSubmitComment}
                                         policies={policies}
+                                        personalDetails={personalDetails}
                                     />
                                 ) : (
                                     <ReportFooter isReportReadyForDisplay={false} />

diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
@@ -18,6 +18,7 @@ import reportActionPropTypes from './reportActionPropTypes';
 import reportPropTypes from '../../reportPropTypes';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import * as Session from '../../../libs/actions/Session';
+import participantPropTypes from '../../../components/participantPropTypes';
 
 const propTypes = {
     /** Report object for the current report */
@@ -32,6 +33,9 @@ const propTypes = {
     /** The pending action when we are adding a chat */
     pendingAction: PropTypes.string,
 
+    /** Personal details of all the users */
+    personalDetails: PropTypes.objectOf(participantPropTypes),
+
     /** Whether the composer input should be shown */
     shouldShowComposeInput: PropTypes.bool,
 
@@ -49,6 +53,7 @@ const defaultProps = {
     reportActions: [],
     onSubmitComment: () => {},
     pendingAction: null,
+    personalDetails: {},
     shouldShowComposeInput: true,
     shouldDisableCompose: false,
     isReportReadyForDisplay: true,
@@ -71,6 +76,7 @@ function ReportFooter(props) {
                         <AnonymousReportFooter
                             report={props.report}
                             isSmallSizeLayout={isSmallSizeLayout}
+                            personalDetails={props.personalDetails}
                         />
                     )}
                     {isArchivedRoom && <ArchivedReportFooter report={props.report} />}

diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
@@ -1239,6 +1239,29 @@ function getAmountFontSizeAndLineHeight(baseFontSize: number, baseLineHeight: nu
     };
 }
 
+/**
+ * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar
+ */
+function getContainerStyles(size: string, isInReportAction = false): Array<ViewStyle | CSSProperties> {
+    let containerStyles: Array<ViewStyle | CSSProperties>;
+
+    switch (size) {
+        case CONST.AVATAR_SIZE.SMALL:
+            containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall];
+            break;
+        case CONST.AVATAR_SIZE.SMALLER:
+            containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller];
+            break;
+        case CONST.AVATAR_SIZE.MEDIUM:
+            containerStyles = [styles.emptyAvatarMedium, styles.emptyAvatarMargin];
+            break;
+        default:
+            containerStyles = [styles.emptyAvatar, isInReportAction ? styles.emptyAvatarMarginChat : styles.emptyAvatarMargin];
+    }
+
+    return containerStyles;
+}
+
 /**
  * Get transparent color by setting alpha value 0 of the passed hex(#xxxxxx) color code
  */
@@ -1323,6 +1346,7 @@ export {
     getCheckboxContainerStyle,
     getDropDownButtonHeight,
     getAmountFontSizeAndLineHeight,
+    getContainerStyles,
     getTransparentColor,
     getEReceiptColor,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2274,7 +2274,7 @@ const styles = (theme) => ({
             justifyContent: 'space-between',
         }),
         padding: 20,
-        backgroundColor: theme.sidebar,
+        backgroundColor: theme.cardBG,
         borderRadius: variables.componentBorderRadiusLarge,
         overflow: 'hidden',
     }),