Login view -> Terms of Service and Privacy Policy (#74)

app/views/LoginView.js

@@ -122,19 +122,23 @@ class LoginView extends React.Component {
 								<Text style={styles.button}>LOGIN</Text>
 							</TouchableOpacity>
 
-							<TouchableOpacity style={styles.buttonContainer} onPress={this.register}>
-								<Text style={styles.button}>REGISTER</Text>
-							</TouchableOpacity>
+							<View style={styles.loginSecondaryButtons}>
+								<TouchableOpacity style={styles.buttonContainer_inverted} onPress={this.register}>
+									<Text style={styles.button_inverted}>REGISTER</Text>
+								</TouchableOpacity>
 
-							<TouchableOpacity style={styles.buttonContainer} onPress={this.termsService}>
-								<Text style={styles.button}>TERMS OF SERVICE</Text>
-							</TouchableOpacity>
+								<TouchableOpacity style={styles.buttonContainer_inverted} onPress={this.forgotPassword}>
+									<Text style={styles.button_inverted}>FORGOT MY PASSWORD</Text>
+								</TouchableOpacity>
+							</View>
 
-							<TouchableOpacity style={styles.buttonContainer} onPress={this.privacyPolicy}>
-								<Text style={styles.button}>PRIVACY POLICY</Text>
-							</TouchableOpacity>
-							<TouchableOpacity style={styles.buttonContainer} onPress={this.forgotPassword}>
-								<Text style={styles.button}>FORGOT MY PASSWORD</Text>
+							<TouchableOpacity>
+								<Text style={styles.loginTermsText}>
+									By proceeding you are agreeing to our
+									<Text style={styles.link} onPress={this.termsService}> Terms of Service </Text>
+									and
+									<Text style={styles.link} onPress={this.privacyPolicy}> Privacy Policy</Text>
+								</Text>
 							</TouchableOpacity>
 
 							{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}

app/views/Styles.js

@@ -93,6 +93,10 @@ export default StyleSheet.create({
 		backgroundColor: '#1d74f5',
 		marginBottom: 20
 	},
+	buttonContainer_inverted: {
+		paddingVertical: 15,
+		marginBottom: 0
+	},
 	button: {
 		textAlign: 'center',
 		color: 'white',
@@ -105,6 +109,12 @@ export default StyleSheet.create({
 		borderRadius: 2,
 		fontWeight: '700'
 	},
+	button_inverted: {
+		textAlign: 'center',
+		color: '#414852',
+		fontWeight: '700',
+		flexGrow: 1
+	},
 	error: {
 		textAlign: 'center',
 		color: 'red',
@@ -132,5 +142,19 @@ export default StyleSheet.create({
 	},
 	enabledButton: {
 		backgroundColor: '#1d74f5'
+	},
+	link: {
+		fontWeight: 'bold'
+	},
+	loginTermsText: {
+		marginTop: 10,
+		textAlign: 'center',
+		color: '#414852',
+		fontSize: 16
+	},
+	loginSecondaryButtons: {
+		flexDirection: 'row',
+		justifyContent: 'space-around',
+		alignItems: 'center'
 	}
 });