3 files changed, 51 insertions, 34 deletions

diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index 6633bd9b9..0a4840050 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -104,6 +104,11 @@ export default class Post extends React.Component {
             type = 'Comment';
         }
 
+        let hideControls = '';
+        if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) {
+            hideControls = 'post--hide-controls';
+        }
+
         const commentCount = this.props.commentCount;
 
         let rootUser;
@@ -113,13 +118,6 @@ export default class Post extends React.Component {
             rootUser = 'other--root';
         }
 
-        let postType = '';
-        if (type !== 'Post') {
-            postType = 'post--comment';
-        } else if (commentCount > 0) {
-            postType = 'post--root';
-        }
-
         let currentUserCss = '';
         if (this.props.currentUser.id === post.user_id && !post.props.from_webhook && !PostUtils.isSystemMessage(post)) {
             currentUserCss = 'current--user';
@@ -142,9 +140,22 @@ export default class Post extends React.Component {
             shouldHighlightClass = 'post--highlight';
         }
 
+        let postType = '';
+        if (type !== 'Post') {
+            postType = 'post--comment';
+        } else if (commentCount > 0) {
+            postType = 'post--root';
+            sameUserClass = '';
+            rootUser = '';
+        }
+
         let systemMessageClass = '';
         if (PostUtils.isSystemMessage(post)) {
             systemMessageClass = 'post--system';
+            sameUserClass = '';
+            currentUserCss = '';
+            postType = '';
+            rootUser = '';
         }
 
         let profilePic = (
@@ -170,18 +181,20 @@ export default class Post extends React.Component {
         }
 
         let compactClass = '';
+        let profilePicContainer = (<div className='post__img'>{profilePic}</div>);
         if (this.props.compactDisplay) {
             compactClass = 'post--compact';
+            profilePicContainer = '';
         }
 
         return (
             <div>
                 <div
                     id={'post_' + post.id}
-                    className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass}
+                    className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls}
                 >
                     <div className={'post__content ' + centerClass}>
-                        <div className='post__img'>{profilePic}</div>
+                        {profilePicContainer}
                         <div>
                             <PostHeader
                                 ref='header'
diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx
index 561860b65..a98c92017 100644
--- a/webapp/components/post_view/components/post_body.jsx
+++ b/webapp/components/post_view/components/post_body.jsx
@@ -4,6 +4,7 @@
 import FileAttachmentList from 'components/file_attachment_list.jsx';
 import UserStore from 'stores/user_store.jsx';
 import * as Utils from 'utils/utils.jsx';
+import * as GlobalActions from 'actions/global_actions.jsx';
 import Constants from 'utils/constants.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
@@ -16,6 +17,11 @@ import loadingGif from 'images/load.gif';
 import React from 'react';
 
 export default class PostBody extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.removePost = this.removePost.bind(this);
+    }
     shouldComponentUpdate(nextProps) {
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
@@ -44,6 +50,10 @@ export default class PostBody extends React.Component {
         return false;
     }
 
+    removePost() {
+        GlobalActions.emitRemovePost(this.props.post);
+    }
+
     render() {
         const post = this.props.post;
         const filenames = this.props.post.filenames;
@@ -144,12 +154,27 @@ export default class PostBody extends React.Component {
         }
 
         let message;
+        let removeButton;
         if (this.props.post.state === Constants.POST_DELETED) {
+            removeButton = (
+                <a
+                    href='#'
+                    className='post__remove theme'
+                    type='button'
+                    onClick={this.removePost}
+                >
+                    {'×'}
+                </a>
+            );
+
             message = (
-                <FormattedMessage
-                    id='post_body.deleted'
-                    defaultMessage='(message deleted)'
-                />
+                <p>
+                    <FormattedMessage
+                        id='post_body.deleted'
+                        defaultMessage='(message deleted)'
+                    />
+                    {removeButton}
+                </p>
             );
         } else {
             message = (
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 2a5ea6395..76d4df1cc 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -20,7 +20,6 @@ export default class PostInfo extends React.Component {
 
         this.dropdownPosition = this.dropdownPosition.bind(this);
         this.handlePermalink = this.handlePermalink.bind(this);
-        this.removePost = this.removePost.bind(this);
     }
     dropdownPosition(e) {
         var position = $('#post-list').height() - $(e.target).offset().top;
@@ -165,25 +164,6 @@ export default class PostInfo extends React.Component {
         GlobalActions.showGetPostLinkModal(this.props.post);
     }
 
-    removePost() {
-        GlobalActions.emitRemovePost(this.props.post);
-    }
-    createRemovePostButton(post) {
-        if (!Utils.isPostEphemeral(post)) {
-            return null;
-        }
-
-        return (
-            <a
-                href='#'
-                className='post__remove theme'
-                type='button'
-                onClick={this.removePost}
-            >
-                {'×'}
-            </a>
-        );
-    }
     render() {
         var post = this.props.post;
         var comments = '';
@@ -232,7 +212,6 @@ export default class PostInfo extends React.Component {
                         {dropdown}
                     </div>
                     {comments}
-                    {this.createRemovePostButton(post)}
                 </li>
             </ul>
         );