Merge pull request #7382 from KDSBrowne/_summit-move-modal-warnings-to-top

Move warnings to top of modals

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

@@ -281,7 +281,6 @@ class AudioModal extends Component {
       skipCheck,
       audioLocked,
       isMobileNative,
-      isIEOrEdge,
       formattedDialNum,
     } = this.props;
 
@@ -316,18 +315,6 @@ class AudioModal extends Component {
             )
             : null}
         </span>
-        {isIEOrEdge ? (
-          <p className={cx(styles.text, styles.browserWarning)}>
-            <FormattedMessage
-              id="app.audioModal.unsupportedBrowserLabel"
-              description="Warning when someone joins with a browser that isnt supported"
-              values={{
-                0: <a href="https://www.google.com/chrome/">Chrome</a>,
-                1: <a href="https://getfirefox.com">Firefox</a>,
-              }}
-            />
-          </p>
-        ) : null}
         {formattedDialNum ? (
           <Button
             className={styles.audioDial}
@@ -444,6 +431,7 @@ class AudioModal extends Component {
       showPermissionsOvelay,
       isIOSChrome,
       closeModal,
+      isIEOrEdge,
     } = this.props;
 
     const { content } = this.state;
@@ -458,6 +446,18 @@ class AudioModal extends Component {
           hideBorder
           contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
         >
+          {isIEOrEdge ? (
+            <p className={cx(styles.text, styles.browserWarning)}>
+              <FormattedMessage
+                id="app.audioModal.unsupportedBrowserLabel"
+                description="Warning when someone joins with a browser that isnt supported"
+                values={{
+                  0: <a href="https://www.google.com/chrome/">Chrome</a>,
+                  1: <a href="https://getfirefox.com">Firefox</a>,
+                }}
+              />
+            </p>
+          ) : null}
           {!this.skipAudioOptions()
 
             ? (

bigbluebutton-html5/imports/ui/components/video-preview/component.jsx

@@ -417,6 +417,18 @@ class VideoPreview extends Component {
         onRequestClose={this.handleProceed}
         hideBorder
       >
+        {browser().name === 'edge' || browser().name === 'ie' ? (
+          <p className={styles.browserWarning}>
+            <FormattedMessage
+              id="app.audioModal.unsupportedBrowserLabel"
+              description="Warning when someone joins with a browser that isnt supported"
+              values={{
+                0: <a href="https://www.google.com/chrome/">Chrome</a>,
+                1: <a href="https://getfirefox.com">Firefox</a>,
+              }}
+            />
+          </p>
+        ) : null }
         <div className={styles.title}>
           {intl.formatMessage(intlMessages.webcamSettingsTitle)}
         </div>
@@ -431,11 +443,12 @@ class VideoPreview extends Component {
             />
           </div>
           <div className={styles.col}>
-            <label className={styles.label}>
+            <label className={styles.label} htmlFor="setCam">
               {intl.formatMessage(intlMessages.cameraLabel)}
             </label>
             {availableWebcams && availableWebcams.length > 0 ? (
               <select
+                id="setCam"
                 value={webcamDeviceId}
                 className={styles.select}
                 onChange={this.handleSelectWebcam.bind(this)}
@@ -452,11 +465,12 @@ class VideoPreview extends Component {
                   {intl.formatMessage(intlMessages.webcamNotFoundLabel)}
                 </span>
               )}
-            <label className={styles.label}>
+            <label className={styles.label} htmlFor="setQuality">
               {intl.formatMessage(intlMessages.qualityLabel)}
             </label>
             {availableProfiles && availableProfiles.length > 0 ? (
               <select
+                id="setQuality"
                 value={selectedProfile}
                 className={styles.select}
                 onChange={this.handleSelectProfile.bind(this)}
@@ -475,18 +489,7 @@ class VideoPreview extends Component {
               )}
           </div>
         </div>
-        {browser().name === 'edge' || browser().name === 'ie' ? (
+
-          <p className={styles.browserWarning}>
-            <FormattedMessage
-              id="app.audioModal.unsupportedBrowserLabel"
-              description="Warning when someone joins with a browser that isnt supported"
-              values={{
-                0: <a href="https://www.google.com/chrome/">Chrome</a>,
-                1: <a href="https://getfirefox.com">Firefox</a>,
-              }}
-            />
-          </p>
-        ) : null }
         <div className={styles.footer}>
           <div className={styles.actions}>
             <Button