PLT-6297 Added post--pinned CSS class to pinned posts (#6303)

1 files changed, 23 insertions, 15 deletions

diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 023387bb4..65bc52f73 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -176,6 +176,27 @@ export default class RhsRootPost extends React.Component {
         addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
     }
 
+    getClassName = (post, isSystemMessage) => {
+        let className = 'post post--root post--thread';
+        if (UserStore.getCurrentId() === post.user_id) {
+            className += ' current--user';
+        }
+
+        if (isSystemMessage) {
+            className += ' post--system';
+        }
+
+        if (this.props.compactDisplay) {
+            className += 'post--compact';
+        }
+
+        if (post.is_pinned) {
+            className += ' post--pinned';
+        }
+
+        return className;
+    }
+
     render() {
         const post = this.props.post;
         const user = this.props.user;
@@ -196,16 +217,6 @@ export default class RhsRootPost extends React.Component {
             type = 'Comment';
         }
 
-        var userCss = '';
-        if (UserStore.getCurrentId() === post.user_id) {
-            userCss = 'current--user';
-        }
-
-        var systemMessageClass = '';
-        if (isSystemMessage) {
-            systemMessageClass = 'post--system';
-        }
-
         var channelName;
         if (channel) {
             if (channel.type === 'D') {
@@ -493,11 +504,7 @@ export default class RhsRootPost extends React.Component {
             );
         }
 
-        let compactClass = '';
-        let postClass = '';
         if (this.props.compactDisplay) {
-            compactClass = 'post--compact';
-
             if (post.props && post.props.from_webhook) {
                 profilePic = (
                     <ProfilePicture
@@ -516,6 +523,7 @@ export default class RhsRootPost extends React.Component {
             }
         }
 
+        let postClass = '';
         if (PostUtils.isEdited(this.props.post)) {
             postClass += ' post--edited';
         }
@@ -581,7 +589,7 @@ export default class RhsRootPost extends React.Component {
         return (
             <div
                 id='thread--root'
-                className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}
+                className={this.getClassName(post, isSystemMessage)}
             >
                 <div className='post-right-channel__name'>{channelName}</div>
                 <div className='post__content'>