Add info button

app/components/routes/login.js

@@ -2,7 +2,7 @@ import React from 'react-native';
 import GlobalStyles from '../../settings/styles';
 import TokenHelp from '../login/token-help';
 
-var dismissKeyboard = require('dismissKeyboard');
+const dismissKeyboard = require('dismissKeyboard');
 
 const {
   StyleSheet,
@@ -31,24 +31,31 @@ const styles = StyleSheet.create({
     textAlign: 'center'
   },
   loginButton: {
-    flex: 1,
+    flex: 0.9,
     backgroundColor: GlobalStyles.get('CIRCLE_GREEN'),
+    borderColor: GlobalStyles.get('CIRCLE_GREEN'),
+  },
+  infoButton: {
+    flex: 0.15,
+    backgroundColor: GlobalStyles.get('CIRCLE_GREY'),
+    borderColor: GlobalStyles.get('CIRCLE_GREY'),
+  },
+  button: {
     justifyContent: 'center',
     alignItems: 'center',
     padding: 10,
-    borderColor: GlobalStyles.get('CIRCLE_GREEN'),
     borderWidth: 2,
-    borderRadius: 12
+    borderRadius: 12,
+    margin: 5
   },
-  loginButtonText: {
+  buttonText: {
     fontSize: 18,
     color: 'white',
   },
   buttonContainer: {
     flexDirection: 'row',
     justifyContent: 'center',
-    padding: 10,
-    paddingVertical: 15
+    margin: 5
   },
   title: {
     fontSize: 30,
@@ -80,6 +87,7 @@ export default class Login extends React.Component {
     this.textChanged = this.textChanged.bind(this);
     this.showTokenHelp = this.showTokenHelp.bind(this);
     this.hideTokenHelp = this.hideTokenHelp.bind(this);
+    this.showAbout = this.showAbout.bind(this);
   }
 
   textChanged(token) {
@@ -90,6 +98,10 @@ export default class Login extends React.Component {
     dismissKeyboard();
   }
 
+  showAbout() {
+
+  }
+
   showTokenHelp() {
     dismissKeyboard();
     this.setState({
@@ -142,13 +154,21 @@ export default class Login extends React.Component {
         </ScrollView>
         <View style={styles.buttonContainer}>
           <TouchableHighlight
-            style={styles.loginButton}
+            style={[styles.button, styles.loginButton]}
             onPress={this.validate}
             underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
-            <Text style={[styles.loginButtonText, styles.text]}>
+            <Text style={[styles.buttonText, styles.text]}>
               Authenticate
             </Text>
           </TouchableHighlight>
+          <TouchableHighlight
+            style={[styles.button, styles.infoButton]}
+            onPress={this.showAbout}
+            underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
+            <Text style={[styles.buttonText, styles.text]}>
+              About
+            </Text>
+          </TouchableHighlight>
         </View>
         <TokenHelp open={this.state.showTokenHelp} onClose={this.hideTokenHelp} />
       </View>

app/settings/styles.js

@@ -2,5 +2,7 @@ import { Map } from 'immutable';
 
 export default Map({
   CIRCLE_GREEN: '#229922',
-  CIRCLE_GREY_DARK: '#343434'
+  CIRCLE_GREY_DARK: '#343434',
+  CIRCLE_GREY: '#666',
+  CIRCLE_GREY_LIGHT: '#A7A7A7'
 });