[NEW] Onboarding layout

app/constants/tablet.js

@@ -1,4 +1,4 @@
 export const MAX_SIDEBAR_WIDTH = 321;
 export const MAX_CONTENT_WIDTH = '90%';
-export const MAX_SCREEN_CONTENT_WIDTH = '45%';
+export const MAX_SCREEN_CONTENT_WIDTH = '50%';
 export const MIN_WIDTH_SPLIT_LAYOUT = 700;

app/containers/AppVersion.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { themes } from '../constants/colors';
+import sharedStyles from '../views/Styles';
+import { getReadableVersion } from '../utils/deviceInfo';
+import I18n from '../i18n';
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: 'center',
+		justifyContent: 'flex-end'
+	},
+	text: {
+		...sharedStyles.textRegular,
+		fontSize: 13
+	},
+	bold: {
+		...sharedStyles.textSemibold
+	}
+});
+
+const AppVersion = React.memo(({ theme }) => (
+	<View style={styles.container}>
+		<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{I18n.t('Version_no', { version: '' })}<Text style={styles.bold}>{getReadableVersion}</Text></Text>
+	</View>
+));
+
+AppVersion.propTypes = {
+	theme: PropTypes.string
+};
+
+export default AppVersion;

app/containers/Button/index.js

@@ -9,15 +9,19 @@ import ActivityIndicator from '../ActivityIndicator';
 
 const styles = StyleSheet.create({
 	container: {
-		paddingHorizontal: 15,
+		paddingHorizontal: 14,
 		justifyContent: 'center',
 		height: 48,
 		borderRadius: 2,
-		marginBottom: 10
+		marginBottom: 12
 	},
 	text: {
-		fontSize: 18,
-		textAlign: 'center'
+		fontSize: 16,
+		textAlign: 'center',
+		...sharedStyles.textMedium
+	},
+	disabled: {
+		opacity: 0.3
 	}
 });
 
@@ -30,6 +34,8 @@ export default class Button extends React.PureComponent {
 		backgroundColor: PropTypes.string,
 		loading: PropTypes.bool,
 		theme: PropTypes.string,
+		color: PropTypes.string,
+		fontSize: PropTypes.string,
 		style: PropTypes.any
 	}
 
@@ -43,9 +49,15 @@ export default class Button extends React.PureComponent {
 
 	render() {
 		const {
-			title, type, onPress, disabled, backgroundColor, loading, style, theme, ...otherProps
+			title, type, onPress, disabled, backgroundColor, color, loading, style, theme, fontSize, ...otherProps
 		} = this.props;
 		const isPrimary = type === 'primary';
+
+		let textColor = isPrimary ? themes[theme].buttonText : themes[theme].bodyText;
+		if (color) {
+			textColor = color;
+		}
+
 		return (
 			<Touchable
 				onPress={onPress}
@@ -55,20 +67,20 @@ export default class Button extends React.PureComponent {
 					backgroundColor
 						? { backgroundColor }
 						: { backgroundColor: isPrimary ? themes[theme].actionTintColor : themes[theme].backgroundColor },
-					disabled && { backgroundColor: themes[theme].borderColor },
+					disabled && styles.disabled,
 					style
 				]}
 				{...otherProps}
 			>
 				{
 					loading
-						? <ActivityIndicator color={isPrimary ? themes[theme].buttonText : themes[theme].actionTintColor} />
+						? <ActivityIndicator color={textColor} />
 						: (
 							<Text
 								style={[
 									styles.text,
-									isPrimary ? sharedStyles.textMedium : sharedStyles.textBold,
-									{ color: isPrimary ? themes[theme].buttonText : themes[theme].actionTintColor }
+									{ color: textColor },
+									fontSize && { fontSize }
 								]}
 							>
 								{title}

app/containers/FormContainer.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import PropTypes from 'prop-types';
+import { SafeAreaView } from 'react-navigation';
+
+import { themes } from '../constants/colors';
+import sharedStyles from '../views/Styles';
+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({
+	scrollView: {
+		minHeight: '100%'
+	}
+});
+
+export const FormContainerInner = ({ children }) => (
+	<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
+		{children}
+	</View>
+);
+
+const FormContainer = ({ children, theme }) => (
+	<KeyboardView
+		style={{ backgroundColor: themes[theme].backgroundColor }}
+		contentContainerStyle={sharedStyles.container}
+		keyboardVerticalOffset={128}
+	>
+		<StatusBar theme={theme} />
+		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}>
+			<SafeAreaView style={sharedStyles.container} forceInset={{ top: 'never' }}>
+				{children}
+				<AppVersion theme={theme} />
+			</SafeAreaView>
+		</ScrollView>
+	</KeyboardView>
+);
+
+FormContainer.propTypes = {
+	theme: PropTypes.string,
+	children: PropTypes.element
+};
+
+FormContainerInner.propTypes = {
+	children: PropTypes.element
+};
+
+export default FormContainer;

app/containers/HeaderButton.js

@@ -36,9 +36,9 @@ export const DrawerButton = React.memo(({ navigation, testID, ...otherProps }) =
 	</CustomHeaderButtons>
 ));
 
-export const CloseModalButton = React.memo(({ navigation, testID }) => (
+export const CloseModalButton = React.memo(({ navigation, testID, onPress = () => navigation.pop() }) => (
 	<CustomHeaderButtons left>
-		<Item title='close' iconName='cross' onPress={() => navigation.pop()} testID={testID} />
+		<Item title='close' iconName='cross' onPress={onPress} testID={testID} />
 	</CustomHeaderButtons>
 ));
 
@@ -76,7 +76,8 @@ DrawerButton.propTypes = {
 };
 CloseModalButton.propTypes = {
 	navigation: PropTypes.object.isRequired,
-	testID: PropTypes.string.isRequired
+	testID: PropTypes.string.isRequired,
+	onPress: PropTypes.func
 };
 CloseShareExtensionButton.propTypes = {
 	onPress: PropTypes.func.isRequired,