PLT-6651 - Overlay issue modal (#6473)

* PLT-6651 - Overlay issue modal

* Fixing mentions badge

webapp/components/channel_switch_modal.jsx

@@ -139,7 +139,7 @@ export default class SwitchChannelModal extends React.Component {
         const message = this.state.error;
         return (
             <Modal
-                dialogClassName='channel-switch-modal'
+                dialogClassName='channel-switch-modal modal--overflow'
                 ref='modal'
                 show={this.props.show}
                 onHide={this.onHide}

webapp/components/notify_counts.jsx

@@ -37,9 +37,9 @@ export default class NotifyCounts extends React.Component {
     }
     render() {
         if (this.state.mentionCount) {
-            return <span className='mention-badge badge-notify'>{this.state.mentionCount}</span>;
+            return <span className='badge badge-notify'>{this.state.mentionCount}</span>;
         } else if (this.state.messageCount) {
-            return <span className='mention-badge badge-notify'>{'•'}</span>;
+            return <span className='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='mention-badge pull-right small'>{unreadCount.mentions}</span>;
+                badge = <span className='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

@@ -42,7 +42,7 @@ export default class TeamButton extends React.Component {
 
             if (this.props.mentions) {
                 badge = (
-                    <span className='mention-badge pull-right small'>{this.props.mentions}</span>
+                    <span className='badge pull-right small'>{this.props.mentions}</span>
                 );
             }
         }

webapp/sass/components/_mentions.scss

@@ -9,7 +9,7 @@
     z-index: 10;
 }
 
-.mention-badge {
+.badge {
     background-color: #777;
     border-radius: 10px;
     color: #fff;

webapp/sass/components/_modal.scss

@@ -76,6 +76,12 @@
         color: alpha-color($black, .9);
         width: 100%;
 
+        .modal--overflow {
+            .modal-body {
+                overflow: visible;
+            }
+        }
+
         &.modal-image {
             .modal-backdrop {
                 &.in {

webapp/sass/layout/_sidebar-left.scss

@@ -53,7 +53,7 @@
         padding: 1em 1em 0;
     }
 
-    .mention-badge {
+    .badge {
         background-color: $primary-color;
         position: absolute;
         right: 10px;

webapp/sass/layout/_team-sidebar.scss

@@ -54,7 +54,7 @@
                         width: 31px;
                     }
 
-                    .mention-badge {
+                    .badge {
                         font-size: 10px;
                         position: absolute;
                         right: -6px;

webapp/utils/utils.jsx

@@ -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 .mention-badge', 'background:' + theme.mentionBj);
-        changeCss('.multi-teams .team-sidebar .mention-badge', 'background:' + theme.mentionBj);
+        changeCss('.app__body .sidebar--left .badge', 'background:' + theme.mentionBj);
+        changeCss('.multi-teams .team-sidebar .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 .mention-badge', 'color:' + theme.mentionColor);
-        changeCss('.app__body .multi-teams .team-sidebar .mention-badge', 'color:' + theme.mentionColor);
+        changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor);
+        changeCss('.app__body .multi-teams .team-sidebar .badge', 'color:' + theme.mentionColor);
     }
 
     if (theme.centerChannelBg) {