Toolbar notice as React Component

css/_notice.scss

@@ -1,11 +1,12 @@
-#notice {
+.notice {
     position: relative;
     z-index: 3;
     margin-top: 6px;
+
+    &__message {
+        background-color: #000000;
+        color: white;
+        padding: 3px;
+        border-radius: 5px;
+    }
 }
-#noticeText {
-    background-color: #000000;
-    color: white;
-    padding: 3px;
-    border-radius: 5px;
-}

modules/UI/UI.js

@@ -315,12 +315,6 @@ UI.start = function () {
         // Initialise the recording module.
         if (config.enableRecording)
             Recording.init(eventEmitter, config.recordingType);
-
-        // Display notice message at the top of the toolbar
-        if (config.noticeMessage) {
-            $('#noticeText').text(config.noticeMessage);
-            UIUtil.setVisible('notice', true);
-        }
     } else {
         $("body").addClass("filmstrip-only");
         UIUtil.setVisible('mainToolbarContainer', false);

react/features/conference/components/Conference.web.js

@@ -8,23 +8,12 @@ import { DialogContainer } from '../../base/dialog';
 import { Watermarks } from '../../base/react';
 import { FeedbackButton } from '../../feedback';
 import { OverlayContainer } from '../../overlay';
+import { Notice } from '../../toolbar';
 import { HideNotificationBarStyle } from '../../unsupported-browser';
 
 declare var $: Function;
 declare var APP: Object;
 
-/**
- * For legacy reasons, inline style for display none.
- *
- * @private
- * @type {{
- *     display: string
- * }}
- */
-const _DISPLAY_NONE_STYLE = {
-    display: 'none'
-};
-
 /**
  * The conference page of the Web application.
  */
@@ -78,14 +67,8 @@ class Conference extends Component {
         return (
             <div id = 'videoconference_page'>
                 <div id = 'mainToolbarContainer'>
-                    <div
-                        className = 'notice'
-                        id = 'notice'
-                        style = { _DISPLAY_NONE_STYLE }>
-                        <span
-                            className = 'noticeText'
-                            id = 'noticeText' />
-                    </div>
+                    <Notice />
+
                     <div
                         className = 'toolbar'
                         id = 'mainToolbar' />

react/features/toolbar/components/Notice.js

@@ -0,0 +1,52 @@
+/* @flow */
+
+import React, { Component } from 'react';
+
+declare var config: Object;
+
+/**
+ * Notice react component.
+ *
+ * @class Notice
+ */
+export default class Notice extends Component {
+    state: Object;
+
+    /**
+     * Constructor of Notice component.
+     *
+     * @param {Object} props - The read-only React Component props with which
+     * the new instance is to be initialized.
+     */
+    constructor(props: Object) {
+        super(props);
+
+        const { noticeMessage } = config;
+
+        this.state = {
+            noticeMessage
+        };
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { noticeMessage } = this.state;
+
+        if (!noticeMessage) {
+            return null;
+        }
+
+        return (
+            <div className = 'notice'>
+                <span className = 'notice__message' >
+                    { noticeMessage }
+                </span>
+            </div>
+        );
+    }
+}

react/features/toolbar/components/index.js

@@ -1 +1,2 @@
+export { default as Notice } from './Notice';
 export { default as Toolbar } from './Toolbar';