Updating UI for Sign up screens (#163)

* Updating sign up screens

* Removing help text for server screen

* Reverting change in projects file

* Updating proj file

app/scenes/login/login.js

@@ -5,7 +5,7 @@ import React, {Component, PropTypes} from 'react';
 import {injectIntl, intlShape} from 'react-intl';
 import {Text, TextInput, Image, KeyboardAvoidingView} from 'react-native';
 
-import Button from 'app/components/button';
+import Button from 'react-native-button';
 import FormattedText from 'app/components/formatted_text';
 import ErrorText from 'app/components/error_text';
 import Loading from 'app/components/loading';
@@ -86,10 +86,9 @@ class Login extends Component {
         return (
             <KeyboardAvoidingView
                 behavior='padding'
-                style={GlobalStyles.container}
+                style={[GlobalStyles.container, GlobalStyles.signupContainer]}
             >
                 <Image
-                    style={GlobalStyles.logo}
                     source={logo}
                 />
                 <Text style={GlobalStyles.header}>
@@ -122,13 +121,18 @@ class Login extends Component {
                     returnKeyType='go'
                     onSubmitEditing={this.signIn.bind(this)}
                 />
-                <Button onPress={this.signIn.bind(this)}>
+                <Button
+                    onPress={this.signIn.bind(this)}
+                    containerStyle={GlobalStyles.signupButton}
+                >
                     <FormattedText
                         id='login.signIn'
                         defaultMessage='Sign in'
+                        style={GlobalStyles.signupButtonText}
                     />
                 </Button>
                 <ErrorText error={this.props.loginRequest.error}/>
+                <KeyboardAvoidingView style={GlobalStyles.pagePush}/>
             </KeyboardAvoidingView>
         );
     }

app/scenes/select_server/select_server.js

@@ -5,7 +5,7 @@ import React, {Component} from 'react';
 import {injectIntl, intlShape} from 'react-intl';
 import {TextInput, Image, KeyboardAvoidingView} from 'react-native';
 
-import Button from 'app/components/button';
+import Button from 'react-native-button';
 import ErrorText from 'app/components/error_text';
 import FormattedText from 'app/components/formatted_text';
 import {GlobalStyles} from 'app/styles';
@@ -39,10 +39,9 @@ class SelectServer extends Component {
         return (
             <KeyboardAvoidingView
                 behavior='padding'
-                style={GlobalStyles.container}
+                style={[GlobalStyles.container, GlobalStyles.signupContainer]}
             >
                 <Image
-                    style={GlobalStyles.logo}
                     source={logo}
                 />
                 <FormattedText
@@ -65,13 +64,16 @@ class SelectServer extends Component {
                 <Button
                     onPress={this.onClick}
                     loading={this.props.server.loading}
+                    containerStyle={GlobalStyles.signupButton}
                 >
                     <FormattedText
+                        style={GlobalStyles.signupButtonText}
                         id='mobile.components.select_server_view.proceed'
                         defaultMessage='Proceed'
                     />
                 </Button>
                 <ErrorText error={this.props.server.error}/>
+                <KeyboardAvoidingView style={GlobalStyles.pagePush}/>
             </KeyboardAvoidingView>
         );
     }

app/styles/index.js

@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 /* eslint-disable
-  no-magic-numbers */
+no-magic-numbers */
 
 import {StyleSheet} from 'react-native';
 
@@ -14,17 +14,40 @@ export const GlobalStyles = StyleSheet.create({
         alignItems: 'center',
         backgroundColor: 'white'
     },
-    logo: {
-        marginBottom: 10
+    signupContainer: {
+        paddingRight: 15,
+        paddingLeft: 15
+    },
+    pagePush: {
+        height: 50
     },
     header: {
-        fontSize: 36,
+        marginTop: 15,
+        marginBottom: 15,
+        fontSize: 32,
         fontWeight: '600'
     },
     subheader: {
-        fontSize: 18,
+        textAlign: 'center',
+        fontSize: 16,
         fontWeight: '300',
-        color: '#777'
+        color: '#777',
+        marginBottom: 15,
+        lineHeight: 22
+    },
+    signupButton: {
+        borderRadius: 3,
+        borderColor: '#2389D7',
+        borderWidth: 1,
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        marginTop: 10,
+        padding: 15
+    },
+    signupButtonText: {
+        textAlign: 'center',
+        color: '#2389D7',
+        fontSize: 17
     },
     buttonListItemText: {
         textAlign: 'left',
@@ -57,29 +80,32 @@ export const GlobalStyles = StyleSheet.create({
     },
 
     label: {
-        paddingTop: 5,
-        paddingBottom: 5,
-        fontSize: 18
+        fontSize: 20,
+        fontWeight: '400'
     },
 
     errorLabel: {
         color: 'red',
-        margin: 5,
-        paddingTop: 5,
-        paddingBottom: 5,
-        fontSize: 11
+        marginTop: 15,
+        marginBottom: 15,
+        fontSize: 12
+    },
+
+    switchUp: {
+        padding: 0,
+        backgroundColor: 'green',
+        paddingBottom: 50,
+        alignItems: 'center'
     },
 
     inputBox: {
-        fontSize: 18,
-        height: 40,
+        fontSize: 16,
+        height: 45,
         borderColor: 'gainsboro',
         borderWidth: 1,
-        marginLeft: 15,
-        marginRight: 15,
         marginTop: 5,
         marginBottom: 5,
-        padding: 3,
+        padding: 15,
         alignSelf: 'stretch',
         borderRadius: 3
     }

assets/base/i18n/en.json

@@ -1482,7 +1482,7 @@
   "members_popover.title": "Members",
   "mobile.components.channels_list_view.yourChannels": "Your channels:",
   "mobile.components.select_server_view.enterServerUrl": "Enter Server URL",
-  "mobile.components.select_server_view.proceed": "Proceed",
+  "mobile.components.select_server_view.continue": "Continue",
   "mobile.components.select_server_view.siteUrlPlaceholder": "https://mattermost.example.com",
   "mobile.routes.channels": "Channels",
   "mobile.routes.enterServerUrl": "Enter Server URL",