From 238ceb8d2bc2f73348f415f218255163969aeb00 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 26 Mar 2020 16:40:33 -0300
Subject: [PATCH] Refactor

---
 app/containers/FormContainer.js    | 45 ++++++++----------------------
 app/views/NewServerView.js         |  4 +--
 app/views/OnboardingView/index.js  | 38 ++++++++++++-------------
 app/views/OnboardingView/styles.js |  2 +-
 app/views/Styles.js                |  1 +
 5 files changed, 33 insertions(+), 57 deletions(-)

diff --git a/app/containers/FormContainer.js b/app/containers/FormContainer.js
index dbcfb6725..1ba102ac6 100644
--- a/app/containers/FormContainer.js
+++ b/app/containers/FormContainer.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, ScrollView, Keyboard, Image, StyleSheet, TouchableOpacity, View, Alert } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
 import { SafeAreaView } from 'react-navigation';
 
@@ -9,36 +9,11 @@ import scrollPersistTaps from '../utils/scrollPersistTaps';
 import KeyboardView from '../presentation/KeyboardView';
 import StatusBar from './StatusBar';
 import AppVersion from './AppVersion';
+import { isTablet } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
-	title: {
-		...sharedStyles.textBold,
-		fontSize: 22,
-		letterSpacing: 0,
-		textAlign: 'auto'
-	},
-	inputContainer: {
-		marginTop: 24,
-		marginBottom: 32
-	},
-	backButton: {
-		position: 'absolute',
-		paddingHorizontal: 9,
-		left: 15
-	},
-	certificatePicker: {
-		flex: 1,
-		marginTop: 40,
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	chooseCertificateTitle: {
-		fontSize: 15,
-		...sharedStyles.textRegular
-	},
-	chooseCertificate: {
-		fontSize: 15,
-		...sharedStyles.textSemibold
+	scrollView: {
+		height: '100%'
 	}
 });
 
@@ -47,12 +22,13 @@ const FormContainer = ({ children, theme }) => (
 		style={{ backgroundColor: themes[theme].backgroundColor }}
 		contentContainerStyle={sharedStyles.container}
 		keyboardVerticalOffset={128}
-		// key='login-view'
 	>
 		<StatusBar theme={theme} />
-		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, { height: '100%' }]}>
-			<SafeAreaView style={sharedStyles.container} testID='new-server-view'>
-				{children}
+		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}>
+			<SafeAreaView style={sharedStyles.container}>
+				<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
+					{children}
+				</View>
 			</SafeAreaView>
 			<AppVersion theme={theme} />
 		</ScrollView>
@@ -60,7 +36,8 @@ const FormContainer = ({ children, theme }) => (
 );
 
 FormContainer.propTypes = {
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	children: PropTypes.element
 };
 
 export default FormContainer;
diff --git a/app/views/NewServerView.js b/app/views/NewServerView.js
index 11acda713..68b3badb2 100644
--- a/app/views/NewServerView.js
+++ b/app/views/NewServerView.js
@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
 		marginBottom: 32
 	},
 	certificatePicker: {
-		flex: 1,
+		// flex: 1,
 		marginBottom: 32,
 		alignItems: 'center',
 		justifyContent: 'flex-end'
@@ -264,7 +264,7 @@ class NewServerView extends React.Component {
 		const { text } = this.state;
 		return (
 			<FormContainer theme={theme}>
-				<View style={isTablet && sharedStyles.tabletScreenContent}>
+				<View style={{ flex: 1, justifyContent: 'center' }}>
 					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Join_your_workspace')}</Text>
 					<TextInput
 						label='Enter workspace URL'
diff --git a/app/views/OnboardingView/index.js b/app/views/OnboardingView/index.js
index 5b8137179..4d7f85e57 100644
--- a/app/views/OnboardingView/index.js
+++ b/app/views/OnboardingView/index.js
@@ -110,26 +110,24 @@ class OnboardingView extends React.Component {
 		const { theme } = this.props;
 		return (
 			<FormContainer theme={theme}>
-				<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
-					<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
-					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Onboarding_title')}</Text>
-					<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>{I18n.t('Onboarding_subtitle')}</Text>
-					<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_description')}</Text>
-					<View style={[styles.buttonsContainer]}>
-						<Button
-							title={I18n.t('Onboarding_join_workspace')}
-							type='primary'
-							onPress={this.connectServer}
-							theme={theme}
-						/>
-						<Button
-							title={I18n.t('Create_a_new_workspace')}
-							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
-							onPress={this.createWorkspace}
-							theme={theme}
-						/>
-					</View>
+				<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
+				<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Onboarding_title')}</Text>
+				<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>{I18n.t('Onboarding_subtitle')}</Text>
+				<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_description')}</Text>
+				<View style={[styles.buttonsContainer]}>
+					<Button
+						title={I18n.t('Onboarding_join_workspace')}
+						type='primary'
+						onPress={this.connectServer}
+						theme={theme}
+					/>
+					<Button
+						title={I18n.t('Create_a_new_workspace')}
+						type='secondary'
+						backgroundColor={themes[theme].chatComponentBackground}
+						onPress={this.createWorkspace}
+						theme={theme}
+					/>
 				</View>
 			</FormContainer>
 		);
diff --git a/app/views/OnboardingView/styles.js b/app/views/OnboardingView/styles.js
index 9ac774bc8..bfd1bdcd9 100644
--- a/app/views/OnboardingView/styles.js
+++ b/app/views/OnboardingView/styles.js
@@ -12,7 +12,7 @@ export default StyleSheet.create({
 	},
 	onboarding: {
 		alignSelf: 'center',
-		marginTop: !isTablet && verticalScale(116),
+		marginTop: isTablet ? 0 : verticalScale(116),
 		marginBottom: verticalScale(50),
 		maxHeight: verticalScale(150),
 		resizeMode: 'contain',
diff --git a/app/views/Styles.js b/app/views/Styles.js
index dbc4ba5a6..f17930135 100644
--- a/app/views/Styles.js
+++ b/app/views/Styles.js
@@ -19,6 +19,7 @@ export default StyleSheet.create({
 		maxWidth: MAX_CONTENT_WIDTH
 	},
 	tabletScreenContent: {
+		justifyContent: 'center',
 		alignSelf: 'center',
 		width: MAX_SCREEN_CONTENT_WIDTH
 	},