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' },