1 files changed, 25 insertions, 3 deletions

diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx
index 3d3d9e13f..0a37a6803 100644
--- a/web/react/components/rhs_root_post.jsx
+++ b/web/react/components/rhs_root_post.jsx
@@ -6,12 +6,14 @@ import UserProfile from './user_profile.jsx';
 import UserStore from '../stores/user_store.jsx';
 import * as TextFormatting from '../utils/text_formatting.jsx';
 import * as utils from '../utils/utils.jsx';
+import * as Emoji from '../utils/emoticons.jsx';
 import FileAttachmentList from './file_attachment_list.jsx';
 import twemoji from 'twemoji';
-import Constants from '../utils/constants.jsx';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 
+import Constants from '../utils/constants.jsx';
+
 export default class RhsRootPost extends React.Component {
     constructor(props) {
         super(props);
@@ -21,7 +23,11 @@ export default class RhsRootPost extends React.Component {
         this.state = {};
     }
     parseEmojis() {
-        twemoji.parse(ReactDOM.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+        twemoji.parse(ReactDOM.findDOMNode(this), {
+            className: 'emoji twemoji',
+            base: '',
+            folder: Emoji.getImagePathForEmoticon()
+        });
     }
     componentDidMount() {
         this.parseEmojis();
@@ -54,6 +60,11 @@ export default class RhsRootPost extends React.Component {
             currentUserCss = 'current--user';
         }
 
+        var systemMessageClass = '';
+        if (utils.isSystemMessage(post)) {
+            systemMessageClass = 'post--system';
+        }
+
         var channelName;
         if (channel) {
             if (channel.type === 'D') {
@@ -152,6 +163,15 @@ export default class RhsRootPost extends React.Component {
             }
 
             botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>;
+        } else if (utils.isSystemMessage(post)) {
+            userProfile = (
+                <UserProfile
+                    userId={''}
+                    overwriteName={''}
+                    overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE}
+                    disablePopover={true}
+                />
+            );
         }
 
         let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex();
@@ -159,6 +179,8 @@ export default class RhsRootPost extends React.Component {
             if (post.props.override_icon_url) {
                 src = post.props.override_icon_url;
             }
+        } else if (utils.isSystemMessage(post)) {
+            src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE;
         }
 
         const profilePic = (
@@ -171,7 +193,7 @@ export default class RhsRootPost extends React.Component {
         );
 
         return (
-            <div className={'post post--root ' + currentUserCss}>
+            <div className={'post post--root ' + currentUserCss + ' ' + systemMessageClass}>
                 <div className='post-right-channel__name'>{channelName}</div>
                 <div className='post__content'>
                     <div className='post__img'>