Merge pull request #8011 from Expensify/amal-fix-reportdetails-icons

Fix reportDetails icons for chatrooms

(cherry picked from commit d64f8c5)

Author: danieldoglas

src/pages/ReportDetailsPage.js

@@ -5,7 +5,7 @@ import Str from 'expensify-common/lib/str';
 import _ from 'underscore';
 import {View, ScrollView} from 'react-native';
 import lodashGet from 'lodash/get';
-import Avatar from '../components/Avatar';
+import RoomHeaderAvatars from '../components/RoomHeaderAvatars';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import ONYXKEYS from '../ONYXKEYS';
@@ -103,6 +103,7 @@ class ReportDetailsPage extends Component {
     }
 
     render() {
+        const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(this.props.report);
         const isChatRoom = ReportUtils.isChatRoom(this.props.report);
         const chatRoomSubtitle = ReportUtils.getChatRoomSubtitle(this.props.report, this.props.policies);
         const participants = lodashGet(this.props.report, 'participants', []);
@@ -131,13 +132,22 @@ class ReportDetailsPage extends Component {
                         <View
                             style={styles.reportDetailsTitleContainer}
                         >
+<<<<<<< HEAD
                             <Avatar
                                 isChatRoom={isChatRoom}
                                 isArchivedRoom={ReportUtils.isArchivedRoom(this.props.report)}
                                 containerStyles={[styles.singleAvatarLarge, styles.mb4]}
                                 imageStyles={[styles.singleAvatarLarge]}
                                 source={this.props.report.icons[0]}
                             />
+=======
+                            <View style={styles.mb4}>
+                                <RoomHeaderAvatars
+                                    avatarIcons={OptionsListUtils.getAvatarSources(this.props.report)}
+                                    shouldShowLargeAvatars={isPolicyExpenseChat}
+                                />
+                            </View>
+>>>>>>> d64f8c52c (Merge pull request #8011 from Expensify/amal-fix-reportdetails-icons)
                             <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
                                 <View style={[styles.alignSelfCenter, styles.w100]}>
                                     <DisplayNames

src/styles/styles.js

@@ -1495,14 +1495,6 @@ const styles = {
         borderRadius: 18,
     },
 
-    singleAvatarLarge: {
-        height: 64,
-        width: 64,
-        backgroundColor: themeColors.icon,
-        borderRadius: 64,
-        overflow: 'hidden',
-    },
-
     secondAvatar: {
         position: 'absolute',
         right: -18,
@@ -1752,7 +1744,7 @@ const styles = {
         ...flex.flexColumn,
         ...flex.alignItemsCenter,
         ...spacing.mt4,
-        height: 150,
+        height: 170,
     },
 
     reportDetailsRoomInfo: {