archive/Sphere
Archived
1
Fork 0
Code Releases Packages Activity

Restyle

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/components/app.js
View file

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

6
app/components/login/token-help.js
View file

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

14
app/components/navigation/BackButton.js
View file

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

7
app/components/navigation/Title.js
View file

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

46
app/components/routes/info.js
View file

@ -5,7 +5,6 @@ const {
StyleSheet, StyleSheet,
Text, Text,
View, View,
TouchableHighlight,
ScrollView, ScrollView,
BackAndroid, BackAndroid,
} = React; } = React;
@ -13,40 +12,14 @@ const {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#333', backgroundColor: GlobalStyles.get('CIRCLE_BG'),
}, },
contentWrapper: { contentWrapper: {
flex: 0.85,
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'center' 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: { text: {
color: 'white' color: GlobalStyles.get('CIRCLE_TEXT')
} }
}); });
@ -63,22 +36,9 @@ export default class Login extends React.Component {
render() { render() {
return ( return (
<View style={styles.container}> <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}> <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
<View style={styles.contentWrapper}> <View style={styles.contentWrapper}>
<Text>Content</Text> <Text style={styles.text}>Content</Text>
</View> </View>
</ScrollView> </ScrollView>
</View> </View>

27
app/components/routes/login.js
View file

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

7
app/settings/styles.js
View file

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