diff --git a/css/_inlay.scss b/css/_inlay.scss
new file mode 100644
index 000000000..5cbd777f3
--- /dev/null
+++ b/css/_inlay.scss
@@ -0,0 +1,29 @@
+.inlay {
+ margin-top: 14%;
+ @include border-radius(3px);
+ padding: 40px 38px 44px;
+ color: #fff;
+ background: lighten(desaturate($defaultBackground, 70%), 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;
+ margin-top: 22px;
+ font-size: 16px;
+ }
+
+ &__icon {
+ margin: 0 10px;
+ font-size: 50px;
+ }
+}
\ No newline at end of file
diff --git a/css/_policy.scss b/css/_policy.scss
new file mode 100644
index 000000000..73e303bcf
--- /dev/null
+++ b/css/_policy.scss
@@ -0,0 +1,15 @@
+.policy {
+ &__logo {
+ display: block;
+ width: 200px;
+ height: 50px;
+ margin: 30px auto 0;
+ }
+
+ &__text {
+ text-align: center;
+ font-size: 14px;
+ line-height: 21px;
+ font-weight: 300;
+ }
+}
\ No newline at end of file
diff --git a/css/_variables.scss b/css/_variables.scss
index 269f829b9..117fb2a14 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -1,3 +1,5 @@
+@import "themes/light";
+
/**
* Style variables
*/
@@ -23,7 +25,6 @@ $defaultColor: #F1F1F1;
$defaultSideBarFontColor: #44A5FF;
$defaultSemiDarkColor: #ACACAC;
$defaultDarkColor: #2b3d5c;
-$defaultBackground: #474747;
$tooltipBg: rgba(0,0,0, 0.7);
/**
diff --git a/css/main.scss b/css/main.scss
index 532c90212..cb8e25ab3 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -29,15 +29,12 @@
/* Fonts END */
-/* Theme BEGIN */
-@import "themes/main";
-/* Theme END */
-
/* Modules BEGIN */
@import 'toastr';
@import 'base';
@import 'overlay/overlay';
+@import 'inlay';
@import 'reload_overlay/reload_overlay';
@import 'modals/dialog';
@import 'modals/feedback/feedback';
@@ -65,5 +62,6 @@
@import "connection-info";
@import 'aui-components/dropdown';
@import '404';
+@import 'policy';
/* Modules END */
diff --git a/css/overlay/_overlay.scss b/css/overlay/_overlay.scss
index 3152c460f..9727bd7be 100644
--- a/css/overlay/_overlay.scss
+++ b/css/overlay/_overlay.scss
@@ -1,30 +1,31 @@
-.overlay_container {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- position: fixed;
- z-index: $overlayZ;
- background: rgba(22, 185, 252, .9);
-}
+.overlay {
+ &__container {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ z-index: $overlayZ;
+ background: $defaultBackground;
+ }
-.overlay_content {
- color: #fff;
- text-align: center;
- width: 400px;
- height: 250px;
- top: 50%;
- left: 50%;
- position: absolute;
- margin-top: -125px;
- margin-left: -200px;
-}
+ &__content {
+ position: absolute;
+ margin: 0 auto;
+ height: 100%;
+ width: 56%;
+ left: 50%;
+ @include transform(translateX(-50%));
-.overlay_text_small {
- display: block;
- font-size: 18px;
-}
+ &_bottom {
+ position: absolute;
+ bottom: 0;
+ }
+ }
-.overlay_icon {
- font-size: 100px;
-}
+ &__policy {
+ position: absolute;
+ bottom: 24px;
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/css/themes/_light.scss b/css/themes/_light.scss
index 95ac124b0..ae8224eff 100644
--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@@ -22,6 +22,11 @@ $primaryButtonFontWeight: 400;
$buttonShadowColor: #192d4f;
+/**
+* Color variables
+**/
+$defaultBackground: #474747;
+
/**
* Connection indicator
**/
diff --git a/css/themes/_main.scss b/css/themes/_main.scss
deleted file mode 100644
index f49e1594b..000000000
--- a/css/themes/_main.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
-* Switch themes here
-*/
-
-@import "light";
\ No newline at end of file
diff --git a/interface_config.js b/interface_config.js
index 3521747ab..e67b9ef9a 100644
--- a/interface_config.js
+++ b/interface_config.js
@@ -69,5 +69,6 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
// disables the ringing sound when the RingOverlay is shown.
DISABLE_RINGING: false,
AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.4)",
- AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)"
+ AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)",
+ POLICY_LOGO: null
};
diff --git a/lang/main.json b/lang/main.json
index c0f440e20..acdba53d7 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -75,6 +75,10 @@
"content": "Learn about your users through easy integration with Piwik, Google Analytics, and other usage monitoring and statistics systems."
}
},
+ "startupoverlay": {
+ "policyText": " ",
+ "title": "__app__ needs to use your microphone and camera."
+ },
"toolbar": {
"mute": "Mute / Unmute",
"videomute": "Start / Stop camera",
diff --git a/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js b/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js
index 11c9fd2d3..38caa9dbe 100644
--- a/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js
+++ b/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js
@@ -1,4 +1,4 @@
-/* global */
+/* global interfaceConfig */
import Overlay from '../overlay/Overlay';
@@ -22,11 +22,33 @@ class GUMOverlayImpl extends Overlay {
* @inheritDoc
*/
_buildOverlayContent() {
- return `
-
-
- `;
+ let textKey = `userMedia.${this.browser}GrantPermissions`;
+ let titleKey = 'startupoverlay.title';
+ let titleOptions = '{ "postProcess": "resolveAppName" }';
+ let policyTextKey = 'startupoverlay.policyText';
+ let policyLogo = '';
+ let policyLogoSrc = interfaceConfig.POLICY_LOGO;
+ if (policyLogoSrc) {
+ policyLogo += (
+ `
+
+
+
+
+
+
+
+ `
+ );
}
}
diff --git a/modules/UI/overlay/Overlay.js b/modules/UI/overlay/Overlay.js
index babdc587a..361ce890a 100644
--- a/modules/UI/overlay/Overlay.js
+++ b/modules/UI/overlay/Overlay.js
@@ -34,8 +34,8 @@ export default class Overlay{
let overlayContent = this._buildOverlayContent();
this.$overlay = $(`
-