diff --git a/src/js/constants/Colors.js b/src/js/constants/Colors.js
index fa0e9392..2029bfdc 100644
--- a/src/js/constants/Colors.js
+++ b/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',
};
diff --git a/src/js/native_react_views/NUXView.js b/src/js/native_react_views/NUXView.js
index 839d5431..d1e18afd 100644
--- a/src/js/native_react_views/NUXView.js
+++ b/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,30 +22,78 @@ var NUXView = React.createClass({
return (
-
- {
- this.props.navigator.push(
- Routes.getRouteForID(Routes.LEVEL_SELECT)
- );
- }}
- />
+
+
+
+
+ Welcome To...
+
+
+ Learn Git Branching!
+
+
+
+ Learn Git Branching is the most interactive
+ and visual way to master Git.
+
+
+ With over 30 tutorials and levels, everyone from
+ absolute beginners to experienced Git wizards
+ should find something challenging and new.
+
+
+
+ {
+ this.props.navigator.push(
+ Routes.getRouteForID(Routes.LEVEL_SELECT)
+ );
+ }}
+ />
+
+
);
}
});
+// 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;
diff --git a/src/js/native_react_views/TerminalCardView.js b/src/js/native_react_views/TerminalCardView.js
index d0449597..b70f7c6c 100644
--- a/src/js/native_react_views/TerminalCardView.js
+++ b/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 (
-
- Welcome to learn git branching
-
+
+
+
+
+
+
+ {this.renderInner()}
+
);
+ },
+
+ renderInner: function() {
+ return this.props.text ?
+
+ {this.props.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'
},