Add info button

.nvmrc

@@ -0,0 +1 @@
+v5.5.0

app/components/navigation/BackButton.js

@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   toolbarButton: {
-    paddingHorizontal: 10,
+    paddingHorizontal: 15,
   },
   text: {
     color: GlobalStyles.get('CIRCLE_NAVBAR_TEXT')
@@ -36,7 +36,7 @@ export default class NavigationButton extends React.Component {
           style={styles.toolbarButton}
           underlayColor={GlobalStyles.get('CIRCLE_NAVBAR_BG')}
           onPress={this.goBack.bind(this)}>
-          <Text style={styles.text}>B</Text>
+          <Text style={styles.text}>&lt;</Text>
         </TouchableHighlight>
       </View>
     );

app/components/navigation/InfoButton.js

@@ -0,0 +1,43 @@
+import React from 'react-native';
+import GlobalStyles from '../../settings/styles';
+import RouteMaster from '../routes/RouteMaster';
+
+var {
+  StyleSheet,
+  TouchableHighlight,
+  View,
+  Text
+} = React;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  toolbarButton: {
+    paddingHorizontal: 15,
+  },
+  text: {
+    color: GlobalStyles.get('CIRCLE_NAVBAR_TEXT'),
+    fontSize: 18,
+    fontStyle: 'italic'
+  }
+});
+
+export default class InfoButton extends React.Component {
+  showInfo() {
+    this.props.nav.push(RouteMaster.get('INFO'));
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableHighlight
+          style={styles.toolbarButton}
+          underlayColor={GlobalStyles.get('CIRCLE_NAVBAR_BG')}
+          onPress={this.showInfo.bind(this)}>
+          <Text style={styles.text}>i</Text>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}

app/components/navigation/RouteMapper.js

@@ -2,6 +2,7 @@ import React from 'react-native'; // eslint-disable-line no-unused-vars
 
 import NavigationTitle from './Title';
 import NavigationBackButton from './BackButton';
+import NavigationInfoButton from './InfoButton';
 
 import { View } from 'react-native';
 
@@ -10,11 +11,14 @@ export default {
 
   LeftButton(route, nav, index, navState) {
     return (
-      <NavigationBackButton nav={nav} direction="left" />
+      <NavigationBackButton nav={nav} />
     );
   },
 
   RightButton(route, nav, index, navState) {
+    if (route.id === 'login') {
+      return <NavigationInfoButton nav={nav} />;
+    }
     return (
       <View />
     );

package.json

@@ -25,6 +25,7 @@
     "eslint-plugin-react-native": "=0.5.0",
     "react": "=0.14.6",
     "react-addons-test-utils": "=0.14.6",
+    "svg2png": "^3.0.0",
     "url": "=0.11.0"
   }
 }