sweet some initial native views

src/js/constants/Colors.js

@@ -0,0 +1,5 @@
+module.exports = {
+  blueBackground: '#5cbcfc',
+  terminalBackground: '#424242',
+  terminalText: 'rgb(238, 238, 238)',
+};

src/js/native/index.ios.js

@@ -19,6 +19,7 @@ var {
 var Routes = require('../constants/Routes');
 var SequenceSelectView = require('../native_react_views/SequenceSelectView');
 var LevelSelectView = require('../native_react_views/LevelSelectView');
+var NUXView = require('../native_react_views/NUXView');
 
 var LearnGitBranching = React.createClass({
 
@@ -28,6 +29,8 @@ var LearnGitBranching = React.createClass({
         return <SequenceSelectView navigator={navigator} />;
       case Routes.LEVEL_SELECT:
         return <LevelSelectView navigator={navigator} />;
+      case Routes.NUX:
+        return <NUXView navigator={navigator} />;
     }
     throw new Exception('No route found for ' + route.id);
   },
@@ -35,7 +38,7 @@ var LearnGitBranching = React.createClass({
   render: function() {
     return (
       <Navigator
-        initialRoute={Routes.getRouteForID(Routes.SEQUENCE_SELECT)}
+        initialRoute={Routes.getRouteForID(Routes.NUX)}
         renderScene={this._renderScene}
       />
     );

src/js/native_react_views/NUXView.js

@@ -0,0 +1,50 @@
+var NavButton = require('../native_react_views/NavButton');
+var React = require('react-native');
+var Routes = require('../constants/Routes');
+var {
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var Colors = require('../constants/Colors');
+var TerminalCardView = require('../native_react_views/TerminalCardView');
+
+var NUXView = React.createClass({
+
+  propTypes: {
+    navigator: React.PropTypes.object.isRequired,
+  },
+
+  render: function() {
+    return (
+      <View style={styles.background}>
+        <View style={styles.headerSpacer} />
+        <TerminalCardView />
+        <NavButton
+          text="Level 1"
+          onPress={() => {
+            this.props.navigator.push(
+              Routes.getRouteForID(Routes.LEVEL_SELECT)
+            );
+          }}
+        />
+      </View>
+    );
+  }
+
+});
+
+var styles = StyleSheet.create({
+  background: {
+    backgroundColor: Colors.blueBackground,
+    flex: 1
+  },
+  headerSpacer: {
+    height: 20,
+    backgroundColor: '#EFEDEE',
+  },
+});
+
+module.exports = NUXView;

src/js/native_react_views/SequenceSelectView.js

@@ -2,13 +2,14 @@ var NavButton = require('../native_react_views/NavButton');
 var React = require('react-native');
 var Routes = require('../constants/Routes');
 var {
-  PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
   View,
 } = React;
 
+var Colors = require('../constants/Colors');
+
 var SequenceSelectView = React.createClass({
 
   propTypes: {
@@ -17,27 +18,34 @@ var SequenceSelectView = React.createClass({
 
   render: function() {
     return (
-      <ScrollView>
+      <View style={styles.background}>
         <View style={styles.headerSpacer} />
-        <View>
-          <NavButton
-            text="Level 1"
-            onPress={() => {
-              this.props.navigator.push(
-                Routes.getRouteForID(Routes.LEVEL_SELECT)
-              );
-            }}
-          />
-        </View>
-      </ScrollView>
+        <ScrollView>
+          <View>
+            <NavButton
+              text="Level 1"
+              onPress={() => {
+                this.props.navigator.push(
+                  Routes.getRouteForID(Routes.LEVEL_SELECT)
+                );
+              }}
+            />
+          </View>
+        </ScrollView>
+      </View>
     );
   }
 
 });
 
 var styles = StyleSheet.create({
+  background: {
+    backgroundColor: Colors.blueBackground,
+    flex: 1
+  },
   headerSpacer: {
-    height: 40
+    height: 20,
+    backgroundColor: '#EFEDEE',
   },
 });
 

src/js/native_react_views/TerminalCardView.js

@@ -0,0 +1,36 @@
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var Colors = require('../constants/Colors');
+
+var TerminalCardView = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.terminalWindow}>
+        <Text style={styles.terminalText}>
+          Welcome to learn git branching
+        </Text>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  terminalWindow: {
+    backgroundColor: Colors.terminalBackground,
+  },
+
+  terminalText: {
+    color: Colors.terminalText,
+    fontFamily: 'Courier',
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+
+});
+
+module.exports = TerminalCardView;