Merge pull request #3609 from KDSBrowne/Audio-Modal-Reduction

Add Transaprent Base for Audio Modal only

bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx

@@ -7,7 +7,7 @@ export default class MuteAudio extends React.Component {
   render() {
     const { isInAudio, isMuted, callback, isTalking} = this.props;
     let label = !isMuted ? 'Mute' : 'Unmute';
-    let icon = !isMuted ? 'audio-off' : 'audio';
+    let icon = !isMuted ? 'audio' : 'audio-off';
     let className = !isInAudio ? styles.invisible : null;
     let tabIndex = !isInAudio ? -1 : 0;
 

bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx

@@ -53,6 +53,7 @@ export default class Audio extends React.Component {
   render() {
     return (
       <ModalBase
+        isTransparent={true}
         isOpen={true}
         onHide={null}
         onShow={null}

bigbluebutton-html5/imports/ui/components/modal/base/component.jsx

@@ -7,6 +7,7 @@ const propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onShow: PropTypes.func,
   onHide: PropTypes.func,
+  isTransparent: PropTypes.bool
 };
 
 const defaultProps = {
@@ -41,12 +42,15 @@ export default class ModalBase extends Component {
       onShow,
       onHide,
       className,
+      isTransparent,
     } = this.props;
 
+    let styleOverlay = (isTransparent) ? styles.transparentOverlay : styles.overlay;
+
     return (
       <ReactModal
       className={cx(styles.modal, className)}
-      overlayClassName={styles.overlay}
+      overlayClassName={styleOverlay}
       portalClassName={styles.portal}
       isOpen={isOpen}
       onAfterOpen={this.handleAfterOpen}

bigbluebutton-html5/imports/ui/components/modal/base/styles.scss

@@ -20,11 +20,13 @@
   }
 }
 
-.overlay {
+.transparentOverlay {
+  background: transparentize($color-gray-dark, .40) !important;
+}
+
+.overlay, .transparentOverlay {
   z-index: 1000;
-  // background: transparentize($color-white, .35);
   background: #fff;
-  // background: transparentize($color-gray-dark, .40);
   display: flex;
   align-items: center;
   justify-content: center;