From 5554824757f2cafdd19a1ca00f35d94adffb9d40 Mon Sep 17 00:00:00 2001
From: Amy Evans <amy@expensify.com>
Date: Fri, 27 May 2022 16:22:05 -0400
Subject: [PATCH] Fix spacing in compose metadata

---
 src/components/ExceededCommentLength.js       | 14 +++++++++-
 src/components/OfflineIndicator.js            | 15 ++++++++++-
 src/pages/home/report/ParticipantLocalTime.js | 14 ++++++++--
 src/pages/home/report/ReportActionCompose.js  | 26 +++++--------------
 4 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js
index 91a1fcb87bbd..880f3a433aea 100644
--- a/src/components/ExceededCommentLength.js
+++ b/src/components/ExceededCommentLength.js
@@ -1,12 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import CONST from '../CONST';
 import Text from './Text';
 import styles from '../styles/styles';
+import stylePropTypes from '../styles/stylePropTypes';
 
 const propTypes = {
     /** The current length of the comment */
     commentLength: PropTypes.number.isRequired,
+
+    /** Additional style props */
+    style: stylePropTypes,
+};
+
+const defaultProps = {
+    style: [],
 };
 
 const ExceededCommentLength = (props) => {
@@ -14,14 +23,17 @@ const ExceededCommentLength = (props) => {
         return null;
     }
 
+    const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
+
     return (
-        <Text style={[styles.textMicro, styles.textDanger]}>
+        <Text style={[styles.textMicro, styles.textDanger, ...additionalStyles]}>
             {`${props.commentLength}/${CONST.MAX_COMMENT_LENGTH}`}
         </Text>
     );
 };
 
 ExceededCommentLength.propTypes = propTypes;
+ExceededCommentLength.defaultProps = defaultProps;
 ExceededCommentLength.displayName = 'ExceededCommentLength';
 
 export default ExceededCommentLength;
diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index 0126ca1ff9e9..282ad07e0d41 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import _ from 'underscore';
 import {withNetwork} from './OnyxProvider';
 import networkPropTypes from './networkPropTypes';
 import Icon from './Icon';
@@ -9,20 +10,31 @@ import Text from './Text';
 import styles from '../styles/styles';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import stylePropTypes from '../styles/stylePropTypes';
 
 const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    /** Additional style props */
+    style: stylePropTypes,
+
     ...withLocalizePropTypes,
 };
 
+const defaultProps = {
+    style: [],
+};
+
 const OfflineIndicator = (props) => {
     if (!props.network.isOffline) {
         return null;
     }
+
+    const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
+
     return (
-        <View style={[styles.flexRow]}>
+        <View style={[styles.flexRow, ...additionalStyles]}>
             <Icon
                 src={Expensicons.Offline}
                 width={variables.iconSizeExtraSmall}
@@ -36,6 +48,7 @@ const OfflineIndicator = (props) => {
 };
 
 OfflineIndicator.propTypes = propTypes;
+OfflineIndicator.defaultProps = defaultProps;
 OfflineIndicator.displayName = 'OfflineIndicator';
 
 export default compose(
diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
index 671749d690b0..409f17f8e15a 100644
--- a/src/pages/home/report/ParticipantLocalTime.js
+++ b/src/pages/home/report/ParticipantLocalTime.js
@@ -1,6 +1,7 @@
 import React, {PureComponent} from 'react';
 import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
+import _ from 'underscore';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import participantPropTypes from '../../../components/participantPropTypes';
@@ -8,14 +9,22 @@ import Text from '../../../components/Text';
 import Timers from '../../../libs/Timers';
 import CONST from '../../../CONST';
 import DateUtils from '../../../libs/DateUtils';
+import stylePropTypes from '../../../styles/stylePropTypes';
 
 const propTypes = {
     /** Personal details of the participant */
     participant: participantPropTypes.isRequired,
 
+    /** Additional style props */
+    style: stylePropTypes,
+
     ...withLocalizePropTypes,
 };
 
+const defaultProps = {
+    style: [],
+};
+
 class ParticipantLocalTime extends PureComponent {
     constructor(props) {
         super(props);
@@ -51,6 +60,7 @@ class ParticipantLocalTime extends PureComponent {
     }
 
     render() {
+        const additionalStyles = _.isArray(this.props.style) ? this.props.style : [this.props.style];
         const reportRecipientDisplayName = this.props.participant.firstName
             || (Str.isSMSLogin(this.props.participant.login)
                 ? this.props.toLocalPhone(this.props.participant.displayName)
@@ -58,7 +68,7 @@ class ParticipantLocalTime extends PureComponent {
 
         return (
             <Text
-                style={[styles.chatItemComposeSecondaryRowSubText]}
+                style={[styles.chatItemComposeSecondaryRowSubText, ...additionalStyles]}
                 numberOfLines={1}
             >
                 {this.props.translate(
@@ -74,5 +84,5 @@ class ParticipantLocalTime extends PureComponent {
 }
 
 ParticipantLocalTime.propTypes = propTypes;
-
+ParticipantLocalTime.defaultProps = defaultProps;
 export default withLocalize(ParticipantLocalTime);
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 017c0d0bd3db..918f80d82d15 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -444,25 +444,13 @@ class ReportActionCompose extends React.Component {
 
         return (
             <View style={[styles.chatItemComposeWithFirstRow]}>
-                <View style={[styles.flexRow, styles.chatItemComposeSecondaryRow, styles.chatItemComposeSecondaryRowOffset, styles.flexWrap]}>
-                    {shouldShowReportRecipientLocalTime
-                        && (
-                            <View style={[styles.mr3]}>
-                                <ParticipantLocalTime participant={reportRecipient} />
-                            </View>
-                        )}
-
-                    <View style={[styles.mr3]}>
-                        <OfflineIndicator />
-                    </View>
-
-                    <View style={[styles.mr3]}>
-                        <ExceededCommentLength commentLength={this.comment.length} />
-                    </View>
-
-                    <View style={[styles.mr3]}>
-                        <ReportTypingIndicator reportID={this.props.reportID} />
-                    </View>
+                <View style={[styles.flexRow, styles.chatItemComposeSecondaryRow, styles.chatItemComposeSecondaryRowOffset, styles.flexWrap, styles.tester]}>
+                    {shouldShowReportRecipientLocalTime && (
+                        <ParticipantLocalTime participant={reportRecipient} style={[styles.mr3]} />
+                    )}
+                    <OfflineIndicator style={[styles.mr3]} />
+                    <ExceededCommentLength commentLength={this.comment.length} style={[styles.mr3]} />
+                    <ReportTypingIndicator reportID={this.props.reportID} />
                 </View>
 
                 <View style={[