Merge pull request #14255 from Expensify/dangrous-embiggenavatars

Make avatars in chat welcome messages always big
Expensify · Jan 24, 2023 · 4d86f17 · 4d86f17
2 parents a10949d + bb3a7d1
commit 4d86f17
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 32 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -735,6 +735,7 @@ const CONST = {
         SMALLER: 'smaller',
         SUBSCRIPT: 'subscript',
         SMALL_SUBSCRIPT: 'small-subscript',
+        LARGE_BORDERED: 'large-bordered',
     },
     OPTION_MODE: {
         COMPACT: 'compact',

diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
@@ -12,14 +12,10 @@ import * as StyleUtils from '../styles/StyleUtils';
 const propTypes = {
     /** Array of avatar URLs or icons */
     icons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func])),
-
-    /** Whether show large Avatars */
-    shouldShowLargeAvatars: PropTypes.bool,
 };
 
 const defaultProps = {
     icons: [],
-    shouldShowLargeAvatars: false,
 };
 
 const RoomHeaderAvatars = (props) => {
@@ -38,32 +34,13 @@ const RoomHeaderAvatars = (props) => {
         );
     }
 
-    if (props.shouldShowLargeAvatars) {
-        return (
-            <View style={[styles.flexRow, styles.wAuto, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                <View style={styles.leftSideLargeAvatar}>
-                    <Avatar
-                        source={props.icons[1]}
-                        imageStyles={[styles.avatarLarge]}
-                        size={CONST.AVATAR_SIZE.LARGE}
-                        fill={themeColors.iconSuccessFill}
-                    />
-                </View>
-                <View style={[styles.rightSideLargeAvatar, StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)]}>
-                    <Avatar
-                        source={props.icons[0]}
-                        imageStyles={[styles.avatarLarge]}
-                        size={CONST.AVATAR_SIZE.LARGE}
-                    />
-                </View>
-            </View>
-        );
-    }
-
     const iconsToDisplay = props.icons.slice(0, CONST.REPORT.MAX_PREVIEW_AVATARS);
+
     const iconStyle = [
         styles.roomHeaderAvatar,
-        StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.MEDIUM),
+
+        // Due to border-box box-sizing, the Avatars have to be larger when bordered to visually match size with non-bordered Avatars
+        StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED),
     ];
     return (
         <View pointerEvents="none">

diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
@@ -121,7 +121,6 @@ class ReportDetailsPage extends Component {
                             <View style={styles.mb4}>
                                 <RoomHeaderAvatars
                                     icons={ReportUtils.getIcons(this.props.report, this.props.personalDetails, this.props.policies)}
-                                    shouldShowLargeAvatars={isPolicyExpenseChat}
                                 />
                             </View>
                             <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>

diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
@@ -36,7 +36,6 @@ const defaultProps = {
 };
 
 const ReportActionItemCreated = (props) => {
-    const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
     const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies);
     return (
         <OfflineWithFeedback
@@ -57,7 +56,6 @@ const ReportActionItemCreated = (props) => {
                     <Pressable onPress={() => ReportUtils.navigateToDetailsPage(props.report)}>
                         <RoomHeaderAvatars
                             icons={icons}
-                            shouldShowLargeAvatars={isPolicyExpenseChat}
                         />
                     </Pressable>
                     <ReportWelcomeText report={props.report} />

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -22,7 +22,9 @@ function getAvatarSize(size) {
         [CONST.AVATAR_SIZE.SMALLER]: variables.avatarSizeSmaller,
         [CONST.AVATAR_SIZE.LARGE]: variables.avatarSizeLarge,
         [CONST.AVATAR_SIZE.MEDIUM]: variables.avatarSizeMedium,
+        [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.avatarSizeLargeBordered,
     };
+
     return AVATAR_SIZES[size];
 }
 

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2006,15 +2006,18 @@ const styles = {
         left: 0,
         backgroundColor: themeColors.overlay,
         opacity: variables.overlayOpacity,
+        borderRadius: 88,
     },
 
     avatarInnerTextChat: {
         color: themeColors.textLight,
-        fontSize: variables.fontSizeNormal,
-        left: 1,
+        fontSize: variables.fontSizeXLarge,
+        fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
         textAlign: 'center',
         fontWeight: 'normal',
         position: 'absolute',
+        width: 88,
+        left: -16,
     },
 
     pageWrapper: {

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -27,6 +27,7 @@ export default {
     componentBorderRadiusRounded: 20,
     buttonBorderRadius: 100,
     avatarSizeLarge: 80,
+    avatarSizeLargeBordered: 88,
     avatarSizeMedium: 52,
     avatarSizeNormal: 40,
     avatarSizeSmall: 28,