Ui improvements and bug fixes (#5677)

* PLT-5565 - Fixing theme colors not updating

* PLT-4721 - Removing status ind for system messages

* PLT-5735 - Fixing ellipsis in firefox

* PLT-5010 - Removing extra space in channel modal

* PLT-5584 - Inline image overrning edit textarea

* PLT-5475  - Fixing tutorials on mobile

* PLT-5142 - Disabling poitner events for status

* PLT-5728 - Fixing emoji highlight on hover

webapp/sass/components/_modal.scss

@@ -566,7 +566,7 @@
     .more-modal__actions {
         flex-grow: 0;
         flex-shrink: 0;
-        margin: 5px 0 10px;
+        margin: 5px 0;
         padding-left: 20px;
     }
 

webapp/sass/components/_multi-select.scss

@@ -29,7 +29,6 @@
 
     .Select-value-label {
         overflow: hidden;
-        text-overflow: ellipsis;
     }
 }
 

webapp/sass/layout/_post.scss

@@ -3,7 +3,7 @@
 .custom-textarea {
     background: transparent;
     border: 1px solid #cccccc;
-    height: auto;
+    height: 100%;
     line-height: 20px;
     min-height: 36px;
     overflow-x: hidden;
@@ -576,6 +576,12 @@
             }
         }
 
+        &.post--system {
+            .status {
+                visibility: hidden;
+            }
+        }
+
         .post__img {
             padding-top: 0;
         }
@@ -583,6 +589,7 @@
         .status-wrapper {
             cursor: auto;
             height: 14px;
+            pointer-events: none;
 
             .status {
                 bottom: auto;

webapp/sass/responsive/_mobile.scss

@@ -9,6 +9,7 @@
 
         .Select-value-label {
             max-width: 190px;
+            text-overflow: ellipsis;
         }
     }
 
@@ -1622,6 +1623,7 @@
                 }
             }
         }
+
         .attachment {
             .attachment__image {
                 &.attachment__image--openraph {
@@ -1635,6 +1637,7 @@
         left: 0;
         position: fixed;
         top: 0;
+        z-index: 9999;
 
         .tutorial__content {
             .tutorial__steps {

webapp/utils/constants.jsx

@@ -440,7 +440,7 @@ export const Constants = {
             linkColor: '#2f81b7',
             buttonBg: '#1dacfc',
             buttonColor: '#FFFFFF',
-            mentionHighlightBg: '#fff2bb',
+            mentionHighlightBg: '#f3e197',
             mentionHighlightLink: '#2f81b7',
             codeTheme: 'github',
             image: defaultThemeImage
@@ -465,7 +465,7 @@ export const Constants = {
             linkColor: '#2389d7',
             buttonBg: '#23A2FF',
             buttonColor: '#FFFFFF',
-            mentionHighlightBg: '#fff2bb',
+            mentionHighlightBg: '#f3e197',
             mentionHighlightLink: '#2f81b7',
             codeTheme: 'github',
             image: mattermostThemeImage

webapp/utils/utils.jsx

@@ -538,14 +538,14 @@ export function applyTheme(theme) {
 
     if (theme.mentionBj) {
         changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'background:' + theme.mentionBj);
-        changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj + '!important;');
+        changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj);
-        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'background:' + theme.mentionBj + '!important;');
+        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'background:' + theme.mentionBj);
     }
 
     if (theme.mentionColor) {
-        changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor);
+        changeCss('.app__body .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 .sidebar--left .badge', 'color:' + theme.mentionColor);
-        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'color:' + theme.mentionColor + '!important;');
+        changeCss('.app__body .multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'color:' + theme.mentionColor);
     }
 
     if (theme.centerChannelBg) {
@@ -622,7 +622,7 @@ export function applyTheme(theme) {
         changeCss('@media(min-width: 768px){.app__body .post:hover, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.08));
         changeCss('.app__body .more-modal__row.more-modal__row--selected, .app__body .date-separator.hovered--before:after, .app__body .date-separator.hovered--after:before, .app__body .new-separator.hovered--after:before, .app__body .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
         changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.15));
-        changeCss('.app__body .suggestion--selected, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
+        changeCss('.app__body .suggestion--selected, .app__body .emoticon-suggestion:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('code, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('@media(min-width: 960px){.app__body .post.current--user:hover .post__body ', 'background: none;');
         changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor);
@@ -669,7 +669,7 @@ export function applyTheme(theme) {
 
     if (theme.mentionHighlightBg) {
         changeCss('.app__body .mention--highlight, .app__body .search-highlight', 'background:' + theme.mentionHighlightBg);
-        changeCss('.mention-comment', 'border-color:' + theme.mentionHighlightBg + ' !important');
+        changeCss('.app__body .post.post--comment .post__body.mention-comment', 'border-color:' + theme.mentionHighlightBg);
         changeCss('.app__body .post.post--highlight', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5));
     }