Merge 3.9 RC5 fixes into master (#6459)

* UI fixes for 3.9 (#6400)

* UI fixes for header icon alignment

* PLT-6569 - Fixing pin icon in header

* PLT-6505 - Updating z-index for emoji picker

* Updating z-index for overlaying sidebar

* PLT-6134 - Fix for emoji picker on comments

* Reverting emoji picker fix

* Fixing alignment for header icons

* Removing channel title changes

* Don't show mention badge for active channel (#6411)

* PLT-6583 - Fixing RHS compact view (#6413)

11 files changed, 16 insertions, 29 deletions

diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx
index 67b681193..d06b2dd57 100644
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -896,7 +896,7 @@ export default class Navbar extends React.Component {
         const searchButton = (
             <button
                 type='button'
-                className='navbar-toggle pull-right'
+                className='navbar-toggle navbar-search pull-right'
                 onClick={this.showSearch}
             >
                 <span className='fa fa-search icon-search icon--white'/>
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 42c39e590..ce6360c7e 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -379,7 +379,7 @@ export default class RhsComment extends React.Component {
         }
 
         if (this.props.compactDisplay) {
-            className += 'post--compact';
+            className += ' post--compact';
         }
 
         if (post.is_pinned) {
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index c79d1cabd..408bce395 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -190,7 +190,7 @@ export default class RhsRootPost extends React.Component {
         }
 
         if (this.props.compactDisplay) {
-            className += 'post--compact';
+            className += ' post--compact';
         }
 
         if (post.is_pinned) {
diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx
index 9b5f3b07e..71240ca48 100644
--- a/webapp/components/search_results_item.jsx
+++ b/webapp/components/search_results_item.jsx
@@ -166,7 +166,7 @@ export default class SearchResultsItem extends React.Component {
         let compactClass = '';
         const profilePicContainer = (<div className='post__img'>{profilePic}</div>);
         if (this.props.compactDisplay) {
-            compactClass = 'post--compact';
+            compactClass = ' post--compact';
         }
 
         let fileAttachment = null;
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index ebbd222d9..210c8620b 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -143,15 +143,16 @@
 }
 
 .emoji-picker {
+    @include user-select(none);
+    border-radius: 3px;
+    border: 1px solid;
     display: flex;
     flex-direction: column;
-    @include user-select(none);
     position: absolute;
+    right: 0;
     top: -361px;
-    right: 0px;
     width: 278px;
-    border: 1px solid;
-    border-radius: 3px;
+    z-index: 8;
 
     .emoji-picker__search-container {
         position: relative;
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index e4325c149..cb4512ac1 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -7,7 +7,7 @@
     line-height: 56px;
     position: relative;
     width: 100%;
-    z-index: 5;
+    z-index: 9;
 
     .member-popover__trigger,
     .pinned-posts-button {
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 30d5264af..8f0977eba 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -41,14 +41,6 @@
             width: 43px;
             z-index: 5;
 
-            > span {
-                > svg {
-                    position: relative;
-                    top: 13px;
-                    vertical-align: top;
-                }
-            }
-
             .icon-bar {
                 background: $white;
                 width: 21px;
@@ -57,8 +49,7 @@
             .icon-search {
                 font-size: 17px;
                 position: relative;
-                top: 11px;
-                vertical-align: top;
+                top: -2px;
             }
 
             .icon--white {
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 48fc57629..531638ec7 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -39,10 +39,6 @@
             }
         }
 
-        .post__img {
-            width: 43px;
-        }
-
         .post__body {
             width: 100%;
         }
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index 9a6f2be41..a1698b3a1 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -48,10 +48,6 @@
             }
         }
 
-        .post__img {
-            width: 43px;
-        }
-
         .post__content {
             padding: 0 10px 0 0;
         }
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 7bf1efe2f..da99cc8e9 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -105,7 +105,7 @@
                 right: -1px;
             }
 
-                    .send-button {
+            .send-button {
                 display: table-cell;
             }
         }
@@ -126,6 +126,7 @@
     .sidebar--right {
         @include single-transition(all, .35s, ease);
         @include translateX(100%);
+        z-index: 10;
 
         &.move--left,
         &.webrtc--show {
diff --git a/webapp/stores/channel_store.jsx b/webapp/stores/channel_store.jsx
index 58a7dfb78..07513aade 100644
--- a/webapp/stores/channel_store.jsx
+++ b/webapp/stores/channel_store.jsx
@@ -560,7 +560,9 @@ ChannelStore.dispatchToken = AppDispatcher.register((payload) => {
         var markRead = id === ChannelStore.getCurrentId() && window.isActive;
 
         if (TeamStore.getCurrentId() === teamId || teamId === '') {
-            ChannelStore.incrementMentionsIfNeeded(id, action.websocketMessageProps);
+            if (!markRead) {
+                ChannelStore.incrementMentionsIfNeeded(id, action.websocketMessageProps);
+            }
             ChannelStore.incrementMessages(id, markRead);
         }
         break;