Add titles and move around inputs

app/components/routes/login.js

@@ -18,14 +18,12 @@ const styles = StyleSheet.create({
   },
   contentWrapper: {
     flex: 0.85,
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center'
   },
   input: {
-    marginHorizontal: 10,
-    height: 50,
-    borderColor: 'gray',
-    borderWidth: 1,
+    marginHorizontal: 15,
+    fontSize: 15,
     textAlign: 'center'
   },
   loginButton: {
@@ -33,20 +31,29 @@ const styles = StyleSheet.create({
     backgroundColor: GlobalStyles.get('CIRCLE_BLUE'),
     justifyContent: 'center',
     alignItems: 'center',
+    padding: 10
   },
   loginButtonText: {
-    fontSize: 16,
+    fontSize: 18,
     color: 'white',
   },
   buttonContainer: {
     flexDirection: 'row',
-    height: 80,
     justifyContent: 'center',
-    padding: 10
+    padding: 10,
+    paddingVertical: 15
   },
   title: {
-    fontSize: 25,
+    fontSize: 30,
     margin: 13
+  },
+  heading: {
+    fontSize: 18,
+    margin: 8,
+    marginVertical: 20
+  },
+  helpText: {
+    fontSize: 12,
   }
 });
 
@@ -54,7 +61,7 @@ export default class Login extends React.Component {
   constructor() {
     super();
     this.state = {
-
+      token: ''
     };
     this.validate = this.validate.bind(this);
     this.updateState = this.updateState.bind(this);
@@ -69,6 +76,10 @@ export default class Login extends React.Component {
   validate() {
   }
 
+  componentWillUnmount() {
+    BackAndroid.removeEventListener('hardwareBackPress', () => { return true; });  // Re-enable back button
+  }
+
   componentWillMount() {
     BackAndroid.addEventListener('hardwareBackPress', () => { return true; });  // Disable back button
   }
@@ -76,21 +87,28 @@ export default class Login extends React.Component {
   render() {
     return (
       <View style={styles.container}>
+        <View style={styles.buttonContainer}>
+          <Text style={styles.title}>
+            Sphere
+          </Text>
+        </View>
         <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
             <View style={styles.contentWrapper}>
-              <Text style={styles.title}>
-                Login to continue
+              <Text style={styles.heading}>
+                Please enter your CircleCI token
               </Text>
               <TextInput
                 style={styles.input}
-                onChangeText={(password) => this.updateState('password', password)}
-                value={this.state.password}
+                onChangeText={(token) => this.updateState('token', token)}
+                value={this.state.token}
                 onSubmitEditing={this.validate}
-                placeholder="Password"
-                autoCorrect={true}
+                placeholder="CircleCI Token"
+                autoCorrect={false}
               />
+              <Text style={styles.helpText}>
+                What's this?
+              </Text>
             </View>
-
         </ScrollView>
         <View style={styles.buttonContainer}>
           <TouchableHighlight style={styles.loginButton} onPress={this.validate}>