Merge pull request #18467 from Expensify/yuwen-mrmStyles

Fix styles for MoneyRequestHeader
Expensify · May 5, 2023 · 86dc736 · 86dc736
2 parents f63c16e + 7ad1e2d
commit 86dc736
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 69 deletions.
diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
@@ -51,59 +51,57 @@ const AvatarWithDisplayName = (props) => {
     const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForLogins([props.report.ownerEmail], props.personalDetails);
     const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(ownerPersonalDetails, false);
     return (
-        <View>
-            <View style={[styles.appContentHeaderTitle]}>
-                {Boolean(props.report && title) && (
-                    <View
+        <View style={[styles.appContentHeaderTitle, styles.flex1]}>
+            {Boolean(props.report && title) && (
+            <View
+                style={[
+                    styles.flexRow,
+                    styles.alignItemsCenter,
+                    styles.justifyContentBetween,
+                ]}
+            >
+                {isExpenseReport ? (
+                    <SubscriptAvatar
+                        mainAvatar={icons[0]}
+                        secondaryAvatar={icons[1]}
+                        mainTooltip={props.report.ownerEmail}
+                        secondaryTooltip={subtitle}
+                        size={props.size}
+                    />
+                ) : (
+                    <Avatar
+                        size={props.size}
+                        source={icons[0].source}
+                        type={icons[0].type}
+                        name={icons[0].name}
+                        containerStyles={props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar}
+                    />
+                )}
+                <View style={[styles.flex1, styles.flexColumn, styles.ml3]}>
+                    <DisplayNames
+                        fullTitle={title}
+                        displayNamesWithTooltips={displayNamesWithTooltips}
+                        tooltipEnabled
+                        numberOfLines={1}
+                        textStyles={[styles.headerText, styles.pre]}
+                        shouldUseFullTitle={isExpenseReport}
+                    />
+                    {!_.isEmpty(subtitle) && (
+                    <Text
                         style={[
-                            styles.flexRow,
-                            styles.alignItemsCenter,
-                            styles.justifyContentBetween,
+                            styles.sidebarLinkText,
+                            styles.optionAlternateText,
+                            styles.textLabelSupporting,
+                            styles.pre,
                         ]}
+                        numberOfLines={1}
                     >
-                        {isExpenseReport ? (
-                            <SubscriptAvatar
-                                mainAvatar={icons[0]}
-                                secondaryAvatar={icons[1]}
-                                mainTooltip={props.report.ownerEmail}
-                                secondaryTooltip={subtitle}
-                                size={props.size}
-                            />
-                        ) : (
-                            <Avatar
-                                size={props.size}
-                                source={icons[0].source}
-                                type={icons[0].type}
-                                name={icons[0].name}
-                                containerStyles={props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar}
-                            />
-                        )}
-                        <View style={[styles.flex1, styles.flexColumn]}>
-                            <DisplayNames
-                                fullTitle={title}
-                                displayNamesWithTooltips={displayNamesWithTooltips}
-                                tooltipEnabled
-                                numberOfLines={1}
-                                textStyles={[styles.headerText, styles.pre]}
-                                shouldUseFullTitle={isExpenseReport}
-                            />
-                            {!_.isEmpty(subtitle) && (
-                                <Text
-                                    style={[
-                                        styles.sidebarLinkText,
-                                        styles.optionAlternateText,
-                                        styles.textLabelSupporting,
-                                        styles.pre,
-                                    ]}
-                                    numberOfLines={1}
-                                >
-                                    {subtitle}
-                                </Text>
-                            )}
-                        </View>
-                    </View>
-                )}
+                        {subtitle}
+                    </Text>
+                    )}
+                </View>
             </View>
+            )}
         </View>
     );
 };

diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js
@@ -96,10 +96,6 @@ const propTypes = {
     /** Policies, if we're showing the details for a report and need participant details for AvatarWithDisplay */
     personalDetails: PropTypes.objectOf(participantPropTypes),
 
-    /** Additional styles to render on the container of this component */
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
     ...withLocalizePropTypes,
     ...withDelayToggleButtonStatePropTypes,
     ...keyboardStatePropTypes,
@@ -130,7 +126,6 @@ const defaultProps = {
         top: 0,
         left: 0,
     },
-    containerStyles: [],
 };
 
 class HeaderWithCloseButton extends Component {
@@ -155,7 +150,7 @@ class HeaderWithCloseButton extends Component {
 
     render() {
         return (
-            <View style={[styles.headerBar, this.props.shouldShowBorderBottom && styles.borderBottom, this.props.shouldShowBackButton && styles.pl2, ...this.props.containerStyles]}>
+            <View style={[styles.headerBar, this.props.shouldShowBorderBottom && styles.borderBottom, this.props.shouldShowBackButton && styles.pl2]}>
                 <View style={[
                     styles.dFlex,
                     styles.flexRow,
@@ -166,19 +161,19 @@ class HeaderWithCloseButton extends Component {
                 ]}
                 >
                     {this.props.shouldShowBackButton && (
-                        <Tooltip text={this.props.translate('common.back')}>
-                            <Pressable
-                                onPress={() => {
-                                    if (this.props.isKeyboardShown) {
-                                        Keyboard.dismiss();
-                                    }
-                                    this.props.onBackButtonPress();
-                                }}
-                                style={[styles.touchableButtonImage]}
-                            >
-                                <Icon src={Expensicons.BackArrow} />
-                            </Pressable>
-                        </Tooltip>
+                    <Tooltip text={this.props.translate('common.back')}>
+                        <Pressable
+                            onPress={() => {
+                                if (this.props.isKeyboardShown) {
+                                    Keyboard.dismiss();
+                                }
+                                this.props.onBackButtonPress();
+                            }}
+                            style={[styles.touchableButtonImage]}
+                        >
+                            <Icon src={Expensicons.BackArrow} />
+                        </Pressable>
+                    </Tooltip>
                     )}
                     {this.props.shouldShowAvatarWithDisplay && (
                         <AvatarWithDisplayName

diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
@@ -73,7 +73,6 @@ const MoneyRequestHeader = (props) => {
                 report={props.report}
                 policies={props.policies}
                 personalDetails={props.personalDetails}
-                containerStyles={[styles.pt5, styles.pb3, styles.pr1]}
                 shouldShowCloseButton={false}
                 shouldShowBackButton={props.isSmallScreenWidth}
                 onBackButtonPress={() => Navigation.navigate(ROUTES.HOME)}