fix(UserMediaPermissionsGuidanceOverlay): broken display

css/overlay/_overlay.scss

@@ -1,30 +1,15 @@
-.overlay {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: $overlayZ;
-    background: #21B9FC; /* Old browsers */
-    opacity: 0.75;
-    display: block;
-}
-
-.overlay_transparent {
-    background: rgba(22, 185, 252, .9);
-}
-
 .overlay_container {
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: $overlayZ;
+    background: rgba(22, 185, 252, .9);
 }
 
 .overlay_content {
     color: #fff;
-    font-weight: normal;
-    font-size: 20px;
     text-align: center;
     width: 400px;
     height: 250px;
@@ -35,14 +20,11 @@
     margin-left: -200px;
 }
 
-
 .overlay_text_small {
+    display: block;
     font-size: 18px;
 }
 
 .overlay_icon {
-    position: relative;
-    z-index: 1013;
-    float: none;
     font-size: 100px;
 }

modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js

@@ -11,12 +11,11 @@ let $overlay;
 function buildOverlayHtml(browser) {
     $overlay = $(`
         <div class='overlay_container'>
-            <div class='overlay overlay_transparent' />
             <div class='overlay_content'>
                 <span class="overlay_icon icon-microphone"></span>
                 <span class="overlay_icon icon-camera"></span>
                 <span data-i18n='[html]userMedia.${browser}GrantPermissions' 
-                    class='overlay_text overlay_text_small'></span>
+                      class='overlay_text_small'></span>
             </div>
         </div>`);