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

webapp/components/create_post.jsx

@@ -546,17 +546,17 @@ export default class CreatePost extends React.Component {
                                 id='post_textbox'
                                 ref='textbox'
                             />
-                            <FileUpload
-                                ref='fileUpload'
-                                getFileCount={this.getFileCount}
-                                onClick={this.handleUploadClick}
-                                onUploadStart={this.handleUploadStart}
-                                onFileUpload={this.handleFileUploadComplete}
-                                onUploadError={this.handleUploadError}
-                                postType='post'
-                                channelId=''
-                            />
                         </div>
+                        <FileUpload
+                            ref='fileUpload'
+                            getFileCount={this.getFileCount}
+                            onClick={this.handleUploadClick}
+                            onUploadStart={this.handleUploadStart}
+                            onFileUpload={this.handleFileUploadComplete}
+                            onUploadError={this.handleUploadError}
+                            postType='post'
+                            channelId=''
+                        />
                         <a
                             className='send-button theme'
                             onClick={this.handleSubmit}

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;
+    font-size: 11px;
-    @include user-select(none);
+    height: 23px;
+    padding: 0 4px 0 3px;
 
     .post-reaction__emoji {
-        height: 14px;
+        height: 16px;
-        margin-top: 3px;
+        margin: 2px 3px 0 0;
-        width: 14px;
         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;
+        }
     }
 }

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;

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;
+                    left: 32px;
-                  top: 0px;
+                    position: relative;
-                  position: relative;
+                    top: 0;
                 }
             }
         }

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 {

webapp/utils/utils.jsx

@@ -539,7 +539,6 @@ export function applyTheme(theme) {
     if (theme.mentionColor) {
         changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor);
         changeCss('.sidebar--left .badge', 'color:' + theme.mentionColor + '!important;');
-        changeCss('.app__body .post-reaction--current-user', 'background-color:' + changeOpacity(theme.mentionColor, 0.4));
     }
 
     if (theme.centerChannelBg) {
@@ -631,8 +630,8 @@ export function applyTheme(theme) {
         changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .channel-header__info .status .offline--icon', 'fill:' + theme.centerChannelColor);
         changeCss('.app__body .navbar .status .offline--icon', 'fill:' + theme.centerChannelColor);
-        changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25));
-        changeCss('.app__body .post-reaction', 'border-color:' + theme.centerChannelColor);
+        changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.6));
     }
 
     if (theme.newMessageSeparator) {
@@ -644,6 +643,9 @@ export function applyTheme(theme) {
         changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn: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 .comment-icon__container, .app__body .post .post__reply', '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));
+        changeCss('.app__body .post-reaction.post-reaction--current-user', 'color:' + theme.linkColor);
     }
 
     if (theme.buttonBg) {