[MM-11213] Fix post layout including line spacing for consecutive posts (#1947)

* Fix style issues with consecutive posts

 * Remove commented on message for immediate comment by
   same user.
 * Change replyBar to be on post and not on postHeader

* Fix padding on messages

* Fix date_header spacing

* Fix snapshots

* Change renderReplyBar variable name

app/components/post/index.js

@@ -30,12 +30,11 @@ function isConsecutivePost(state, ownProps) {
     if (previousPost) {
         const postFromWebhook = Boolean(post.props && post.props.from_webhook);
         const prevPostFromWebhook = Boolean(previousPost.props && previousPost.props.from_webhook);
-
         if (previousPost && previousPost.user_id === post.user_id &&
             post.create_at - previousPost.create_at <= Posts.POST_COLLAPSE_TIMEOUT &&
             !postFromWebhook && !prevPostFromWebhook &&
             !isSystemMessage(post) && !isSystemMessage(previousPost) &&
-            previousPost.root_id === post.root_id) {
+            (previousPost.root_id === post.root_id || previousPost.id === post.root_id)) {
             // The last post and this post were made by the same user within some time
             consecutivePost = true;
         }

app/components/post/post.js

@@ -19,7 +19,7 @@ import PostBody from 'app/components/post_body';
 import PostHeader from 'app/components/post_header';
 import PostProfilePicture from 'app/components/post_profile_picture';
 import {NavigationTypes} from 'app/constants';
-import {emptyFunction, fromAutoResponder} from 'app/utils/general';
+import {fromAutoResponder} from 'app/utils/general';
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import {getToolTipVisible} from 'app/utils/tooltip';
@@ -315,7 +315,7 @@ export default class Post extends PureComponent {
         return Boolean(renderReplies && post.root_id && !isPostEphemeral(post));
     };
 
-    renderReplyBar = () => {
+    replyBarStyle = () => {
         const {
             commentedOnPost,
             isFirstReply,
@@ -338,7 +338,7 @@ export default class Post extends PureComponent {
             replyBarStyle.push(style.replyBarLast);
         }
 
-        return <View style={replyBarStyle}/>;
+        return replyBarStyle;
     };
 
     viewUserProfile = preventDoubleTap(() => {
@@ -420,8 +420,7 @@ export default class Post extends PureComponent {
         let consecutiveStyle;
 
         if (mergeMessage) {
-            consecutiveStyle = {paddingBottom: 5};
-
+            consecutiveStyle = {marginTop: 0};
             if (isFlagged) {
                 userProfile = (
                     <View style={style.consecutivePostContainer}>
@@ -469,12 +468,12 @@ export default class Post extends PureComponent {
                 />
             );
         }
+        const replyBarStyle = this.replyBarStyle();
 
         return (
             <View style={[style.container, this.props.style, consecutiveStyle, highlighted, selected]}>
                 {userProfile}
                 <View style={style.messageContainerWithReplyBar}>
-                    {!commentedOnPost && this.renderReplyBar()}
                     <View style={[style.rightColumn, (commentedOnPost && isLastReply && style.rightColumnPadding)]}>
                         {postHeader}
                         <PostBody
@@ -494,7 +493,7 @@ export default class Post extends PureComponent {
                             onPostEdit={this.handlePostEdit}
                             onPress={this.handlePress}
                             postId={post.id}
-                            renderReplyBar={commentedOnPost ? this.renderReplyBar : emptyFunction}
+                            replyBarStyle={replyBarStyle}
                             toggleSelected={this.toggleSelected}
                             managedConfig={managedConfig}
                             isFlagged={isFlagged}
@@ -533,7 +532,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         consecutivePostContainer: {
             marginBottom: 10,
             marginRight: 10,
-            marginLeft: 46,
+            marginLeft: 47,
             marginTop: 10,
         },
         consecutivePostWithFlag: {
@@ -544,7 +543,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             left: -11,
         },
         profilePictureContainer: {
-            marginBottom: 10,
+            marginBottom: 5,
             marginRight: 10,
             marginLeft: 12,
             marginTop: 10,
@@ -552,7 +551,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         replyBar: {
             backgroundColor: theme.centerChannelColor,
             opacity: 0.1,
-            marginRight: 10,
+            marginRight: 7,
             width: 3,
             flexBasis: 3,
         },

app/components/post_body/post_body.js

@@ -69,7 +69,7 @@ export default class PostBody extends PureComponent {
         postId: PropTypes.string.isRequired,
         postProps: PropTypes.object,
         postType: PropTypes.string,
-        renderReplyBar: PropTypes.func,
+        replyBarStyle: PropTypes.func,
         showAddReaction: PropTypes.bool,
         showLongPost: PropTypes.bool.isRequired,
         theme: PropTypes.object,
@@ -85,7 +85,7 @@ export default class PostBody extends PureComponent {
         onPostDelete: emptyFunction,
         onPostEdit: emptyFunction,
         onPress: emptyFunction,
-        renderReplyBar: emptyFunction,
+        replyBarStyle: emptyFunction,
         toggleSelected: emptyFunction,
     };
 
@@ -408,7 +408,7 @@ export default class PostBody extends PureComponent {
             onPress,
             postProps,
             postType,
-            renderReplyBar,
+            replyBarStyle,
             theme,
             toggleSelected,
         } = this.props;
@@ -487,27 +487,29 @@ export default class PostBody extends PureComponent {
 
         if (!hasBeenDeleted) {
             body = (
-                <OptionsContext
-                    actions={this.getPostActions()}
-                    ref='options'
-                    onPress={onPress}
-                    toggleSelected={toggleSelected}
-                    cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})}
-                >
-                    <View onLayout={this.measurePost}>
-                        {messageComponent}
-                        {this.renderShowMoreOption(style)}
-                    </View>
-                    {this.renderPostAdditionalContent(blockStyles, messageStyle, textStyles)}
-                    {this.renderFileAttachments()}
-                    {this.renderReactions()}
-                </OptionsContext>
+                <View style={style.messageBody}>
+                    <OptionsContext
+                        actions={this.getPostActions()}
+                        ref='options'
+                        onPress={onPress}
+                        toggleSelected={toggleSelected}
+                        cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})}
+                    >
+                        <View onLayout={this.measurePost}>
+                            {messageComponent}
+                            {this.renderShowMoreOption(style)}
+                        </View>
+                        {this.renderPostAdditionalContent(blockStyles, messageStyle, textStyles)}
+                        {this.renderFileAttachments()}
+                        {this.renderReactions()}
+                    </OptionsContext>
+                </View>
             );
         }
 
         return (
             <View style={style.messageContainerWithReplyBar}>
-                {renderReplyBar()}
+                <View style={replyBarStyle}/>
                 <View style={[style.flex, style.row]}>
                     <View style={style.flex}>
                         {body}
@@ -538,6 +540,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         row: {
             flexDirection: 'row',
         },
+        messageBody: {
+            paddingBottom: 2,
+            paddingTop: 2,
+        },
         retry: {
             justifyContent: 'center',
             marginLeft: 12,

app/components/post_list/date_header/__snapshots__/date_header.test.js.snap

@@ -75,6 +75,7 @@ ShallowWrapper {
           "alignItems": "center",
           "flexDirection": "row",
           "height": 28,
+          "marginTop": 8,
         },
         undefined,
       ],
@@ -217,6 +218,7 @@ ShallowWrapper {
             "alignItems": "center",
             "flexDirection": "row",
             "height": 28,
+            "marginTop": 8,
           },
           undefined,
         ],
@@ -395,6 +397,7 @@ ShallowWrapper {
           "alignItems": "center",
           "flexDirection": "row",
           "height": 28,
+          "marginTop": 8,
         },
         undefined,
       ],
@@ -537,6 +540,7 @@ ShallowWrapper {
             "alignItems": "center",
             "flexDirection": "row",
             "height": 28,
+            "marginTop": 8,
           },
           undefined,
         ],

app/components/post_list/date_header/date_header.js

@@ -57,6 +57,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             alignItems: 'center',
             flexDirection: 'row',
             height: 28,
+            marginTop: 8,
         },
         dateContainer: {
             marginHorizontal: 15,