PLT-6651 - Overlay issue modal (#6473)

* PLT-6651 - Overlay issue modal

* Fixing mentions badge

9 files changed, 18 insertions, 12 deletions

diff --git a/webapp/components/channel_switch_modal.jsx b/webapp/components/channel_switch_modal.jsx
index 1ad9249e8..0f1fc4252 100644
--- a/webapp/components/channel_switch_modal.jsx
+++ b/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}
diff --git a/webapp/components/notify_counts.jsx b/webapp/components/notify_counts.jsx
index 6fcb3acdf..f05ecbf12 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='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;
     }
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index a0e69c52a..f8b3616f3 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='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) {
diff --git a/webapp/components/team_sidebar/components/team_button.jsx b/webapp/components/team_sidebar/components/team_button.jsx
index 5a9b9dd59..e0670d6da 100644
--- a/webapp/components/team_sidebar/components/team_button.jsx
+++ b/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>
                 );
             }
         }
diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index 17a72e5a9..cfc12f1ce 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -9,7 +9,7 @@
     z-index: 10;
 }
 
-.mention-badge {
+.badge {
     background-color: #777;
     border-radius: 10px;
     color: #fff;
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index fc1584ea9..f5489aa2b 100644
--- a/webapp/sass/components/_modal.scss
+++ b/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 {
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index 25f1d2913..a7a99249b 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/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;
diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss
index 9d1cc72f5..cb003c828 100644
--- a/webapp/sass/layout/_team-sidebar.scss
+++ b/webapp/sass/layout/_team-sidebar.scss
@@ -54,7 +54,7 @@
                         width: 31px;
                     }
 
-                    .mention-badge {
+                    .badge {
                         font-size: 10px;
                         position: absolute;
                         right: -6px;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index b860585cb..da0f1fa67 100644
--- a/webapp/utils/utils.jsx
+++ b/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) {