feat(recording): fix ui for live stream screen on mobile (#13123)

* feat(recording): fix ui for live stream screen on mobile

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

@@ -59,25 +59,22 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
             <>
                 <View style = { styles.formWrapper }>
                     <Input
-                        customStyles = {{ input: styles.streamKeyInput }}
+                        customStyles = {{
+                            input: styles.streamKeyInput,
+                            container: styles.streamKeyContainer }}
                         onChange = { this._onInputChange }
                         placeholder = { t('liveStreaming.enterStreamKey') }
                         value = { this.props.value } />
-                    <View style = { styles.formValidation }>
+                    <View style = { styles.formValidationItem }>
                         {
-                            this.state.showValidationError
-                                ? <View style = { styles.formValidationItem }>
-                                    <Text
-                                        style = { [
-                                            _dialogStyles.text,
-                                            styles.warningText
-                                        ] }>
-                                        { t('liveStreaming.invalidStreamKey') }
-                                    </Text>
-                                </View>
-                                : null
+                            this.state.showValidationError && <Text
+                                style = { [
+                                    _dialogStyles.text,
+                                    styles.warningText
+                                ] }>
+                                { t('liveStreaming.invalidStreamKey') }
+                            </Text>
                         }
-
                     </View>
                 </View>
                 <View style = { styles.formButtonsWrapper }>

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

@@ -1,6 +1,6 @@
 // @flow
 
-import { BoxModel, createStyleSheet } from '../../../../base/styles';
+import { createStyleSheet } from '../../../../base/styles';
 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 
 /**
@@ -24,27 +24,20 @@ export default createStyleSheet({
     formWrapper: {
         alignItems: 'stretch',
         flexDirection: 'column',
-        padding: BoxModel.padding
-    },
-
-    /**
-     * Wrapper for the last element in the form.
-     */
-    formValidation: {
-        flexDirection: 'row',
-        height: BaseTheme.spacing[4]
+        paddingHorizontal: BaseTheme.spacing[2]
     },
 
     formValidationItem: {
         alignSelf: 'flex-start',
-        marginVertical: BaseTheme.spacing[1]
+        flexDirection: 'row',
+        height: BaseTheme.spacing[4],
+        marginTop: BaseTheme.spacing[2]
     },
 
     formButtonsWrapper: {
         alignSelf: 'center',
         display: 'flex',
-        maxWidth: 200,
-        width: 'auto'
+        maxWidth: 200
     },
 
     buttonLabelStyle: {
@@ -55,7 +48,7 @@ export default createStyleSheet({
      * Explaining text on the top of the sign in form.
      */
     helpText: {
-        marginBottom: BoxModel.margin
+        marginBottom: BaseTheme.spacing[2]
     },
 
     /**
@@ -68,7 +61,7 @@ export default createStyleSheet({
         flexDirection: 'column',
         justifyContent: 'center',
         paddingHorizontal: BaseTheme.spacing[2],
-        paddingTop: BaseTheme.spacing[3]
+        paddingVertical: BaseTheme.spacing[3]
     },
 
     /**
@@ -87,6 +80,10 @@ export default createStyleSheet({
         textAlign: 'left'
     },
 
+    streamKeyContainer: {
+        marginTop: BaseTheme.spacing[3]
+    },
+
     /**
      * Custom component to pick a broadcast from the list fetched from Google.
      */
@@ -94,7 +91,7 @@ export default createStyleSheet({
         alignSelf: 'stretch',
         flex: 1,
         height: 40,
-        marginHorizontal: 4,
+        marginHorizontal: BaseTheme.spacing[1],
         width: 300
     },
 
@@ -102,14 +99,14 @@ export default createStyleSheet({
      * CTA (label) of the picker.
      */
     streamKeyPickerCta: {
-        marginBottom: 8
+        marginBottom: BaseTheme.spacing[2]
     },
 
     /**
      * Style of a single item in the list.
      */
     streamKeyPickerItem: {
-        padding: 4
+        padding: BaseTheme.spacing[1]
     },
 
     /**
@@ -124,7 +121,7 @@ export default createStyleSheet({
      */
     streamKeyPickerWrapper: {
         borderColor: BaseTheme.palette.ui07,
-        borderRadius: 3,
+        borderRadius: BaseTheme.shape.borderRadius,
         borderWidth: 1,
         flexDirection: 'column'
     },