Fix spacing in compose metadata

src/components/ExceededCommentLength.js

@@ -1,27 +1,39 @@
 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) => {
     if (props.commentLength <= CONST.MAX_COMMENT_LENGTH) {
         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;

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(

src/pages/home/report/ParticipantLocalTime.js

@@ -1,21 +1,30 @@
 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';
 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,14 +60,15 @@ 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)
                 : this.props.participant.displayName);
 
         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);

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={[