This commit is contained in:
Jake Howard 2016-02-06 15:49:57 +00:00
parent 63acc09656
commit bc04ccacf5
7 changed files with 34 additions and 76 deletions

View file

@ -2,6 +2,7 @@ import React from 'react-native';
import RouteMaster from './routes/RouteMaster';
import RouteMapper from './navigation/RouteMapper';
import GlobalStyles from '../settings/styles';
const {
Navigator,
@ -12,7 +13,7 @@ const {
const styles = StyleSheet.create({
navbar: {
backgroundColor: '#888',
backgroundColor: GlobalStyles.get('CIRCLE_NAVBAR_BG'),
flexDirection:'row',
justifyContent: 'center',
},

View file

@ -12,16 +12,16 @@ const styles = StyleSheet.create({
modal: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: GlobalStyles.get('CIRCLE_GREY_DARK'),
backgroundColor: GlobalStyles.get('CIRCLE_NAVBAR_BG'),
height: 200
},
title: {
fontSize: 18,
color: 'white'
color: GlobalStyles.get('CIRCLE_NAVBAR_TEXT'),
},
text: {
fontSize: 13,
color: 'white',
color: GlobalStyles.get('CIRCLE_NAVBAR_TEXT'),
margin: 2,
textAlign: 'center'
},

View file

@ -1,4 +1,5 @@
import React from 'react-native';
import GlobalStyles from '../../settings/styles';
var {
StyleSheet,
@ -7,7 +8,7 @@ var {
Text
} = React;
var styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
@ -15,10 +16,13 @@ var styles = StyleSheet.create({
toolbarButton: {
paddingHorizontal: 10,
},
text: {
color: GlobalStyles.get('CIRCLE_NAVBAR_TEXT')
}
});
export default class NavigationButton extends React.Component {
_goBack() {
goBack() {
this.props.nav.pop();
}
@ -30,9 +34,9 @@ export default class NavigationButton extends React.Component {
<View style={styles.container}>
<TouchableHighlight
style={styles.toolbarButton}
underlayColor="#FFF"
onPress={this._goBack.bind(this)}>
<Text>B</Text>
underlayColor={GlobalStyles.get('CIRCLE_NAVBAR_BG')}
onPress={this.goBack.bind(this)}>
<Text style={styles.text}>B</Text>
</TouchableHighlight>
</View>
);

View file

@ -1,6 +1,7 @@
import React from 'react-native';
import GlobalStyles from '../../settings/styles';
var {
const {
StyleSheet,
Text,
View,
@ -12,9 +13,9 @@ var styles = StyleSheet.create({
justifyContent: 'center',
},
title: {
fontSize: 18,
fontSize: 20,
textAlign: 'center',
color: '#000'
color: GlobalStyles.get('CIRCLE_NAVBAR_TEXT')
}
});

View file

@ -5,7 +5,6 @@ const {
StyleSheet,
Text,
View,
TouchableHighlight,
ScrollView,
BackAndroid,
} = React;
@ -13,40 +12,14 @@ const {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#333',
backgroundColor: GlobalStyles.get('CIRCLE_BG'),
},
contentWrapper: {
flex: 0.85,
justifyContent: 'flex-start',
alignItems: 'center'
},
button: {
flex: 0.08,
backgroundColor: GlobalStyles.get('CIRCLE_GREY'),
borderColor: GlobalStyles.get('CIRCLE_GREY'),
justifyContent: 'center',
alignItems: 'center',
padding: 10,
borderWidth: 2,
borderRadius: 12,
margin: 5
},
buttonText: {
fontSize: 18,
color: 'white',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
margin: 5
},
title: {
fontSize: 30,
margin: 13,
flex: 1
},
text: {
color: 'white'
color: GlobalStyles.get('CIRCLE_TEXT')
}
});
@ -63,22 +36,9 @@ export default class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<TouchableHighlight
style={styles.button}
onPress={this.props.nav.pop}
underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
<Text style={[styles.text, styles.buttonText]}>
BACK
</Text>
</TouchableHighlight>
<Text style={[styles.title, styles.text]}>
About
</Text>
</View>
<ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
<View style={styles.contentWrapper}>
<Text>Content</Text>
<Text style={styles.text}>Content</Text>
</View>
</ScrollView>
</View>

View file

@ -25,7 +25,7 @@ const {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: GlobalStyles.get('CIRCLE_GREY_DARK'),
backgroundColor: GlobalStyles.get('CIRCLE_BG'),
},
contentWrapper: {
flex: 0.85,
@ -44,8 +44,8 @@ const styles = StyleSheet.create({
},
infoButton: {
flex: 0.08,
backgroundColor: GlobalStyles.get('CIRCLE_GREY'),
borderColor: GlobalStyles.get('CIRCLE_GREY'),
backgroundColor: GlobalStyles.get('CIRCLE_NAVBAR_BG'),
borderColor: GlobalStyles.get('CIRCLE_NAVBAR_BG'),
},
button: {
justifyContent: 'center',
@ -57,17 +57,13 @@ const styles = StyleSheet.create({
},
buttonText: {
fontSize: 18,
color: 'white',
color: 'black'
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
margin: 5
},
title: {
fontSize: 30,
margin: 13
},
heading: {
fontSize: 18,
margin: 8,
@ -79,7 +75,7 @@ const styles = StyleSheet.create({
padding: 5,
},
text: {
color: 'white'
color: GlobalStyles.get('CIRCLE_TEXT')
}
});
@ -155,11 +151,6 @@ export default class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Text style={[styles.title, styles.text]}>
Sphere
</Text>
</View>
<ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
<View style={styles.contentWrapper}>
<Text style={[styles.heading, styles.text]}>
@ -185,16 +176,16 @@ export default class Login extends React.Component {
<TouchableHighlight
style={[styles.button, styles.loginButton]}
onPress={this.validate}
underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
<Text style={[styles.buttonText, styles.text]}>
underlayColor={GlobalStyles.get('CIRCLE_BG')}>
<Text style={[styles.text, styles.buttonText]}>
Authenticate
</Text>
</TouchableHighlight>
<TouchableHighlight
style={[styles.button, styles.infoButton]}
onPress={this.showAbout}
underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
<Text style={[styles.buttonText, styles.text]}>
underlayColor={GlobalStyles.get('CIRCLE_BG')}>
<Text style={[styles.text, styles.buttonText]}>
?
</Text>
</TouchableHighlight>

View file

@ -2,7 +2,8 @@ import { Map } from 'immutable';
export default Map({
CIRCLE_GREEN: '#229922',
CIRCLE_GREY_DARK: '#343434',
CIRCLE_GREY: '#666',
CIRCLE_GREY_LIGHT: '#A7A7A7'
CIRCLE_NAVBAR_BG: '#3D3D3D',
CIRCLE_NAVBAR_TEXT: '#E0E0E0',
CIRCLE_BG: '#F5F5F5',
CIRCLE_TEXT: '#484848'
});