Restyle

app/components/app.js

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

app/components/login/token-help.js

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

app/components/navigation/BackButton.js

@@ -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"
+          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>
       </View>
     );

app/components/navigation/Title.js

@@ -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')
   }
 });
 

app/components/routes/info.js

@@ -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>

app/components/routes/login.js

@@ -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'),
+    backgroundColor: GlobalStyles.get('CIRCLE_NAVBAR_BG'),
-    borderColor: GlobalStyles.get('CIRCLE_GREY'),
+    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')}>
+            underlayColor={GlobalStyles.get('CIRCLE_BG')}>
-            <Text style={[styles.buttonText, styles.text]}>
+            <Text style={[styles.text, styles.buttonText]}>
               Authenticate
             </Text>
           </TouchableHighlight>
           <TouchableHighlight
             style={[styles.button, styles.infoButton]}
             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>
           </TouchableHighlight>

app/settings/styles.js

@@ -2,7 +2,8 @@ import { Map } from 'immutable';
 
 export default Map({
   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'
 });