some divider styling

src/js/native/index.ios.js

@@ -15,6 +15,8 @@ var SequenceSelectView = require('../native_react_views/SequenceSelectView');
 var LevelSelectView = require('../native_react_views/LevelSelectView');
 var NUXView = require('../native_react_views/NUXView');
 
+var INITIAL_ROUTE = Routes.NUX;
+
 var LearnGitBranching = React.createClass({
 
   _renderScene: function(route, navigator) {
@@ -32,7 +34,7 @@ var LearnGitBranching = React.createClass({
   render: function() {
     return (
       <Navigator
-        initialRoute={Routes.getRouteForID(Routes.NUX)}
+        initialRoute={Routes.getRouteForID(INITIAL_ROUTE)}
         renderScene={this._renderScene}
       />
     );

src/js/native_react_views/NUXView.js

@@ -28,6 +28,7 @@ var NUXView = React.createClass({
         <HeaderSpacer />
         <View style={styles.container}>
           <TerminalCardView>
+            <View style={styles.textContainer}>
               <View style={styles.welcomeTextContainer}>
                 <Text style={styles.welcomeText}>
                   Welcome To...
@@ -45,6 +46,7 @@ var NUXView = React.createClass({
                 absolute beginners to experienced Git wizards
                 should find something challenging and new.
               </Text>
+            </View>
           </TerminalCardView>
           <View style={styles.buttonContainer}>
             <NavButton
@@ -63,6 +65,9 @@ var NUXView = React.createClass({
 });
 
 var styles = StyleSheet.create({
+  textContainer: {
+    padding: 8,
+  },
   buttonContainer: {
     marginTop: 40,
   },

src/js/native_react_views/SequenceSelectView.js

@@ -6,6 +6,7 @@ var {
   ScrollView,
   StyleSheet,
   Text,
+  TouchableHighlight,
   View,
 } = React;
 
@@ -33,7 +34,7 @@ var SequenceSelectView = React.createClass({
         <ScrollView style={styles.container}>
           <View style={styles.headerSpacer} />
           <TerminalCardView>
-            <View>
+            <View style={styles.terminalContainer}>
               {Object.keys(Levels.levelSequences).map(
                 sequenceID => this.renderSelector(sequenceID)
               )}
@@ -58,7 +59,9 @@ var SequenceSelectView = React.createClass({
     var about = intl.getIntlKey(info, 'about');
 
     return (
+      <TouchableHighlight underlayColor="#6E6E6E">
         <View>
+          <View style={styles.textContainer}>
             <Text style={styles.sequenceName}>
               {name}
             </Text>
@@ -66,12 +69,28 @@ var SequenceSelectView = React.createClass({
               {about}
             </Text>
           </View>
+          <View style={styles.divider} />
+        </View>
+      </TouchableHighlight>
     );
   }
 
 });
 
 var styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    marginBottom: 8,
+    backgroundColor: '#FFF'
+  },
+  terminalContainer: {
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+  textContainer: {
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
   sequenceName: assign({}, AppStyles.terminalTextStyle, {
     fontSize: 20,
   }),

src/js/native_react_views/TerminalCardView.js

@@ -84,7 +84,6 @@ var styles = StyleSheet.create({
   },
 
   terminalTextContainer: {
-    padding: 12,
     borderWidth: 1 / PixelRatio.get(),
     borderColor: AppStyles.terminalBorder,
     borderRadius: BORDER_RADIUS