fix: theme black

totorototo · Aug 31, 2017 · 1fed1ef · 1fed1ef
1 parent f3a1c9d
commit 1fed1ef
Show file tree

Hide file tree

Showing 17 changed files with 77 additions and 29 deletions.
diff --git a/app/components/cardList/styles.js b/app/components/cardList/styles.js
@@ -1,5 +1,7 @@
 import { StyleSheet } from "react-native";
 
+import theme from "../../theme/theme";
+
 export default StyleSheet.create({
   containerCardStyle: {
     padding: 15,
@@ -13,7 +15,7 @@ export default StyleSheet.create({
     marginRight: 0
   },
   card: {
-    color: "#FC4C02"
+    color: theme.paperColorText
   },
   item: {
     flex: 1,
@@ -25,7 +27,7 @@ export default StyleSheet.create({
     height: 20
   },
   text: {
-    color: "#FC4C02",
+    color: theme.paperColorText,
     marginBottom: 10,
     marginLeft: 10
   }

diff --git a/app/components/countdown/styles.js b/app/components/countdown/styles.js
@@ -1,13 +1,15 @@
 import { StyleSheet } from "react-native";
 
+import theme from "../../theme/theme";
+
 export default StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center"
   },
   text: {
-    color: "#FC4C02",
+    color: theme.paperColorText,
     textAlign: "center",
     fontSize: 40
   }

diff --git a/app/components/faulty/Faulty.js b/app/components/faulty/Faulty.js
@@ -4,6 +4,7 @@ import { Icon } from "react-native-elements";
 import { View, Text } from "react-native";
 
 import styles from "./styles";
+import theme from "./../../theme/theme";
 
 export default class Faulty extends Component {
   static propTypes = {
@@ -13,7 +14,7 @@ export default class Faulty extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <Icon name="error" color="#FC4C02" size={100} />
+        <Icon name="error" color={theme.PrimaryColor} size={100} />
         <Text style={styles.text}>
           Oops, I did it again: {this.props.message}
         </Text>

diff --git a/app/components/faulty/styles.js b/app/components/faulty/styles.js
@@ -1,13 +1,16 @@
 import { StyleSheet } from "react-native";
 
+import theme from "../../theme/theme";
+
 export default StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center"
   },
   text: {
-    color: "#FC4C02",
+    // todo check if it always valid color
+    color: theme.paperColorText,
     fontSize: 15
   }
 });
diff --git a/app/components/loading/Loading.js b/app/components/loading/Loading.js
@@ -3,12 +3,13 @@ import { Icon } from "react-native-elements";
 import { View, Text } from "react-native";
 
 import styles from "./styles";
+import theme from "../../theme/theme";
 
 export default class Loading extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <Icon name="cached" color="#FC4C02" size={50} />
+        <Icon name="cached" color={theme.PrimaryColor} size={50} />
         <Text style={styles.text}>fetching data</Text>
       </View>
     );

diff --git a/app/components/loading/styles.js b/app/components/loading/styles.js
@@ -1,13 +1,16 @@
 import { StyleSheet } from "react-native";
 
+import theme from "../../theme/theme";
+
 export default StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center"
   },
   text: {
-    color: "#FC4C02",
+    // todo check if it always valid color
+    color: theme.paperColorText,
     fontSize: 15
   }
 });
diff --git a/app/components/timer/styles.js b/app/components/timer/styles.js
@@ -1,13 +1,16 @@
 import { StyleSheet } from "react-native";
 
+import theme from "../../theme/theme";
+
 export default StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center"
   },
   text: {
-    color: "#FC4C02",
+    // todo check if it always valid color
+    color: theme.paperColorText,
     textAlign: "center",
     fontSize: 40
   }

diff --git a/app/routes/AppNavigator.js b/app/routes/AppNavigator.js
@@ -6,11 +6,12 @@ import Config from "react-native-config";
 import deeplink from "../hocs/deeplink";
 import Login from "./screens/login/Login";
 import Main from "./screens/main/Main";
+import theme from "../theme/theme";
 
 const { URL_SHEME_PREFIX, URL_SHEME_HOST } = Config;
 
 const navigatorOptions = {
-  cardStyle: { flex: 1, marginTop: 0, backgroundColor: "#eff2f6" },
+  cardStyle: { flex: 1, marginTop: 0, backgroundColor: theme.backgroundColor },
   headerMode: "none"
 };
 

diff --git a/app/routes/screens/main/Main.js b/app/routes/screens/main/Main.js
@@ -6,35 +6,40 @@ import Details from "./details/Details";
 import ClubFeed from "./clubFeed/ClubFeed";
 import PerformanceMeter from "./performanceMeter/PerformanceMeter";
 import RacePredictor from "./race/Race";
+import theme from "../../../theme/theme";
 
 const Main = TabNavigator(
   {
     PerformanceMeter: {
       screen: PerformanceMeter,
       navigationOptions: {
         tabBarLabel: "lyb-mtr",
-        tabBarIcon: () => <Icon reverse name="whatshot" color="#FC4C02" />
+        tabBarIcon: () =>
+          <Icon reverse name="whatshot" color={theme.PrimaryColor} />
       }
     },
     RacePredictor: {
       screen: RacePredictor,
       navigationOptions: {
         tabBarLabel: "race",
-        tabBarIcon: () => <Icon reverse name="timer" color="#FC4C02" />
+        tabBarIcon: () =>
+          <Icon reverse name="timer" color={theme.PrimaryColor} />
       }
     },
     Details: {
       screen: Details,
       navigationOptions: {
         tabBarLabel: "athlete",
-        tabBarIcon: () => <Icon reverse name="face" color="#FC4C02" />
+        tabBarIcon: () =>
+          <Icon reverse name="face" color={theme.PrimaryColor} />
       }
     },
     ClubFeed: {
       screen: ClubFeed,
       navigationOptions: {
         tabBarLabel: "leaks",
-        tabBarIcon: () => <Icon reverse name="comment" color="#FC4C02" />
+        tabBarIcon: () =>
+          <Icon reverse name="comment" color={theme.PrimaryColor} />
       }
     }
   },
@@ -45,12 +50,13 @@ const Main = TabNavigator(
       showIcon: true,
       labelStyle: {
         fontSize: 12,
-        color: "white"
+        color: theme.PrimaryColorText
       },
       style: {
-        backgroundColor: "#FC4C02"
+        backgroundColor: theme.PrimaryColor
       },
       indicatorStyle: {
+        // TODO replace color
         backgroundColor: "white"
       },
       tabStyle: {

diff --git a/app/routes/screens/main/clubFeed/ClubFeed.js b/app/routes/screens/main/clubFeed/ClubFeed.js
@@ -15,6 +15,7 @@ import styles from "./styles";
 import Faulty from "../../../../components/faulty/Faulty";
 import Loading from "../../../../components/loading/Loading";
 import CardList from "../../../../components/cardList/CardList";
+import theme from "../../../../theme/theme";
 
 // styles
 class ClubFeed extends Component {
@@ -76,7 +77,7 @@ class ClubFeed extends Component {
             title={"AWARDS"}
             list={Object.entries(club.ranking).map(([key, value]) => ({
               key,
-              image: { name: getIconName(key), color: "#FC4C02" },
+              image: { name: getIconName(key), color: theme.PrimaryColor },
               text: value.athlete
             }))}
           />

diff --git a/app/routes/screens/main/clubFeed/styles.js b/app/routes/screens/main/clubFeed/styles.js
@@ -1,5 +1,7 @@
 import { StyleSheet } from "react-native";
 
+import theme from "../../../../theme/theme";
+
 export default StyleSheet.create({
   container: {
     flex: 1,
@@ -38,7 +40,7 @@ export default StyleSheet.create({
     height: 20
   },
   text: {
-    color: "#FC4C02",
+    color: theme.paperColorText,
     marginBottom: 10,
     marginLeft: 10
   },
@@ -49,6 +51,6 @@ export default StyleSheet.create({
     marginBottom: 0
   },
   card: {
-    color: "#FC4C02"
+    color: theme.paperColorText
   }
 });
diff --git a/app/routes/screens/main/details/styles.js b/app/routes/screens/main/details/styles.js
@@ -1,5 +1,7 @@
 import { StyleSheet } from "react-native";
 
+import theme from "../../../../theme/theme";
+
 export default StyleSheet.create({
   container: {
     flex: 1,
@@ -11,6 +13,6 @@ export default StyleSheet.create({
     height: 50
   },
   text: {
-    color: "#FC4C02"
+    color: theme.backgroundColorText
   }
 });
diff --git a/app/routes/screens/main/performanceMeter/PerformanceMeter.js b/app/routes/screens/main/performanceMeter/PerformanceMeter.js
@@ -13,6 +13,7 @@ import {
 import selector from "./selector";
 import styles from "./styles";
 import Loading from "../../../../components/loading/Loading";
+import theme from "../../../../theme/theme";
 
 class PerformanceMeter extends Component {
   static propTypes = {
@@ -71,8 +72,9 @@ class PerformanceMeter extends Component {
           indeterminate={this.state.indeterminate}
           showsText
           size={200}
-          color="#FC4C02"
-          borderColor="#FC4C02"
+          color={theme.backgroundColorText}
+          borderColor={theme.backgroundColorText}
+          // wtf is this color
           unifiledColor="#559988"
         />
         {athlete.performance &&

diff --git a/app/routes/screens/main/performanceMeter/styles.js b/app/routes/screens/main/performanceMeter/styles.js
@@ -1,5 +1,7 @@
 import { StyleSheet } from "react-native";
 
+import theme from "../../../../theme/theme";
+
 export default StyleSheet.create({
   container: {
     flex: 1,
@@ -10,7 +12,7 @@ export default StyleSheet.create({
     marginTop: 30
   },
   text: {
-    color: "#FC4C02",
+    color: theme.backgroundColorText,
     fontSize: 15
   }
 });
diff --git a/app/routes/screens/main/race/Race.js b/app/routes/screens/main/race/Race.js
@@ -23,6 +23,7 @@ import selector from "./selector";
 import mapDispatchToProps from "./mapDispatchToProps";
 import Loading from "../../../../components/loading/Loading";
 import Faulty from "../../../../components/faulty/Faulty";
+import theme from "../../../../theme/theme";
 
 const { width, height } = Dimensions.get("window");
 
@@ -118,8 +119,8 @@ class RacePredictor extends Component {
         <MapView style={styles.map} initialRegion={SAMPLE_REGION}>
           <MapView.Polyline
             coordinates={race.path.coordinates}
-            strokeColor="#FC4C02"
-            fillColor="#FC4C02"
+            strokeColor={theme.PrimaryColor}
+            fillColor={theme.PrimaryColor}
             strokeWidth={3}
           />
           {race.checkPoints.map(marker =>
@@ -128,7 +129,7 @@ class RacePredictor extends Component {
               coordinate={marker.coordinates}
               title={marker.title}
               description={marker.description}
-              pinColor="#FC4C02"
+              pinColor={theme.PrimaryColor}
             />
           )}
           {race.locations &&
@@ -169,7 +170,7 @@ class RacePredictor extends Component {
           <TouchableOpacity>
             <Icon
               name={this.state.expanded ? "expand-less" : "expand-more"}
-              color="#FC4C02"
+              color={theme.paperColorText}
               size={30}
               onPress={this.toggleMenu}
             />

diff --git a/app/routes/screens/main/race/styles.js b/app/routes/screens/main/race/styles.js
@@ -1,5 +1,7 @@
 import { StyleSheet } from "react-native";
 
+import theme from "../../../../theme/theme";
+
 export default StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
@@ -16,7 +18,7 @@ export default StyleSheet.create({
     top: 0,
     right: 0,
     left: 0,
-    backgroundColor: "white",
+    backgroundColor: theme.paperColor,
     opacity: 0.6,
     flexDirection: "column",
     justifyContent: "flex-end",
@@ -27,10 +29,11 @@ export default StyleSheet.create({
     ...StyleSheet.absoluteFillObject
   },
   text: {
-    color: "#FC4C02",
+    color: theme.backgroundColorText,
     textAlign: "center"
   },
   bubble: {
+    // todo handle transparency theme
     backgroundColor: "rgba(255,255,255,0.7)",
     paddingHorizontal: 18,
     paddingVertical: 12
@@ -53,6 +56,6 @@ export default StyleSheet.create({
   },
   buttonText: {
     textAlign: "center",
-    color: "#FC4C02"
+    color: theme.paperColorText
   }
 });
diff --git a/app/theme/theme.js b/app/theme/theme.js
@@ -0,0 +1,13 @@
+export default {
+  PrimaryColor: "black", // "#FC4C02",
+  PrimaryColorText: "#ffffff",
+
+  SecondaryColor: "",
+  SecondaryColorText: "",
+
+  paperColor: "#ffffff",
+  paperColorText: "black", // "#FC4C02",
+
+  backgroundColor: "#eff2f6",
+  backgroundColorText: "#333"
+};