Add reaction picker (#5904)

13 files changed, 541 insertions, 197 deletions

diff --git a/webapp/actions/post_actions.jsx b/webapp/actions/post_actions.jsx
index 494cbc454..63c4eb017 100644
--- a/webapp/actions/post_actions.jsx
+++ b/webapp/actions/post_actions.jsx
@@ -300,6 +300,7 @@ export function addReaction(channelId, postId, emojiName) {
         user_id: UserStore.getCurrentId(),
         emoji_name: emojiName
     };
+    emitEmojiPosted(emojiName);
 
     AsyncClient.saveReaction(channelId, reaction);
 }
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index 899609ed0..8aa26882b 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -580,7 +580,7 @@ export default class CreateComment extends React.Component {
             emojiPicker = (
                 <EmojiPicker
                     onEmojiClick={this.handleEmojiClick}
-                    topOrBottom='bottom'
+                    pickerLocation='bottom'
                     emojiOffset={this.state.emojiOffset}
                     outsideClick={this.closeEmoji}
                 />
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index 93a299b89..b33e5ea01 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -618,7 +618,7 @@ export default class CreatePost extends React.Component {
             emojiPicker = (
                 <EmojiPicker
                     onEmojiClick={this.handleEmojiClick}
-                    topOrBottom='top'
+                    pickerLocation='top'
                     outsideClick={this.closeEmoji}
 
                 />
diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx
index e12974054..0f45b7297 100644
--- a/webapp/components/emoji_picker/emoji_picker.jsx
+++ b/webapp/components/emoji_picker/emoji_picker.jsx
@@ -34,7 +34,7 @@ class EmojiPicker extends React.Component {
     static propTypes = {
         customEmojis: React.PropTypes.object,
         onEmojiClick: React.PropTypes.func.isRequired,
-        topOrBottom: React.PropTypes.string.isRequired,
+        pickerLocation: React.PropTypes.string.isRequired,
         emojiOffset: React.PropTypes.number,
         outsideClick: React.PropTypes.func
     }
@@ -68,7 +68,9 @@ class EmojiPicker extends React.Component {
 
     onOutsideEvent = (event) => {
         // Handle the event.
-        this.props.outsideClick(event);
+        if (this.props.outsideClick) {
+            this.props.outsideClick(event);
+        }
     }
 
     handleCategoryClick(category) {
@@ -287,7 +289,17 @@ class EmojiPicker extends React.Component {
                 items.push(this.renderCategory(category, this.state.filter));
             }
         }
-        const cssclass = this.props.topOrBottom === 'top' ? 'emoji-picker' : 'emoji-picker-bottom';
+        let cssclass = 'emoji-picker ';
+        if (this.props.pickerLocation === 'top') {
+            cssclass += 'emoji-picker-top';
+        } else if (this.props.pickerLocation === 'bottom') {
+            cssclass += 'emoji-picker-bottom';
+        } else if (this.props.pickerLocation === 'react') {
+            cssclass = 'emoji-picker-react';
+        } else if (this.props.pickerLocation === 'react-rhs-comment') {
+            cssclass = 'emoji-picker-react-rhs-comment';
+        }
+
         const pickerStyle = this.props.emojiOffset ? {top: this.props.emojiOffset} : {};
         return (
             <div
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 5318ec272..1da3ecd24 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import ReactDOM from 'react-dom';
 
 import PostTime from './post_time.jsx';
 
@@ -12,7 +13,8 @@ import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
 import Constants from 'utils/constants.jsx';
 import DelayedAction from 'utils/delayed_action.jsx';
-import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap';
+import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
 
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
@@ -28,10 +30,17 @@ export default class PostInfo extends React.Component {
         this.unflagPost = this.unflagPost.bind(this);
         this.pinPost = this.pinPost.bind(this);
         this.unpinPost = this.unpinPost.bind(this);
+        this.reactEmojiClick = this.reactEmojiClick.bind(this);
+        this.emojiPickerClick = this.emojiPickerClick.bind(this);
 
         this.canEdit = false;
         this.canDelete = false;
         this.editDisableAction = new DelayedAction(this.handleEditDisable);
+
+        this.state = {
+            showEmojiPicker: false,
+            reactionPickerOffset: 21
+        };
     }
 
     handleDropdownOpened() {
@@ -271,6 +280,10 @@ export default class PostInfo extends React.Component {
         GlobalActions.showGetPostLinkModal(this.props.post);
     }
 
+    emojiPickerClick() {
+        this.setState({showEmojiPicker: !this.state.showEmojiPicker});
+    }
+
     removePost() {
         GlobalActions.emitRemovePost(this.props.post);
     }
@@ -308,6 +321,14 @@ export default class PostInfo extends React.Component {
         PostActions.unflagPost(this.props.post.id);
     }
 
+    reactEmojiClick(emoji) {
+        const pickerOffset = 21;
+
+        const emojiName = emoji.name || emoji.aliases[0];
+        PostActions.addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
+        this.setState({showEmojiPicker: false, reactionPickerOffset: pickerOffset});
+    }
+
     render() {
         var post = this.props.post;
         var comments = '';
@@ -335,11 +356,47 @@ export default class PostInfo extends React.Component {
                         className='comment-icon'
                         dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
                     />
-                    {commentCountText}
+                    <span className='comment-count'>
+                        {commentCountText}
+                    </span>
                 </a>
             );
         }
 
+        let react;
+        if (post.state !== Constants.POST_FAILED &&
+            post.state !== Constants.POST_LOADING &&
+            !Utils.isPostEphemeral(post) &&
+            Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
+            react = (
+                <span>
+                    <Overlay
+                        show={this.state.showEmojiPicker}
+                        placement='top'
+                        rootClose={true}
+                        container={this}
+                        onHide={() => this.setState({showEmojiPicker: false})}
+                        target={() => ReactDOM.findDOMNode(this.refs['reactIcon_' + post.id])}
+
+                    >
+                        <EmojiPicker
+                            onEmojiClick={this.reactEmojiClick}
+                            pickerLocation='top'
+
+                        />
+                    </Overlay>
+                    <a
+                        href='#'
+                        className='reacticon__container'
+                        onClick={this.emojiPickerClick}
+                        ref={'reactIcon_' + post.id}
+                    ><i className='fa fa-smile-o'/>
+                    </a>
+                </span>
+
+            );
+        }
+
         let options;
         if (Utils.isPostEphemeral(post)) {
             options = (
@@ -358,6 +415,7 @@ export default class PostInfo extends React.Component {
                         >
                             {dropdown}
                         </div>
+                        {react}
                         {comments}
                     </li>
                 );
@@ -445,6 +503,7 @@ export default class PostInfo extends React.Component {
                         postId={post.id}
                     />
                     {pinnedBadge}
+                    {this.state.showEmojiPicker}
                     {flagTrigger}
                 </li>
                 {options}
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 278163bf7..fe0f139fa 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -10,7 +10,7 @@ import ReactionListContainer from 'components/post_view/components/reaction_list
 import RhsDropdown from 'components/rhs_dropdown.jsx';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
-import {flagPost, unflagPost, pinPost, unpinPost} from 'actions/post_actions.jsx';
+import {flagPost, unflagPost, pinPost, unpinPost, addReaction} from 'actions/post_actions.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 
@@ -19,10 +19,13 @@ import * as PostUtils from 'utils/post_utils.jsx';
 
 import Constants from 'utils/constants.jsx';
 import DelayedAction from 'utils/delayed_action.jsx';
-import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap';
 
 import {FormattedMessage} from 'react-intl';
 
+import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
+import ReactDOM from 'react-dom';
+
 import loadingGif from 'images/load.gif';
 
 import React from 'react';
@@ -38,6 +41,8 @@ export default class RhsComment extends React.Component {
         this.unflagPost = this.unflagPost.bind(this);
         this.pinPost = this.pinPost.bind(this);
         this.unpinPost = this.unpinPost.bind(this);
+        this.reactEmojiClick = this.reactEmojiClick.bind(this);
+        this.emojiPickerClick = this.emojiPickerClick.bind(this);
 
         this.canEdit = false;
         this.canDelete = false;
@@ -46,7 +51,9 @@ export default class RhsComment extends React.Component {
         this.state = {
             currentTeamDisplayName: TeamStore.getCurrent().name,
             width: '',
-            height: ''
+            height: '',
+            showReactEmojiPicker: false,
+            reactPickerOffset: 15
         };
     }
 
@@ -88,7 +95,7 @@ export default class RhsComment extends React.Component {
         );
     }
 
-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps, nextState) {
         if (nextProps.status !== this.props.status) {
             return true;
         }
@@ -117,6 +124,10 @@ export default class RhsComment extends React.Component {
             return true;
         }
 
+        if (this.state.showReactEmojiPicker !== nextState.showReactEmojiPicker) {
+            return true;
+        }
+
         return false;
     }
 
@@ -327,11 +338,39 @@ export default class RhsComment extends React.Component {
             );
     }
 
+    emojiPickerClick() {
+        // set default offset
+        let reactOffset = 15;
+        const reactSelectorHeight = 360;
+        const reactionIconY = ReactDOM.findDOMNode(this).getBoundingClientRect().top;
+        const rhsMinHeight = 700;
+
+        const spaceAvail = rhsMinHeight - reactionIconY;
+        if (spaceAvail < reactSelectorHeight) {
+            reactOffset = (spaceAvail - reactSelectorHeight);
+        }
+        this.setState({showReactEmojiPicker: !this.state.showReactEmojiPicker, reactPickerOffset: reactOffset});
+    }
+
+    reactEmojiClick(emoji) {
+        this.setState({showReactEmojiPicker: false});
+        const emojiName = emoji.name || emoji.aliases[0];
+        addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
+    }
+
     render() {
         const post = this.props.post;
         const flagIcon = Constants.FLAG_ICON_SVG;
         const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
         const isSystemMessage = PostUtils.isSystemMessage(post);
+        let canReact = false;
+
+        if (post.state !== Constants.POST_FAILED &&
+            post.state !== Constants.POST_LOADING &&
+            !Utils.isPostEphemeral(post) &&
+            Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
+            canReact = true;
+        }
 
         var currentUserCss = '';
         if (this.props.currentUser.id === post.user_id) {
@@ -536,6 +575,42 @@ export default class RhsComment extends React.Component {
             );
         }
 
+        let react;
+        let reactOverlay;
+
+        if (canReact) {
+            react = (
+                <span>
+                    <a
+                        href='#'
+                        className='reacticon__container reaction'
+                        onClick={this.emojiPickerClick}
+                        ref={'rhs_reacticon_' + post.id}
+                    ><i className='fa fa-smile-o'/>
+                    </a>
+                </span>
+
+            );
+            reactOverlay = (
+                <Overlay
+                    id={'rhs_react_overlay_' + post.id}
+                    show={this.state.showReactEmojiPicker}
+                    placement='top'
+                    rootClose={true}
+                    container={this.refs['post_body_' + post.id]}
+                    onHide={() => this.setState({showReactEmojiPicker: false})}
+                    target={() => ReactDOM.findDOMNode(this.refs['rhs_reacticon_' + post.id])}
+
+                >
+                    <EmojiPicker
+                        onEmojiClick={this.reactEmojiClick}
+                        pickerLocation='react-rhs-comment'
+                        emojiOffset={this.state.reactPickerOffset}
+                    />
+                </Overlay>
+            );
+        }
+
         let options;
         if (Utils.isPostEphemeral(post)) {
             options = (
@@ -546,7 +621,9 @@ export default class RhsComment extends React.Component {
         } else if (!PostUtils.isSystemMessage(post)) {
             options = (
                 <li className='col col__reply'>
+                    {reactOverlay}
                     {this.createDropdown()}
+                    {react}
                 </li>
             );
         }
@@ -570,7 +647,10 @@ export default class RhsComment extends React.Component {
         };
 
         return (
-            <div className={'post post--thread ' + currentUserCss + ' ' + compactClass + ' ' + systemMessageClass}>
+            <div
+                ref={'post_body_' + post.id}
+                className={'post post--thread ' + currentUserCss + ' ' + compactClass + ' ' + systemMessageClass}
+            >
                 <div className='post__content'>
                     {profilePicContainer}
                     <div>
@@ -586,7 +666,7 @@ export default class RhsComment extends React.Component {
                             </li>
                             {options}
                         </ul>
-                        <div className='post__body'>
+                        <div className='post__body' >
                             <div className={postClass}>
                                 {loading}
                                 <PostMessageContainer post={post}/>
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index f07826d63..b298853d8 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -14,14 +14,17 @@ import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
-import {flagPost, unflagPost, pinPost, unpinPost} from 'actions/post_actions.jsx';
+import {flagPost, unflagPost, pinPost, unpinPost, addReaction} from 'actions/post_actions.jsx';
 
 import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
 
+import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
+import ReactDOM from 'react-dom';
+
 import Constants from 'utils/constants.jsx';
 import DelayedAction from 'utils/delayed_action.jsx';
-import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -37,6 +40,8 @@ export default class RhsRootPost extends React.Component {
         this.unflagPost = this.unflagPost.bind(this);
         this.pinPost = this.pinPost.bind(this);
         this.unpinPost = this.unpinPost.bind(this);
+        this.reactEmojiClick = this.reactEmojiClick.bind(this);
+        this.emojiPickerClick = this.emojiPickerClick.bind(this);
 
         this.canEdit = false;
         this.canDelete = false;
@@ -45,7 +50,9 @@ export default class RhsRootPost extends React.Component {
         this.state = {
             currentTeamDisplayName: TeamStore.getCurrent().name,
             width: '',
-            height: ''
+            height: '',
+            showRHSEmojiPicker: false,
+            testStateObj: true
         };
     }
 
@@ -70,7 +77,7 @@ export default class RhsRootPost extends React.Component {
         this.canEdit = false;
     }
 
-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps, nextState) {
         if (nextProps.status !== this.props.status) {
             return true;
         }
@@ -107,6 +114,10 @@ export default class RhsRootPost extends React.Component {
             return true;
         }
 
+        if (this.state.showRHSEmojiPicker !== nextState.showRHSEmojiPicker) {
+            return true;
+        }
+
         return false;
     }
 
@@ -155,13 +166,30 @@ export default class RhsRootPost extends React.Component {
         unpinPost(this.props.post.channel_id, this.props.post.id);
     }
 
+    emojiPickerClick() {
+        this.setState({showRHSEmojiPicker: !this.state.showRHSEmojiPicker});
+    }
+
+    reactEmojiClick(emoji) {
+        const emojiName = emoji.name || emoji.aliases[0];
+        addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
+        this.setState({showRHSEmojiPicker: false});
+    }
+
     render() {
         const post = this.props.post;
         const user = this.props.user;
         const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
         var timestamp = user ? user.last_picture_update : 0;
         var channel = ChannelStore.get(post.channel_id);
+        let canReact = false;
         const flagIcon = Constants.FLAG_ICON_SVG;
+        if (post.state !== Constants.POST_FAILED &&
+            post.state !== Constants.POST_LOADING &&
+            !Utils.isPostEphemeral(post) &&
+            Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
+            canReact = true;
+        }
 
         this.canDelete = PostUtils.canDeletePost(post);
         this.canEdit = PostUtils.canEditPost(post, this.editDisableAction);
@@ -195,6 +223,41 @@ export default class RhsRootPost extends React.Component {
             }
         }
 
+        let react;
+        let reactOverlay;
+
+        if (canReact) {
+            react = (
+                <span>
+                    <a
+                        href='#'
+                        className='reacticon__container reaction'
+                        onClick={this.emojiPickerClick}
+                        ref='rhs_root_reacticon'
+                    ><i className='fa fa-smile-o'/>
+                    </a>
+                </span>
+
+            );
+            reactOverlay = (
+                <Overlay
+                    id='rhs_react_overlay'
+                    show={this.state.showRHSEmojiPicker}
+                    placement='bottom'
+                    rootClose={true}
+                    container={this}
+                    onHide={() => this.setState({showRHSEmojiPicker: false})}
+                    target={() => ReactDOM.findDOMNode(this.refs.rhs_root_reacticon)}
+
+                >
+                    <EmojiPicker
+                        onEmojiClick={this.reactEmojiClick}
+                        pickerLocation='react'
+                    />
+                </Overlay>
+            );
+        }
+
         var dropdownContents = [];
 
         if (Utils.isMobile()) {
@@ -547,7 +610,9 @@ export default class RhsRootPost extends React.Component {
                                 </OverlayTrigger>
                             </li>
                             <li className='col col__reply'>
+                                {reactOverlay}
                                 {rootOptions}
+                                {react}
                             </li>
                         </ul>
                         <div className='post__body'>
diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index 79879973b..4ac36717a 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -424,7 +424,10 @@ export default class RhsThread extends React.Component {
                     renderView={renderView}
                     onScroll={this.handleScroll}
                 >
-                    <div className='post-right__scroll'>
+                    <div
+                        ref='post-right__scroll'
+                        className='post-right__scroll'
+                    >
                         <DateSeparator
                             date={rootPostDay.toDateString()}
                         />
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index 7cf7034d2..cf8815a24 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -1,5 +1,16 @@
 @charset "UTF-8";
 
+.reacticon {
+    display: inline-block;
+    fill: inherit;
+    opacity: .7;
+    position: relative;
+    top: 2px;
+    vertical-align: middle;
+    visibility: hidden;
+
+}
+
 .emoticon {
     background-position: 50% 50%;
     background-repeat: no-repeat;
@@ -45,6 +56,51 @@
     }
 }
 
+.emoji-picker-react-rhs-comment {
+    position: absolute;
+    width: 278px;
+    border: 1px solid;
+    min-height: 298px;
+    border-radius: 3px;
+    top: 21px;
+    right:59px;
+    z-index: 100;
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}
+
+.emoji-picker-react {
+    position: absolute;
+    width: 278px;
+    border: 1px solid;
+    min-height: 298px;
+    border-radius: 3px;
+    top: 42px;
+    right:59px;
+    z-index: 100;
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}
 
 
 .emoji-picker-bottom {
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index d4c1daa6e..5fd7df3f2 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -64,14 +64,15 @@
 
         .btn {
             margin-bottom: 10px;
-            
+
             &.disabled {
                 background: grey !important;
                 border-color: transparent !important;
             }
         }
 
-        .custom-textarea {
+        .custom-textarea,
+        .custom-textarea-emoji {
             min-height: 100px;
         }
 
@@ -150,8 +151,8 @@
     overflow: auto;
     position: relative;
     padding-top: 10px;
-    min-height: 429px;
-    
+    min-height: 700px;
+
     .file-preview__container {
         margin-top: 5px;
     }
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 85f5b2a5a..751980c43 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -360,233 +360,271 @@
 
 .post-create__container {
     label {
-       font-weight: normal;
-    }
-    .custom-textarea {
-        overflow: hidden;
-    }
+     font-weight: normal;
+ }
+ .custom-textarea {
+    overflow: hidden;
+}
 
-    form {
-        margin: 0 auto;
-        padding: .5em 15px 0;
-        width: 100%;
-    }
-    #reply_textbox.custom-textarea-emoji{
-        bottom: 0;
-        max-height: 162px !important;
-        padding-right: 60px;
-        padding-top: 6px;
-        resize: none;
+form {
+    margin: 0 auto;
+    padding: .5em 15px 0;
+    width: 100%;
+}
+#reply_textbox.custom-textarea-emoji{
+    bottom: 0;
+    max-height: 162px !important;
+    padding-right: 60px;
+    padding-top: 6px;
+    resize: none;
 
 
-    }
-    .center {
-        max-width: 1028px;
-    }
 
-    .post-create {
-        &.scroll {
-            .btn-file {
-                right: 10px;
-            }
+}
+.center {
+    max-width: 1028px;
+}
 
-            .custom-textarea {
-                -ms-overflow-style: auto;
-                overflow: auto;
-                padding-right: 43px;
-                resize: none;
-            }
+.post-create {
+    &.scroll {
+        .btn-file {
+            right: 10px;
+        }
 
-            #post_textbox-reference.custom-textarea-emoji {
-                padding-right: 43px;
-                resize: none;
-            }
+        .custom-textarea {
+            -ms-overflow-style: auto;
+            overflow: auto;
+            padding-right: 43px;
+            resize: none;
+        }
 
+        #post_textbox-reference.custom-textarea-emoji {
+            padding-right: 43px;
+            resize: none;
+        }
 
-            #reply_textbox.custom-textarea-emoji {
-                padding-right: 60px;
-                resize: none;
 
-            }
 
-            #post_textbox.custom-textarea-emoji {
-                padding-right: 60px;
-                resize: none;
+        #post_textbox.custom-textarea-emoji {
+            padding-right: 60px;
+            resize: none;
 
-            }
         }
     }
+}
+
+.post-create-body {
+    padding: 0 0 2px;
+    position: relative;
 
-    .post-create-body {
-        padding: 0 0 2px;
+    .post-body__cell {
         position: relative;
+        vertical-align: top;
+    }
 
-        .post-body__cell {
-            position: relative;
-            vertical-align: top;
+    .send-button {
+        @include single-transition(all, .15s);
+        cursor: pointer;
+        display: none;
+        font-size: 18px;
+        height: 37px;
+        line-height: 37px;
+        padding-right: 4px;
+        text-align: center;
+        vertical-align: bottom;
+        width: 45px;
+
+        &:active {
+            @include opacity(.75);
         }
 
-        .send-button {
-            @include single-transition(all, .15s);
-            cursor: pointer;
-            display: none;
-            font-size: 18px;
-            height: 37px;
-            line-height: 37px;
-            padding-right: 4px;
-            text-align: center;
-            vertical-align: bottom;
-            width: 45px;
+        &.disabled {
+            color: grey;
+        }
+    }
 
-            &:active {
-                @include opacity(.75);
-            }
+    .custom-textarea {
+        bottom: 0;
+        max-height: 162px !important;
+        padding-right: 35px;
+        padding-top: 8px;
+        resize: none;
 
-            &.disabled {
-                color: grey;
-            }
-        }
+    }
 
-        .custom-textarea {
-            bottom: 0;
-            max-height: 162px !important;
-            padding-right: 35px;
-            padding-top: 8px;
-            resize: none;
+    #post_textbox-reference.custom-textarea-emoji {
+        bottom: 0;
+        max-height: 162px !important;
+        padding-right: 35px;
+        padding-top: 8px;
+        resize: none;
 
-        }
+    }
 
-        #post_textbox-reference.custom-textarea-emoji {
-            bottom: 0;
-            max-height: 162px !important;
-            padding-right: 35px;
-            padding-top: 8px;
-            resize: none;
 
-        }
+    #post_textbox.custom-textarea-emoji {
+        bottom: 0;
+        max-height: 162px !important;
+        padding-right: 60px;
+        padding-top: 8px;
+        resize: none;
 
+    }
+    .textarea-div {
+        line-height: 1.5;
+        max-height: 163px !important;
+        overflow: auto;
+        padding-right: 30px;
+        padding-top: 8px;
+    }
 
-        #post_textbox.custom-textarea-emoji {
-            bottom: 0;
-            max-height: 162px !important;
-            padding-right: 60px;
-            padding-top: 8px;
-            resize: none;
+    .btn-file {
+        @include single-transition(all, .15s);
+        font-size: 16px;
+        padding: 8px 9px 4px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 5;
 
-        }
-        .textarea-div {
-            line-height: 1.5;
-            max-height: 163px !important;
-            overflow: auto;
-            padding-right: 30px;
-            padding-top: 8px;
+        svg {
+            height: 18px;
+            width: 18px;
         }
 
-        .btn-file {
-            @include single-transition(all, .15s);
-            font-size: 16px;
-            padding: 8px 9px 4px;
-            position: absolute;
-            right: 0;
-            top: 0;
-            z-index: 5;
+        &:hover,
+        &:active {
+            box-shadow: none;
+        }
 
-            svg {
-                height: 18px;
-                width: 18px;
-            }
+        &.btn-file__disabled {
+            @include opacity(.1);
 
             &:hover,
             &:active {
-                box-shadow: none;
-            }
-
-            &.btn-file__disabled {
                 @include opacity(.1);
-
-                &:hover,
-                &:active {
-                    @include opacity(.1);
-                }
             }
+        }
 
-            .icon--attachment {
-                @include opacity(.5);
-                display: inline-block;
-                position: relative;
-                vertical-align: top;
+        .icon--attachment {
+            @include opacity(.5);
+            display: inline-block;
+            position: relative;
+            vertical-align: top;
 
-                input {
-                    cursor: pointer;
-                    direction: ltr;
-                    filter: alpha(opacity=0);
-                    font-size: 23px;
-                    height: 100%;
-                    margin: 0;
-                    opacity: 0;
-                    position: absolute;
-                    right: 0;
-                    top: 0;
-                    width: 100%;
-                }
+            input {
+                cursor: pointer;
+                direction: ltr;
+                filter: alpha(opacity=0);
+                font-size: 23px;
+                height: 100%;
+                margin: 0;
+                opacity: 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 100%;
+            }
 
-                &:hover {
-                    @include opacity(.9);
-                }
+            &:hover {
+                @include opacity(.9);
             }
         }
+    }
+
+
+    .icon--emoji-picker {
+        @include opacity(.5);
+        @include single-transition(all, .15s);
+        cursor: pointer;
+        font-size: 19px;
+        margin-left: 7px;
+        position: relative;
+        vertical-align: top;
 
+        &:hover,
+        &:active {
+            @include opacity(.9);
+            box-shadow: none;
+        }
 
-        .icon--emoji-picker {
+        .icon--attachment {
             @include opacity(.5);
-            @include single-transition(all, .15s);
-            cursor: pointer;
-            font-size: 19px;
-            margin-left: 7px;
+            display: inline-block;
             position: relative;
             vertical-align: top;
 
-            &:hover,
-            &:active {
-                @include opacity(.9);
-                box-shadow: none;
+            input {
+                cursor: pointer;
+                direction: ltr;
+                filter: alpha(opacity=0);
+                font-size: 23px;
+                height: 100%;
+                margin: 0;
+                opacity: 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 100%;
             }
-        }
 
-        textarea {
-            box-shadow: none;
+            &:hover {
+                @include opacity(.9);
+            }
         }
     }
 
-    .post-create-footer {
-        @include clearfix;
-        font-size: 13px;
-        padding: 3px 0 0;
+
+    .icon--emoji-picker {
+        @include opacity(.5);
+        @include single-transition(all, .15s);
+        cursor: pointer;
+        font-size: 19px;
+        margin-left: 7px;
         position: relative;
+        vertical-align: top;
 
-        .post-error {
-            @include opacity(.55);
-            display: inline-block;
-            font-size: .85em;
-            font-weight: normal;
-            margin-bottom: 0;
-            position: absolute;
-            top: 4px;
+        &:hover,
+        &:active {
+            @include opacity(.9);
+            box-shadow: none;
         }
     }
 
-    .msg-typing {
-        @include opacity(.7);
-        display: block;
-        font-size: .95em;
-        height: 20px;
-        margin-bottom: 5px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    textarea {
+        box-shadow: none;
+    }
+}
+
+.post-create-footer {
+    @include clearfix;
+    font-size: 13px;
+    padding: 3px 0 0;
+    position: relative;
+
+    .post-error {
+        @include opacity(.55);
+        display: inline-block;
+        font-size: .85em;
+        font-weight: normal;
+        margin-bottom: 0;
+        position: absolute;
+        top: 4px;
     }
 }
 
+.msg-typing {
+    @include opacity(.7);
+    display: block;
+    font-size: .95em;
+    height: 20px;
+    margin-bottom: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+}
+
 .post-list__table {
     display: table;
     height: 100%;
@@ -619,16 +657,14 @@
             .col__reply {
                 min-width: 0;
             }
-
-            .dropdown {
-                margin-right: 0;
-            }
         }
     }
 
     &:hover {
         .dropdown,
         .comment-icon__container,
+        .reacticon,
+        .reacticon__container,
         .flag-icon__container,
         .post__reply,
         .post__remove {
@@ -1100,8 +1136,8 @@
 
     .dropdown {
         display: inline-block;
-        margin-right: 5px;
         top: -1px;
+        vertical-align: middle;
         visibility: hidden;
 
         .dropdown-menu {
@@ -1122,6 +1158,8 @@
     }
 
     .post__dropdown {
+        vertical-align: middle;
+
         &:after {
             content: '[...]';
             position: relative;
@@ -1249,6 +1287,10 @@
 
         .post-reaction-list {
             min-height: 30px;
+
+            &:empty {
+                display: none;
+            }
         }
 
         .post-reaction {
@@ -1381,6 +1423,8 @@
     .comment-icon__container {
         display: inline-block;
         fill: $primary-color;
+        position: relative;
+        top: 1px;
         visibility: hidden;
 
         &:focus {
@@ -1396,12 +1440,17 @@
             width: 17px;
         }
 
+        .comment-count {
+            margin-left: 2px;
+        }
+
         .comment-icon {
             display: inline-block;
             fill: inherit;
-            margin-right: 3px;
+            margin: 0 1px 0 5px;
             position: relative;
-            top: 2px;
+            top: 1px;
+            vertical-align: top;
         }
 
         path {
@@ -1409,6 +1458,15 @@
         }
     }
 
+    .reacticon__container {
+        display: inline-block;
+        fill: $primary-color;
+        font-size: 16px;
+        margin-left: 5px;
+        vertical-align: top;
+        visibility: hidden;
+    }
+
     .flag-icon__container {
         display: inline-block;
         font-size: 12px;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 518db1a94..88dcc17f5 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -236,6 +236,10 @@
             }
         }
 
+        .reacticon__container {
+            display: none;
+        }
+
         .post__dropdown {
             display: inline-block;
             height: 28px;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 9e69fd6d6..d2cebafa7 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -584,6 +584,9 @@ export function applyTheme(theme) {
         changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg);
         changeCss('.app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg);
         changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
+        changeCss('.app__body .emoji-picker-react, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
+        changeCss('.app__body .emoji-picker-react-rhs-comment, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
+
         changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
     }
 
@@ -662,6 +665,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25));
         changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
         changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor);
+        changeCss('.app__body .emoji-picker-react', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .emoji-picker-bottom', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
@@ -687,6 +691,7 @@ export function applyTheme(theme) {
     if (theme.linkColor) {
         changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover, .app__body .channel-header #member_popover:hover', 'color:' + theme.linkColor);
         changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));
+        changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .reacticon__container, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
         changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply, .app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + theme.linkColor);
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1));
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4));