Rearrange overlay layout

css/_policy.scss

@@ -0,0 +1,5 @@
+.policy {
+    &__logo {
+
+    }
+}

css/overlay/_overlay.scss

@@ -1,30 +1,51 @@
-.overlay_container {
+.overlay {
+    &__container {
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         position: fixed;
         z-index: $overlayZ;
-    background: rgba(22, 185, 252, .9);
+        background: $defaultBackground;
     }
 
-.overlay_content {
+    &__content {
-    color: #fff;
+        margin: 0 auto;
-    text-align: center;
+        width: 56%;
-    width: 400px;
+
-    height: 250px;
+        &_bottom {
-    top: 50%;
-    left: 50%;
             position: absolute;
-    margin-top: -125px;
+            bottom: 0;
-    margin-left: -200px;
+        }
+    }
 }
 
-.overlay_text_small {
+.inlay {
+    margin-top: 14%;
+    @include border-radius(3px);
+    padding: 40px 38px 44px;
+    color: #fff;
+    background: lighten($defaultBackground, 20%);
+    text-align: center;
+
+    &__title {
+        margin: 12px 0;
+        padding-bottom: 17px;
+        color: $popoverFontColor;
+        font-size: 21px;
+        letter-spacing: 0.3px;
+        border-bottom: 1px solid $auiBorderColor;
+    }
+
+    &__text {
+        color: $popoverFontColor;
         display: block;
-    font-size: 18px;
+        margin-top: 22px;
+        font-size: 16px;
     }
 
-.overlay_icon {
+    &__icon {
-    font-size: 100px;
+        margin: 0 10px;
+        font-size: 50px;
+    }
 }

modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js

@@ -22,11 +22,19 @@ class GUMOverlayImpl extends Overlay {
      * @inheritDoc
      */
     _buildOverlayContent() {
-        return `
+    // `<span data-i18n='[html]userMedia.${this.browser}GrantPermissions'
-            <span class="overlay_icon icon-microphone"></span>
+    // class='inlay__text'></span>`
-            <span class="overlay_icon icon-camera"></span>
+        let title = 'HipChat Video needs to use your microphone and camera.';
-            <span data-i18n='[html]userMedia.${this.browser}GrantPermissions' 
+        let text;
-                  class='overlay_text_small'></span>`;
+        text = 'Select "Allow" when your browser asks for these permissions.';
+        return (
+            `<div class="inlay">
+                <span class="inlay__icon icon-microphone"></span>
+                <span class="inlay__icon icon-camera"></span>
+                <h3 class="inlay__title">${title}</h3>
+                <span class='inlay__text'>${text}</span>
+            </div>`
+        );
     }
 }
 

modules/UI/overlay/Overlay.js

@@ -34,8 +34,8 @@ export default class Overlay{
         let overlayContent = this._buildOverlayContent();
 
         this.$overlay = $(`
-            <div class='overlay_container'>
+            <div class='overlay__container'>
-                <div class='overlay_content'>
+                <div class='overlay__content'>
                     ${overlayContent}
                 </div>
             </div>`);