Multiple Ui improvements (#6553)

* PLT-6729 - Fixing close button

* PLT-5216 - Updating mattermost theme

* PLT-6679 - Fixing styling for active state

4 files changed, 25 insertions, 21 deletions

diff --git a/webapp/images/themes/mattermost.png b/webapp/images/themes/mattermost.png
index 8dea37ff6..d11a8db29 100644
--- a/webapp/images/themes/mattermost.png
+++ b/webapp/images/themes/mattermost.png
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 6388fe8de..de7d9cdfb 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -213,14 +213,18 @@
                 line-height: 30px;
                 position: absolute;
                 right: 10px;
+                text-shadow: none;
                 width: 30px;
                 z-index: 5;
-                text-shadow: none;
 
                 &:hover {
                     @include alpha-property(background, $black, .1);
                 }
 
+                .sr-only {
+                    display: none;
+                }
+
                 span {
                     font-family: 'Open Sans', sans-serif;
                     line-height: 10px;
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index dc0856888..ea87f2cd4 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -481,28 +481,28 @@ export const Constants = {
         },
         mattermost: {
             type: 'Mattermost',
-            sidebarBg: '#fafafa',
-            sidebarText: '#333333',
-            sidebarUnreadText: '#333333',
-            sidebarTextHoverBg: '#e6f2fa',
-            sidebarTextActiveBorder: '#378FD2',
-            sidebarTextActiveColor: '#111111',
-            sidebarHeaderBg: '#3481B9',
+            sidebarBg: '#1a1d1f',
+            sidebarText: '#ffffff',
+            sidebarUnreadText: '#e8e8e8',
+            sidebarTextHoverBg: '#525252',
+            sidebarTextActiveBorder: '#27a1b2',
+            sidebarTextActiveColor: '#ffffff',
+            sidebarHeaderBg: '#1a1d1f',
             sidebarHeaderTextColor: '#ffffff',
-            onlineIndicator: '#7DBE00',
-            awayIndicator: '#DCBD4E',
-            mentionBj: '#2389d7',
+            onlineIndicator: '#1fc1d9',
+            awayIndicator: '#c4c492',
+            mentionBj: '#ba3939',
             mentionColor: '#ffffff',
             centerChannelBg: '#ffffff',
-            centerChannelColor: '#333333',
-            newMessageSeparator: '#FF8800',
-            linkColor: '#2389d7',
-            buttonBg: '#23A2FF',
+            centerChannelColor: '#2d3138',
+            newMessageSeparator: '#1c8c99',
+            linkColor: '#1c8c99',
+            buttonBg: '#27a1b2',
             buttonColor: '#FFFFFF',
-            errorTextColor: '#a94442',
-            mentionHighlightBg: '#f3e197',
-            mentionHighlightLink: '#2f81b7',
-            codeTheme: 'github',
+            errorTextColor: '#cc2d2d',
+            mentionHighlightBg: '#1c8c99',
+            mentionHighlightLink: '#ffffff',
+            codeTheme: 'monokai',
             image: mattermostThemeImage
         },
         mattermostDark: {
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 0ef057dac..e4aa48a59 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -697,9 +697,9 @@ 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 .channel-header__links > a.active, .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 .channel-header__links > a.active .icon, .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));