hawtttt terminal window

src/js/constants/Colors.js

@@ -2,4 +2,7 @@ module.exports = {
   blueBackground: '#5cbcfc',
   terminalBackground: '#424242',
   terminalText: 'rgb(238, 238, 238)',
+  terminalHeader: '#EFEDEE',
+  terminalBorder: '#303030',
+  terminalFontFamily: 'Courier',
 };

src/js/native_react_views/NUXView.js

@@ -1,4 +1,4 @@
-var NavButton = require('../native_react_views/NavButton');
+var assign = require('object-assign');
 var React = require('react-native');
 var Routes = require('../constants/Routes');
 var {
@@ -10,6 +10,7 @@ var {
 
 var Colors = require('../constants/Colors');
 var TerminalCardView = require('../native_react_views/TerminalCardView');
+var NavButton = require('../native_react_views/NavButton');
 
 var NUXView = React.createClass({
 
@@ -21,9 +22,29 @@ var NUXView = React.createClass({
     return (
       <View style={styles.background}>
         <View style={styles.headerSpacer} />
-        <TerminalCardView />
+        <View style={styles.container}>
+          <TerminalCardView>
+            <View style={styles.welcomeTextContainer}>
+              <Text style={styles.welcomeText}>
+                Welcome To...
+              </Text>
+              <Text style={styles.welcomeText}>
+                Learn Git Branching!
+              </Text>
+            </View>
+            <Text style={styles.introText}>
+              Learn Git Branching is the most interactive
+              and visual way to master Git. 
+            </Text>
+            <Text style={styles.introText}>
+              With over 30 tutorials and levels, everyone from
+              absolute beginners to experienced Git wizards
+              should find something challenging and new.
+            </Text>
+          </TerminalCardView>
+          <View style={styles.buttonContainer}>
             <NavButton
-          text="Level 1"
+              text="Let's Get Started!"
               onPress={() => {
                 this.props.navigator.push(
                   Routes.getRouteForID(Routes.LEVEL_SELECT)
@@ -31,20 +52,48 @@ var NUXView = React.createClass({
               }}
             />
           </View>
+        </View>
+      </View>
     );
   }
 
 });
 
+// TODO -- refactor this somewhere
+var terminalTextStyle = {
+  color: Colors.terminalText,
+  fontFamily: Colors.terminalFontFamily,
+  fontWeight: 'bold',
+};
+
 var styles = StyleSheet.create({
+  buttonContainer: {
+    marginTop: 40,
+  },
   background: {
     backgroundColor: Colors.blueBackground,
     flex: 1
   },
+  container: {
+    padding: 12,
+  },
   headerSpacer: {
     height: 20,
-    backgroundColor: '#EFEDEE',
+    backgroundColor: '#FFF'
   },
+  welcomeTextContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  welcomeText: assign({}, terminalTextStyle, {
+    fontSize: 24,
+    marginBottom: 8
+  }),
+  introText: assign({}, terminalTextStyle, {
+    marginTop: 8,
+    flex: 1,
+    marginBottom: 8
+  }),
 });
 
 module.exports = NUXView;

src/js/native_react_views/TerminalCardView.js

@@ -1,5 +1,7 @@
+var assign = require('object-assign');
 var React = require('react-native');
 var {
+  PixelRatio,
   StyleSheet,
   Text,
   View,
@@ -8,25 +10,89 @@ var {
 var Colors = require('../constants/Colors');
 
 var TerminalCardView = React.createClass({
+  propTypes: {
+    text: React.PropTypes.string,
+  },
+
   render: function() {
     return (
       <View style={styles.terminalWindow}>
-        <Text style={styles.terminalText}>
+        <View style={styles.terminalHeader}>
-          Welcome to learn git branching
+          <View style={styles.closeButton} />
-        </Text>
+          <View style={styles.minimizeButton} />
+          <View style={styles.maximizeButton} />
+        </View>
+        <View style={styles.terminalTextContainer}>
+          {this.renderInner()}
+        </View>
       </View>
     );
+  },
+
+  renderInner: function() {
+    return this.props.text ? 
+      <Text style={styles.terminalText}>
+        {this.props.text}
+      </Text> :
+      this.props.children;
   }
+
 });
 
+var BORDER_WIDTH = 1 / PixelRatio.get();
+var BORDER_RADIUS = 4;
+var BUTTON_SIZE = 12;
+var BUTTON_BORDER_RADIUS = BUTTON_SIZE - 2;
+var buttonStyle = {
+  height: BUTTON_SIZE,
+  width: BUTTON_SIZE,
+  borderRadius: BUTTON_BORDER_RADIUS,
+};
+
 var styles = StyleSheet.create({
+  terminalHeader: {
+    height: 16,
+    backgroundColor: Colors.terminalHeader,
+    borderRadius: BORDER_RADIUS,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingLeft: 4
+  },
+
+  closeButton: assign({}, buttonStyle, {
+    backgroundColor: '#fb625f',
+  }),
+
+  minimizeButton: assign({}, buttonStyle, {
+    backgroundColor: '#f9c57a',
+  }),
+
+  maximizeButton: assign({}, buttonStyle, {
+    backgroundColor: '#8ac872',
+  }),
+
   terminalWindow: {
     backgroundColor: Colors.terminalBackground,
+    borderRadius: BORDER_RADIUS,
+    shadowOpacity: 0.5,
+    shadowRadius: 4,
+    shadowOffset: {
+      h: 2,
+      w: 2,
+    },
+  },
+
+  terminalTextContainer: {
+    padding: 12,
+    borderWidth: 1 / PixelRatio.get(),
+    borderColor: Colors.terminalBorder,
+    borderRadius: BORDER_RADIUS
   },
 
   terminalText: {
     color: Colors.terminalText,
-    fontFamily: 'Courier',
+    fontFamily: Colors.terminalFontFamily,
     fontSize: 16,
     fontWeight: 'bold'
   },