feat(live-streaming): add beta tag to mobile

react/features/base/toolbox/components/ToolboxItem.native.js

@@ -51,6 +51,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
     _renderItem() {
         const {
             disabled,
+            elementAfter,
             onClick,
             showLabel,
             styles
@@ -72,6 +73,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
                     <Text style = { styles && styles.labelStyle }>
                         { this.label }
                     </Text>
+                    { elementAfter }
                 </View>
             );
 

react/features/recording/components/LiveStream/AbstractLiveStreamButton.js

@@ -1,11 +1,13 @@
 // @flow
 
+import React from 'react';
 import { openDialog } from '../../../base/dialog';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 import {
     isLocalParticipantModerator,
     getLocalParticipant
 } from '../../../base/participants';
+import { Container, Text } from '../../../base/react';
 import {
     AbstractButton,
     type AbstractButtonProps
@@ -15,6 +17,7 @@ import { getActiveSession } from '../../functions';
 
 import StartLiveStreamDialog from './StartLiveStreamDialog';
 import StopLiveStreamDialog from './StopLiveStreamDialog';
+import styles from './styles';
 
 /**
  * The type of the React {@code Component} props of
@@ -47,6 +50,26 @@ export default class AbstractLiveStreamButton<P: Props>
     label = 'dialog.startLiveStreaming';
     toggledLabel = 'dialog.stopLiveStreaming';
 
+    /**
+     * Helper function to be implemented by subclasses, which returns
+     * a React Element to display (a beta tag) at the end of the button.
+     *
+     * @override
+     * @protected
+     * @returns {ReactElement}
+     */
+    _getElementAfter() {
+        return (
+            <Container
+                className = { 'beta-tag' }
+                style = { styles && { ...styles.betaTag } }>
+                <Text style = { styles && { ...styles.betaTagText } }>
+                    { this.props.t('recording.beta') }
+                </Text>
+            </Container>
+        );
+    }
+
     /**
      * Handles clicking / pressing the button.
      *

react/features/recording/components/LiveStream/LiveStreamButton.web.js

@@ -1,6 +1,5 @@
 // @flow
 
-import React from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
@@ -57,22 +56,6 @@ class LiveStreamButton extends AbstractLiveStreamButton<Props> {
         this.tooltip = newProps._liveStreamDisabledTooltipKey;
     }
 
-    /**
-     * Helper function to be implemented by subclasses, which returns
-     * a React Element to display (a beta tag) at the end of the button.
-     *
-     * @override
-     * @protected
-     * @returns {boolean}
-     */
-    _getElementAfter() {
-        return (
-            <span className = 'beta-tag'>
-                { this.props.t('recording.beta') }
-            </span>
-        );
-    }
-
     /**
      * Helper function to be implemented by subclasses, which must return a
      * boolean value indicating if this button is disabled or not.

react/features/recording/components/LiveStream/styles.js → react/features/recording/components/LiveStream/styles.native.js

@@ -1,11 +1,24 @@
 // @flow
 
-import { BoxModel, createStyleSheet } from '../../../base/styles';
+import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
 
 /**
  * The styles of the React {@code Components} of LiveStream.
  */
 export default createStyleSheet({
+    betaTag: {
+        backgroundColor: ColorPalette.darkGrey,
+        borderRadius: 2,
+        marginLeft: 16,
+        opacity: 0.90,
+        paddingLeft: 6,
+        paddingRight: 6
+    },
+
+    betaTagText: {
+        color: ColorPalette.white,
+        fontWeight: 'bold'
+    },
 
     streamKeyFormWrapper: {
         flexDirection: 'column',

react/features/toolbox/components/native/styles.js

@@ -180,7 +180,7 @@ const overflowMenuStyles = createStyleSheet({
      * {@code OverflowMenu}.
      */
     label: {
-        flex: 1,
+        flexShrink: 1,
         fontSize: 16,
         marginLeft: 32,
         opacity: 0.90