Added help modal

app/components/login/token-help.js

@@ -0,0 +1,54 @@
+import React from 'react-native';
+import GlobalStyles from '../../settings/styles';
+import Modal from 'react-native-modalbox';
+
+const {
+  StyleSheet,
+  Text,
+  View
+} = React;
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: GlobalStyles.get('CIRCLE_GREY_DARK'),
+    height: 300
+  },
+  title: {
+    fontSize: 18,
+    color: 'white'
+  },
+  text: {
+    fontSize: 13,
+    color: 'white'
+  },
+  modalView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+});
+
+export default class Login extends React.Component {
+  render() {
+    return (
+      <Modal
+        isOpen={this.props.open}
+        style={styles.modal}
+        backdrop={true}>
+        <View style={styles.modalView}>
+          <Text style={styles.title}>
+            What is a token?
+          </Text>
+          <Text style={styles.text}>
+            A token is a thing.
+          </Text>
+        </View>
+        <Text style={styles.text}>
+          Swipe down to dismiss
+        </Text>
+      </Modal>
+    );
+  }
+};

app/components/routes/login.js

@@ -1,5 +1,8 @@
 import React from 'react-native';
 import GlobalStyles from '../../settings/styles';
+import TokenHelp from '../login/token-help';
+
+var dismissKeyboard = require('dismissKeyboard');
 
 const {
   StyleSheet,
@@ -8,13 +11,14 @@ const {
   TextInput,
   TouchableHighlight,
   ScrollView,
-  BackAndroid
+  BackAndroid,
+  TouchableWithoutFeedback
 } = React;
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F5FCFF',
+    backgroundColor: GlobalStyles.get('CIRCLE_GREY_DARK'),
   },
   contentWrapper: {
     flex: 0.85,
@@ -28,10 +32,13 @@ const styles = StyleSheet.create({
   },
   loginButton: {
     flex: 1,
-    backgroundColor: GlobalStyles.get('CIRCLE_BLUE'),
+    backgroundColor: GlobalStyles.get('CIRCLE_GREEN'),
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 10
+    padding: 10,
+    borderColor: GlobalStyles.get('CIRCLE_GREEN'),
+    borderWidth: 2,
+    borderRadius: 12
   },
   loginButtonText: {
     fontSize: 18,
@@ -53,7 +60,11 @@ const styles = StyleSheet.create({
     marginVertical: 20
   },
   helpText: {
-    fontSize: 12,
+    fontSize: 11,
+    fontStyle: 'italic'
+  },
+  text: {
+    color: 'white'
   }
 });
 
@@ -61,10 +72,13 @@ export default class Login extends React.Component {
   constructor() {
     super();
     this.state = {
-      token: ''
+      token: '',
+      showTokenHelp: false
     };
     this.validate = this.validate.bind(this);
     this.updateState = this.updateState.bind(this);
+    this.showTokenHelp = this.showTokenHelp.bind(this);
+    this.hideTokenHelp = this.hideTokenHelp.bind(this);
   }
 
   updateState(key, value) {
@@ -74,6 +88,20 @@ export default class Login extends React.Component {
   }
 
   validate() {
+    dismissKeyboard();
+  }
+
+  showTokenHelp() {
+    dismissKeyboard();
+    this.setState({
+      showTokenHelp: true
+    });
+  }
+
+  hideTokenHelp() {
+    this.setState({
+      showTokenHelp: false
+    });
   }
 
   componentWillUnmount() {
@@ -88,35 +116,42 @@ export default class Login extends React.Component {
     return (
       <View style={styles.container}>
         <View style={styles.buttonContainer}>
-          <Text style={styles.title}>
+          <Text style={[styles.title, styles.text]}>
             Sphere
           </Text>
         </View>
         <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
             <View style={styles.contentWrapper}>
-              <Text style={styles.heading}>
+              <Text style={[styles.heading, styles.text]}>
                 Please enter your CircleCI token
               </Text>
               <TextInput
-                style={styles.input}
+                style={[styles.input, styles.text]}
                 onChangeText={(token) => this.updateState('token', token)}
                 value={this.state.token}
                 onSubmitEditing={this.validate}
                 placeholder="CircleCI Token"
+                placeholderTextColor="#A7A7A7"
                 autoCorrect={false}
               />
-              <Text style={styles.helpText}>
-                What's this?
-              </Text>
+              <TouchableWithoutFeedback onPress={this.showTokenHelp}>
+                <Text style={[styles.helpText, styles.text]}>
+                  What's this?
+                </Text>
+              </TouchableWithoutFeedback>
             </View>
         </ScrollView>
         <View style={styles.buttonContainer}>
-          <TouchableHighlight style={styles.loginButton} onPress={this.validate}>
-            <Text style={styles.loginButtonText}>
+          <TouchableHighlight
+            style={styles.loginButton}
+            onPress={this.validate}
+            underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
+            <Text style={[styles.loginButtonText, styles.text]}>
               Authenticate
             </Text>
           </TouchableHighlight>
         </View>
+        <TokenHelp open={this.state.showTokenHelp} onClose={this.hideTokenHelp} />
       </View>
     );
   }

app/settings/styles.js

@@ -1,5 +1,6 @@
 import { Map } from 'immutable';
 
 export default Map({
-  CIRCLE_BLUE: 'blue'
+  CIRCLE_GREEN: '#229922',
+  CIRCLE_GREY_DARK: '#343434'
 });

package.json

@@ -11,6 +11,7 @@
     "circleci": "=0.3.0",
     "immutable": "=3.7.6",
     "react-native": "=0.19.0",
+    "react-native-modalbox": "=1.2.8",
     "react-native-side-menu": "=0.18.0",
     "react-native-vector-icons": "=1.0.4",
     "underscore": "=1.8.3"