From b429954ad27f62cd9f76013b66f3b14caa3a3d09 Mon Sep 17 00:00:00 2001
From: emelko <ml.kochsiek@mailbox.org>
Date: Sun, 20 Sep 2020 15:53:34 +0200
Subject: [PATCH] Update home page with more color contrast for grey

---
 components/home.js | 15 +++++++++------
 styles/colors.js   |  8 ++++----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/home.js b/components/home.js
index 888f289..eaf0b72 100644
--- a/components/home.js
+++ b/components/home.js
@@ -74,24 +74,24 @@ class Home extends Component {
           {this.cycleDayNumber && (
             <React.Fragment>
               <AppText style={styles.whiteText}>{cycleDayText}</AppText>
-              <AppText>{labels.cycleDay}</AppText>
+              <AppText style={styles.tourquiseText}>{labels.cycleDay}</AppText>
             </React.Fragment>
           )}
           {!this.cycleDayNumber && <AppText>{cycleDayText}</AppText>}
         </View>
         <View style={styles.line}>
-          {!phase && <AppText>{phaseText}</AppText>}
+          {!phase && <AppText style={styles.tourquiseText}>{phaseText}</AppText>}
           {phase && (
             <React.Fragment>
               <AppText style={styles.whiteText}>{phaseText}</AppText>
-              <AppText>{labels.cyclePhase}</AppText>
-              <AppText>{status}</AppText>
+              <AppText style={styles.tourquiseText}>{labels.cyclePhase}</AppText>
+              <AppText style={styles.tourquiseText}>{status}</AppText>
               <Asterisk />
             </React.Fragment>
           )}
         </View>
         <View style={styles.line}>
-          <AppText>{prediction}</AppText>
+          <AppText style={styles.tourquiseText}>{prediction}</AppText>
         </View>
         <Button isCTA isSmall={false} onPress={this.navigateToCycleDayView}>
           {labels.addData}
@@ -99,7 +99,7 @@ class Home extends Component {
         {phase && (
           <View style={styles.line}>
             <Asterisk />
-            <AppText linkStyle={styles.whiteText}>{statusText}</AppText>
+            <AppText style={styles.tourquiseText} linkStyle={styles.whiteText}>{statusText}</AppText>
           </View>
         )}
       </ScrollView>
@@ -134,6 +134,9 @@ const styles = StyleSheet.create({
     fontSize: Sizes.huge,
     marginVertical: Spacing.base,
   },
+  tourquiseText: {
+    color: Colors.tourquise,
+  },
   whiteText: {
     color: 'white'
   }
diff --git a/styles/colors.js b/styles/colors.js
index 87ffc8a..533e1a8 100644
--- a/styles/colors.js
+++ b/styles/colors.js
@@ -13,12 +13,12 @@ const orangeColor = '#bc6642'
 const mintColor = '#6ca299'
 
 export default {
-  greyDark: '#A5A5A5',
-  grey: '#D2D2D2',
-  greyLight: '#F2F2F2',
+  greyDark: '#555',
+  grey: '#888',
+  greyLight: '#CCC',
   orange: '#F38337',
   purple: '#3A2671',
-  purpleLight: '#5D4F8A',
+  purpleLight: '#938EB2',
   tourquiseDark: '#69CBC1',
   tourquise: '#CFECEA',
   tourquiseLight: '#E9F2ED',