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
-                    onPress = { onClick }
-                    style = { styles.signOutButton } >
-                    <Text style = { styles.signOutButtonText }>
-                        { t('liveStreaming.signOut') }
-                    </Text>
-                </TouchableOpacity>
+                <Button
+                    accessibilityLabel = 'liveStreaming.signOut'
+                    labelKey = 'liveStreaming.signOut'
+                    onClick = { onClick }
+                    style = { styles.signOutButton }
+                    type = { BUTTON_TYPES.SECONDARY } />
             );
         }
 

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',
-        borderColor: ColorPalette.lightGrey,
-        borderRadius: 3,
-        borderWidth: 1,
-        color: ColorPalette.white,
-        height: BUTTON_HEIGHT,
-        justifyContent: 'center'
-    },
-
-    /**
-     * Text of the sign out button.
-     */
-    signOutButtonText: {
-        color: ColorPalette.blue,
-        fontSize: 14,
-        fontWeight: 'bold'
+        alignSelf: 'center',
+        maxWidth: 104,
+        width: 'auto'
     }
-
 });