Ui improvements (#4780)

* PLT-4897 - Updating styles for emoji reactions

* PLT-4971 - Fixing help and attachment buttons

* PLT-4931 - Fixing UI for user list in system console

* Fixing a bug with the new messages indicator

4 files changed, 39 insertions, 18 deletions

diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 0436af6c5..235794eee 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -268,6 +268,7 @@
         position: absolute;
         right: 0;
         text-align: center;
+        visibility: hidden;
         z-index: 1;
 
         .fa {
@@ -287,6 +288,7 @@
 
         &.visible {
             @include opacity(1);
+            visibility: visible;
         }
 
         &.disabled {
@@ -416,12 +418,12 @@
         .btn-file {
             @include opacity(.5);
             @include single-transition(all, .15s);
-            color: #444444;
             font-size: 16px;
             padding: 7px 9px 6px;
             position: absolute;
             right: 0;
             top: 1px;
+            z-index: 5;
 
             svg {
                 height: 18px;
@@ -1257,18 +1259,26 @@
 }
 
 .post-reaction {
+    @include user-select(none);
+    @include border-radius(3px);
     border: 1px solid $primary-color;
-    border-radius: 3px;
     cursor: pointer;
     display: inline-block;
-    padding: 1px 2px;
-    @include user-select(none);
+    font-size: 11px;
+    height: 23px;
+    padding: 0 4px 0 3px;
 
     .post-reaction__emoji {
-        height: 14px;
-        margin-top: 3px;
-        width: 14px;
+        height: 16px;
+        margin: 2px 3px 0 0;
         vertical-align: top;
+        width: 16px;
+    }
+
+    .post-reaction__count {
+        line-height: 10px;
+        position: relative;
+        top: 3px;
     }
 
     & + & {
@@ -1276,6 +1286,8 @@
     }
 
     &--current-user {
-        // background-colour set by theme code
+        .post-reaction__count {
+            font-weight: 600;
+        }
     }
 }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index a13d2de00..2579231e7 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -374,13 +374,6 @@
         width: 200px;
     }
 
-    .textarea-wrapper {
-        .textbox-preview-link,
-        .textbox-help-link {
-            display: none;
-        }
-    }
-
     .form-control {
         &.min-height {
             min-height: 100px;
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 48f72b0f3..e337fe3ac 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -1,6 +1,13 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 960px) {
+    .textarea-wrapper {
+        .textbox-preview-link,
+        .textbox-help-link {
+            display: none;
+        }
+    }
+
     .channel-header {
         .search-bar__container {
             .search__form {
@@ -29,9 +36,9 @@
                 top: 0;
 
                 &.post-error {
-                  left: 32px;
-                  top: 0px;
-                  position: relative;
+                    left: 32px;
+                    position: relative;
+                    top: 0;
                 }
             }
         }
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 5107cff3d..15667fd4e 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -258,12 +258,21 @@
         overflow: visible;
         padding: 5px 0;
 
+        .more-modal__list {
+            overflow: visible;
+        }
+
         .more-modal__row {
             &:last-child {
                 border: none;
             }
         }
     }
+
+    .member-count {
+        @include opacity(.7);
+        margin-top: 8px;
+    }
 }
 
 .brand-img {