feat(recording/LiveStream): native ui updates

react/features/google-api/components/GoogleSignInButton.native.js

@@ -1,9 +1,11 @@
 // @flow
 
 import React from 'react';
-import { Image, Text, TouchableOpacity } from 'react-native';
+import { Image, TouchableOpacity } from 'react-native';
 
 import { translate } from '../../base/i18n';
+import Button from '../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../base/ui/constants.native';
 
 import AbstractGoogleSignInButton from './AbstractGoogleSignInButton';
 import styles from './styles';
@@ -33,17 +35,16 @@ class GoogleSignInButton extends AbstractGoogleSignInButton {
      * @returns {ReactElement}
      */
     render() {
-        const { onClick, signedIn, t } = this.props;
+        const { onClick, signedIn } = this.props;
 
         if (signedIn) {
             return (
-                <TouchableOpacity
+                <Button
-                    onPress = { onClick }
+                    accessibilityLabel = 'liveStreaming.signOut'
-                    style = { styles.signOutButton } >
+                    labelKey = 'liveStreaming.signOut'
-                    <Text style = { styles.signOutButtonText }>
+                    onClick = { onClick }
-                        { t('liveStreaming.signOut') }
+                    style = { styles.signOutButton }
-                    </Text>
+                    type = { BUTTON_TYPES.SECONDARY } />
-                </TouchableOpacity>
             );
         }
 

react/features/google-api/components/styles.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { ColorPalette, createStyleSheet } from '../../base/styles';
+import { createStyleSheet } from '../../base/styles';
 
 /**
  * For styling explanations, see:
@@ -34,22 +34,8 @@ export default createStyleSheet({
      * Google).
      */
     signOutButton: {
-        alignItems: 'center',
+        alignSelf: 'center',
-        borderColor: ColorPalette.lightGrey,
+        maxWidth: 104,
-        borderRadius: 3,
+        width: 'auto'
-        borderWidth: 1,
-        color: ColorPalette.white,
-        height: BUTTON_HEIGHT,
-        justifyContent: 'center'
-    },
-
-    /**
-     * Text of the sign out button.
-     */
-    signOutButtonText: {
-        color: ColorPalette.blue,
-        fontSize: 14,
-        fontWeight: 'bold'
     }
-
 });

react/features/recording/components/LiveStream/native/StreamKeyForm.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Linking, Text, TouchableOpacity, View } from 'react-native';
+import { Linking, Text, View } from 'react-native';
 
 import { _abstractMapStateToProps } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
 import { StyleType } from '../../../../base/styles';
+import Button from '../../../../base/ui/components/native/Button';
 import Input from '../../../../base/ui/components/native/Input';
+import { BUTTON_TYPES } from '../../../../base/ui/constants.native';
 import AbstractStreamKeyForm, {
     type Props as AbstractProps
 } from '../AbstractStreamKeyForm';
@@ -54,81 +56,51 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
         const { _dialogStyles, t } = this.props;
 
         return (
-            <View style = { styles.formWrapper }>
+            <>
-                <Text
+                <View style = { styles.formWrapper }>
-                    style = { [
+                    <Input
-                        _dialogStyles.text,
+                        customStyles = {{ input: styles.streamKeyInput }}
-                        styles.text,
+                        onChange = { this._onInputChange }
-                        styles.streamKeyInputLabel
+                        placeholder = { t('liveStreaming.enterStreamKey') }
-                    ] }>
+                        value = { this.props.value } />
-                    {
+                    <View style = { styles.formValidation }>
-                        t('dialog.streamKey')
+                        {
-                    }
+                            this.state.showValidationError
-                </Text>
+                                ? <View style = { styles.formValidationItem }>
-                <Input
+                                    <Text
-                    customStyles = {{ input: styles.streamKeyInput }}
+                                        style = { [
-                    onChange = { this._onInputChange }
+                                            _dialogStyles.text,
-                    placeholder = { t('liveStreaming.enterStreamKey') }
+                                            styles.warningText
-                    value = { this.props.value } />
+                                        ] }>
-                <View style = { styles.formFooter }>
+                                        { t('liveStreaming.invalidStreamKey') }
-                    {
+                                    </Text>
-                        this.state.showValidationError
+                                </View>
-                            ? <View style = { styles.formFooterItem }>
+                                : null
-                                <Text
+                        }
-                                    style = { [
+
-                                        _dialogStyles.text,
-                                        styles.warningText
-                                    ] }>
-                                    { t('liveStreaming.invalidStreamKey') }
-                                </Text>
-                            </View>
-                            : null
-                    }
-                    <View style = { styles.formFooterItem }>
-                        <TouchableOpacity
-                            onPress = { this._onOpenHelp }
-                            style = { styles.streamKeyHelp } >
-                            <Text
-                                style = { [
-                                    _dialogStyles.text,
-                                    styles.text
-                                ] }>
-                                {
-                                    t('liveStreaming.streamIdHelp')
-                                }
-                            </Text>
-                        </TouchableOpacity>
                     </View>
                 </View>
-                <View>
+                <View style = { styles.formButtonsWrapper }>
-                    <TouchableOpacity onPress = { this._onOpenYoutubeTerms }>
+                    <Button
-                        <Text
+                        accessibilityLabel = 'liveStreaming.streamIdHelp'
-                            style = { [
+                        labelKey = 'liveStreaming.streamIdHelp'
-                                _dialogStyles.text,
+                        labelStyle = { styles.buttonLabelStyle }
-                                styles.text,
+                        onClick = { this._onOpenHelp }
-                                styles.tcText
+                        type = { BUTTON_TYPES.TERTIARY } />
-                            ] }>
+                    <Button
-                            {
+                        accessibilityLabel = 'liveStreaming.youtubeTerms'
-                                t('liveStreaming.youtubeTerms')
+                        labelKey = 'liveStreaming.youtubeTerms'
-                            }
+                        labelStyle = { styles.buttonLabelStyle }
-                        </Text>
+                        onClick = { this._onOpenYoutubeTerms }
-                    </TouchableOpacity>
+                        type = { BUTTON_TYPES.TERTIARY } />
-                </View>
+                    <Button
-                <View>
+                        accessibilityLabel = 'liveStreaming.googlePrivacyPolicy'
-                    <TouchableOpacity onPress = { this._onOpenGooglePrivacyPolicy }>
+                        labelKey = 'liveStreaming.googlePrivacyPolicy'
-                        <Text
+                        labelStyle = { styles.buttonLabelStyle }
-                            style = { [
+                        onClick = { this._onOpenGooglePrivacyPolicy }
-                                _dialogStyles.text,
+                        type = { BUTTON_TYPES.TERTIARY } />
-                                styles.text,
-                                styles.tcText
-                            ] }>
-                            {
-                                t('liveStreaming.googlePrivacyPolicy')
-                            }
-                        </Text>
-                    </TouchableOpacity>
                 </View>
-            </View>
+            </>
         );
     }
 

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

@@ -30,15 +30,25 @@ export default createStyleSheet({
     /**
      * Wrapper for the last element in the form.
      */
-    formFooter: {
+    formValidation: {
-        flexDirection: 'row'
+        flexDirection: 'row',
+        height: BaseTheme.spacing[4]
     },
 
-    /**
+    formValidationItem: {
-     * Wrapper for individual children in the last element of the form.
+        alignSelf: 'flex-start',
-     */
+        marginVertical: BaseTheme.spacing[1]
-    formFooterItem: {
+    },
-        flex: 1
+
+    formButtonsWrapper: {
+        alignSelf: 'center',
+        display: 'flex',
+        maxWidth: 200,
+        width: 'auto'
+    },
+
+    buttonLabelStyle: {
+        color: BaseTheme.palette.link01
     },
 
     /**
@@ -73,22 +83,10 @@ export default createStyleSheet({
      */
     streamKeyInput: {
         alignSelf: 'stretch',
-        borderColor: BaseTheme.palette.ui05,
-        borderBottomWidth: 1,
         color: BaseTheme.palette.text01,
-        fontSize: 14,
-        height: 40,
-        marginBottom: 5,
         textAlign: 'left'
     },
 
-    /**
-     * Label for the previous field.
-     */
-    streamKeyInputLabel: {
-        alignSelf: 'flex-start'
-    },
-
     /**
      * Custom component to pick a broadcast from the list fetched from Google.
      */