feat(toolbar): add beta tag to live streaming button (#3007)

* feat(toolbar): add beta tag to live streaming button

* tweak colors and border radius

react/features/toolbox/components/web/OverflowMenuLiveStreamingItem.js

@@ -0,0 +1,69 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import { translate } from '../../../base/i18n';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link OverflowMenuLiveStreamingItem}.
+ */
+type Props = {
+
+    /**
+     * The callback to invoke when {@code OverflowMenuLiveStreamingItem} is
+     * clicked.
+     */
+    onClick: Function,
+
+    /**
+     * The current live streaming session, if any.
+     */
+    session: ?Object,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * React {@code Component} for starting or stopping a live streaming of the
+ * current conference and displaying the current state of live streaming.
+ *
+ * @extends Component
+ */
+class OverflowMenuLiveStreamingItem extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { onClick, session, t } = this.props;
+
+        const translationKey = session
+            ? 'dialog.stopLiveStreaming'
+            : 'dialog.startLiveStreaming';
+
+        return (
+            <li
+                aria-label = 'Live stream'
+                className = 'overflow-menu-item'
+                onClick = { onClick }>
+                <span className = 'overflow-menu-item-icon'>
+                    <i className = 'icon-public' />
+                </span>
+                <span className = 'profile-text'>
+                    { t(translationKey) }
+                </span>
+                <span className = 'beta-tag'>
+                    { t('recording.beta') }
+                </span>
+            </li>
+        );
+    }
+}
+
+export default translate(OverflowMenuLiveStreamingItem);