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

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;
     }

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) {

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>
                 );
             }
         }