Update home page with more color contrast for grey

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

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