Restyle
This commit is contained in:
parent
63acc09656
commit
bc04ccacf5
7 changed files with 34 additions and 76 deletions
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -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'
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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')
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'
|
||||
});
|
||||
|
|
Reference in a new issue