PLT-6614 - Mentions badge styling and dropdown icon style (#6426)

* Mentions badge styling and dropdown icon style

* PLT-6134 - Fixing emoji picker border in RHS

7 files changed, 27 insertions, 12 deletions

diff --git a/webapp/components/notify_counts.jsx b/webapp/components/notify_counts.jsx
index f05ecbf12..6fcb3acdf 100644
--- a/webapp/components/notify_counts.jsx
+++ b/webapp/components/notify_counts.jsx
@@ -37,9 +37,9 @@ export default class NotifyCounts extends React.Component {
     }
     render() {
         if (this.state.mentionCount) {
-            return <span className='badge badge-notify'>{this.state.mentionCount}</span>;
+            return <span className='mention-badge badge-notify'>{this.state.mentionCount}</span>;
         } else if (this.state.messageCount) {
-            return <span className='badge badge-notify'>{'•'}</span>;
+            return <span className='mention-badge badge-notify'>{'•'}</span>;
         }
         return null;
     }
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index f8b3616f3..a0e69c52a 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -517,7 +517,7 @@ export default class Sidebar extends React.Component {
         var badge = null;
         if (channelMember) {
             if (unreadCount.mentions) {
-                badge = <span className='badge pull-right small'>{unreadCount.mentions}</span>;
+                badge = <span className='mention-badge pull-right small'>{unreadCount.mentions}</span>;
                 this.badgesActive = true;
             }
         } else if (this.state.loadingDMChannel === index && channel.type === Constants.DM_CHANNEL) {
diff --git a/webapp/components/team_sidebar/components/team_button.jsx b/webapp/components/team_sidebar/components/team_button.jsx
index 2a35e1172..4be1b5c13 100644
--- a/webapp/components/team_sidebar/components/team_button.jsx
+++ b/webapp/components/team_sidebar/components/team_button.jsx
@@ -40,7 +40,7 @@ export default class TeamButton extends React.Component {
 
             if (this.props.mentions) {
                 badge = (
-                    <span className='badge pull-right small'>{this.props.mentions}</span>
+                    <span className='mention-badge pull-right small'>{this.props.mentions}</span>
                 );
             }
         }
diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index 86e7c0a28..17a72e5a9 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -9,6 +9,21 @@
     z-index: 10;
 }
 
+.mention-badge {
+    background-color: #777;
+    border-radius: 10px;
+    color: #fff;
+    display: inline-block;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1;
+    min-width: 10px;
+    padding: 3px 7px;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
 .mentions__name {
     @include clearfix;
     cursor: pointer;
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index a7a99249b..25f1d2913 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -53,7 +53,7 @@
         padding: 1em 1em 0;
     }
 
-    .badge {
+    .mention-badge {
         background-color: $primary-color;
         position: absolute;
         right: 10px;
diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss
index cb003c828..9d1cc72f5 100644
--- a/webapp/sass/layout/_team-sidebar.scss
+++ b/webapp/sass/layout/_team-sidebar.scss
@@ -54,7 +54,7 @@
                         width: 31px;
                     }
 
-                    .badge {
+                    .mention-badge {
                         font-size: 10px;
                         position: absolute;
                         right: -6px;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 3404a0b82..b860585cb 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -534,7 +534,7 @@ export function applyTheme(theme) {
 
     if (theme.sidebarHeaderTextColor) {
         changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn, .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor);
-        changeCss('.app__body .sidebar-header-dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor);
+        changeCss('.app__body .sidebar-header-dropdown__icon svg', 'fill:' + theme.sidebarHeaderTextColor);
         changeCss('.sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8));
         changeCss('.sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor);
         changeCss('.app__body .modal .modal-header .modal-title, .app__body .modal .modal-header .modal-title .name, .app__body .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor);
@@ -558,14 +558,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('.app__body .sidebar--left .badge', 'background:' + theme.mentionBj);
-        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'background:' + theme.mentionBj + ' !important');
+        changeCss('.app__body .sidebar--left .mention-badge', 'background:' + theme.mentionBj);
+        changeCss('.multi-teams .team-sidebar .mention-badge', 'background:' + theme.mentionBj);
     }
 
     if (theme.mentionColor) {
         changeCss('.app__body .sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor);
-        changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor);
-        changeCss('.app__body .multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'color:' + theme.mentionColor + ' !important');
+        changeCss('.app__body .sidebar--left .mention-badge', 'color:' + theme.mentionColor);
+        changeCss('.app__body .multi-teams .team-sidebar .mention-badge', 'color:' + theme.mentionColor);
     }
 
     if (theme.centerChannelBg) {
@@ -671,7 +671,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .emoji-picker-react', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .emoji-picker-bottom', 'color:' + theme.centerChannelColor);
-        changeCss('.app__body .emoji-picker, .app__body .emoji-picker-react, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .emoji-picker, .app__body .emoji-picker-react-rhs-comment, .app__body .emoji-picker-react, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .emoji-picker, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));