diff --git a/react/features/overlay/components/AbstractOverlay.js b/react/features/overlay/components/AbstractOverlay.js
deleted file mode 100644
index 1c60c317a8..0000000000
--- a/react/features/overlay/components/AbstractOverlay.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/* global APP */
-
-import React, { Component } from 'react';
-
-/**
- * Implements an abstract React Component for overlay - the components which are
- * displayed on top of the application covering the whole screen.
- *
- * @abstract
- */
-export default class AbstractOverlay extends Component {
-    /**
-     * Initializes a new AbstractOverlay instance.
-     *
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     * @public
-     */
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            /**
-             * Indicates the CSS style of the overlay. If true, then ighter;
-             * darker, otherwise.
-             *
-             * @type {boolean}
-             */
-            isLightOverlay: false
-        };
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement|null}
-     */
-    render() {
-        const containerClass
-            = this.state.isLightOverlay
-                ? 'overlay__container-light'
-                : 'overlay__container';
-
-        return (
-            <div
-                className = { containerClass }
-                id = 'overlay'>
-                <div className = 'overlay__content'>
-                    {
-                        this._renderOverlayContent()
-                    }
-                </div>
-            </div>
-        );
-    }
-
-    /**
-     * Reloads the page.
-     *
-     * @returns {void}
-     * @protected
-     */
-    _reconnectNow() {
-        // FIXME: In future we should dispatch an action here that will result
-        // in reload.
-        APP.ConferenceUrl.reload();
-    }
-
-    /**
-     * Abstract method which should be used by subclasses to provide the overlay
-     * content.
-     *
-     * @returns {ReactElement|null}
-     * @protected
-     */
-    _renderOverlayContent() {
-        return null;
-    }
-}
diff --git a/react/features/overlay/components/OverlayFrame.js b/react/features/overlay/components/OverlayFrame.js
new file mode 100644
index 0000000000..6f2f9f9dc7
--- /dev/null
+++ b/react/features/overlay/components/OverlayFrame.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+
+/**
+ * Implements an abstract React Component for overlay - the components which are
+ * displayed on top of the application covering the whole screen.
+ *
+ * @abstract
+ */
+export default class OverlayFrame extends Component {
+    /**
+     * OverlayFrame component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * The children components to be displayed into the overlay frame.
+         */
+        children: React.PropTypes.node.isRequired,
+
+        /**
+         * Indicates the css style of the overlay. If true, then lighter;
+         * darker, otherwise.
+         *
+         * @type {boolean}
+         */
+        isLightOverlay: React.PropTypes.bool
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement|null}
+     */
+    render() {
+        const containerClass = this.props.isLightOverlay
+            ? 'overlay__container-light' : 'overlay__container';
+
+        return (
+            <div
+                className = { containerClass }
+                id = 'overlay'>
+                <div className = 'overlay__content'>
+                    {
+                        this.props.children
+                    }
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/react/features/overlay/components/PageReloadOverlay.js b/react/features/overlay/components/PageReloadOverlay.js
index 54f17d90d5..946ea1c4d2 100644
--- a/react/features/overlay/components/PageReloadOverlay.js
+++ b/react/features/overlay/components/PageReloadOverlay.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 import { randomInt } from '../../base/util';
 
-import AbstractOverlay from './AbstractOverlay';
+import OverlayFrame from './OverlayFrame';
+import { reconnectNow } from '../functions';
 import ReloadTimer from './ReloadTimer';
 
 declare var APP: Object;
@@ -15,7 +16,7 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
  * conference is reloaded. Shows a warning message and counts down towards the
  * reload.
  */
-class PageReloadOverlay extends AbstractOverlay {
+class PageReloadOverlay extends Component {
     /**
      * PageReloadOverlay component's property types.
      *
@@ -32,11 +33,18 @@ class PageReloadOverlay extends AbstractOverlay {
 
         /**
          * The reason for the error that will cause the reload.
-         * NOTE: Used by PageReloadOverlay only.
          * @public
          * @type {string}
          */
-        reason: React.PropTypes.string
+        reason: React.PropTypes.string,
+
+        /**
+         * The function to translate human-readable text.
+         *
+         * @public
+         * @type {Function}
+         */
+        t: React.PropTypes.func
     }
 
     /**
@@ -69,8 +77,6 @@ class PageReloadOverlay extends AbstractOverlay {
         }
 
         this.state = {
-            ...this.state,
-
             /**
              * Indicates the css style of the overlay. If true, then lighter;
              * darker, otherwise.
@@ -110,8 +116,6 @@ class PageReloadOverlay extends AbstractOverlay {
      * @returns {void}
      */
     componentDidMount() {
-        super.componentDidMount();
-
         // FIXME (CallStats - issue) This event will not make it to CallStats
         // because the log queue is not flushed before "fabric terminated" is
         // sent to the backed.
@@ -143,7 +147,7 @@ class PageReloadOverlay extends AbstractOverlay {
                 <button
                     className = { className }
                     id = 'reconnectNow'
-                    onClick = { this._reconnectNow }>
+                    onClick = { reconnectNow }>
                     { t('dialog.reconnectNow') }
                 </button>
             );
@@ -156,36 +160,36 @@ class PageReloadOverlay extends AbstractOverlay {
     }
 
     /**
-     * Constructs overlay body with the warning message and count down towards
-     * the conference reload.
+     * Implements React's {@link Component#render()}.
      *
+     * @inheritdoc
      * @returns {ReactElement|null}
-     * @override
-     * @protected
      */
-    _renderOverlayContent() {
+    render() {
         const { t } = this.props;
 
         /* eslint-disable react/jsx-handler-names */
 
         return (
-            <div className = 'inlay'>
-                <span
-                    className = 'reload_overlay_title'>
-                    { t(this.state.title) }
-                </span>
-                <span
-                    className = 'reload_overlay_text'>
-                    { t(this.state.message) }
-                </span>
-                <ReloadTimer
-                    end = { 0 }
-                    interval = { 1 }
-                    onFinish = { this._reconnectNow }
-                    start = { this.state.timeoutSeconds }
-                    step = { -1 } />
-                { this._renderButton() }
-            </div>
+            <OverlayFrame isLightOverlay = { this.state.isLightOverlay }>
+                <div className = 'inlay'>
+                    <span
+                        className = 'reload_overlay_title'>
+                        { t(this.state.title) }
+                    </span>
+                    <span
+                        className = 'reload_overlay_text'>
+                        { t(this.state.message) }
+                    </span>
+                    <ReloadTimer
+                        end = { 0 }
+                        interval = { 1 }
+                        onFinish = { reconnectNow }
+                        start = { this.state.timeoutSeconds }
+                        step = { -1 } />
+                    { this._renderButton() }
+                </div>
+            </OverlayFrame>
         );
 
         /* eslint-enable react/jsx-handler-names */
diff --git a/react/features/overlay/components/UserMediaPermissionsOverlay.js b/react/features/overlay/components/UserMediaPermissionsOverlay.js
index 193563b983..d07012030f 100644
--- a/react/features/overlay/components/UserMediaPermissionsOverlay.js
+++ b/react/features/overlay/components/UserMediaPermissionsOverlay.js
@@ -1,16 +1,16 @@
 /* global interfaceConfig */
 
-import React from 'react';
+import React, { Component } from 'react';
 
 import { translate, translateToHTML } from '../../base/i18n';
 
-import AbstractOverlay from './AbstractOverlay';
+import OverlayFrame from './OverlayFrame';
 
 /**
  * Implements a React Component for overlay with guidance how to proceed with
  * gUM prompt.
  */
-class UserMediaPermissionsOverlay extends AbstractOverlay {
+class UserMediaPermissionsOverlay extends Component {
     /**
      * UserMediaPermissionsOverlay component's property types.
      *
@@ -24,7 +24,15 @@ class UserMediaPermissionsOverlay extends AbstractOverlay {
          * @public
          * @type {string}
          */
-        browser: React.PropTypes.string
+        browser: React.PropTypes.string,
+
+        /**
+         * The function to translate human-readable text.
+         *
+         * @public
+         * @type {Function}
+         */
+        t: React.PropTypes.func
     }
 
     /**
@@ -48,18 +56,16 @@ class UserMediaPermissionsOverlay extends AbstractOverlay {
     }
 
     /**
-     * Constructs overlay body with the message with guidance how to proceed
-     * with gUM prompt.
+     * Implements React's {@link Component#render()}.
      *
+     * @inheritdoc
      * @returns {ReactElement|null}
-     * @override
-     * @protected
      */
-    _renderOverlayContent() {
+    render() {
         const { browser, t } = this.props;
 
         return (
-            <div>
+            <OverlayFrame>
                 <div className = 'inlay'>
                     <span className = 'inlay__icon icon-microphone' />
                     <span className = 'inlay__icon icon-camera' />
@@ -80,13 +86,13 @@ class UserMediaPermissionsOverlay extends AbstractOverlay {
                 </div>
                 <div className = 'policy overlay__policy'>
                     <p className = 'policy__text'>
-                        { t('startupoverlay.policyText') }
+                        { translateToHTML(t, 'startupoverlay.policyText') }
                     </p>
                     {
                         this._renderPolicyLogo()
                     }
                 </div>
-            </div>
+            </OverlayFrame>
         );
     }
 
diff --git a/react/features/overlay/functions.js b/react/features/overlay/functions.js
new file mode 100644
index 0000000000..d9f4862332
--- /dev/null
+++ b/react/features/overlay/functions.js
@@ -0,0 +1,12 @@
+/* global APP */
+/**
+ * Reloads the page.
+ *
+ * @returns {void}
+ * @protected
+ */
+export function reconnectNow() {
+    // FIXME: In future we should dispatch an action here that will result
+    // in reload.
+    APP.ConferenceUrl.reload();
+}