Change font color of marked calendar days

components/calendar.js

@@ -14,13 +14,13 @@ import {
   calendarTheme,
   predictionToCalFormat,
   toCalFormat,
-  todayToCalFormat
+  todayToCalFormat,
 } from './helpers/calendar'
 
 class CalendarView extends Component {
   static propTypes = {
     setDate: PropTypes.func.isRequired,
-    navigate: PropTypes.func.isRequired
+    navigate: PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -30,7 +30,7 @@ class CalendarView extends Component {
     this.state = {
       bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
       predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
-      todayInCalFormat: todayToCalFormat()
+      todayInCalFormat: todayToCalFormat(),
     }
 
     this.bleedingDays.addListener(this.setStateWithCalFormattedDays)
@@ -42,7 +42,7 @@ class CalendarView extends Component {
     this.setState({
       bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
       predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
-      todayInCalFormat: todayToCalFormat()
+      todayInCalFormat: todayToCalFormat(),
     })
   }
 
@@ -59,7 +59,7 @@ class CalendarView extends Component {
     const {
       todayInCalFormat,
       bleedingDaysInCalFormat,
-      predictedBleedingDaysInCalFormat
+      predictedBleedingDaysInCalFormat,
     } = this.state
     const markedDates = Object.assign(
       {},
@@ -75,7 +75,7 @@ class CalendarView extends Component {
           firstDay={1}
           onDayPress={this.passDateToDayView.bind(this)}
           markedDates={markedDates}
-          markingType={'custom'}
+          markingType='custom'
           theme={calendarTheme}
           // Max amount of months allowed to scroll to the past.
           pastScrollRange={120}
@@ -86,17 +86,14 @@ class CalendarView extends Component {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1 }
+  container: { flex: 1 },
 })
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     setDate: (date) => dispatch(setDate(date)),
     navigate: (page) => dispatch(navigate(page)),
-  })
+  }
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(CalendarView)
-  null,
-  mapDispatchToProps,
-)(CalendarView)

components/chart/chart.js

@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
   },
   loadingContainer: {
     height: '100%',
-    backgroundColor: Colors.tourquiseLight,
+    backgroundColor: Colors.turquoiseLight,
     justifyContent: 'center'
   },
   page: {

components/chart/dot-and-line.js

@@ -54,11 +54,11 @@ export default class DotAndLine extends Component {
     const dot = new Path().moveTo(CHART_COLUMN_MIDDLE , y - CHART_DOT_RADIUS)
       .arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
       .arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
-    const dotColor = exclude ? Colors.tourquise : Colors.tourquiseDark
+    const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
     const lineColorLeft = excludeLeftLine ?
-      Colors.tourquise : Colors.tourquiseDark
+      Colors.turquoise : Colors.turquoiseDark
     const lineColorRight = excludeRightLine ?
-      Colors.tourquise : Colors.tourquiseDark
+      Colors.turquoise : Colors.turquoiseDark
 
     return(
       <React.Fragment>

components/common/app-page.js

@@ -36,11 +36,11 @@ AppPage.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: Colors.tourquiseLight,
+    backgroundColor: Colors.turquoiseLight,
     flex: 1
   },
   scrollView: {
-    backgroundColor: Colors.tourquiseLight,
+    backgroundColor: Colors.turquoiseLight,
     flexGrow: 1
   },
   title: {

components/header/logo.js

@@ -23,7 +23,7 @@ Logo.propTypes = {
 
 const styles = StyleSheet.create({
   logo: {
-    color: Colors.tourquiseDark,
+    color: Colors.turquoiseDark,
     fontFamily: Fonts.bold,
     fontSize: Sizes.title
   }

components/helpers/calendar.js

@@ -12,11 +12,13 @@ export const toCalFormat = (bleedingDaysSortedByDate) => {
       customStyles: {
         container: {
           backgroundColor: shades[day.bleeding.value],
-        }
+          paddingTop: 2,
-      }
+        },
-    }
+        text: {
-    if (day.date === todayDateString) {
+          color: Colors.turquoiseLight,
-      acc[day.date].customStyles.text = styles.calendarToday
+          ...(day.date === todayDateString && styles.calendarToday),
+        },
+      },
     }
     return acc
   }, {})
@@ -31,12 +33,11 @@ export const predictionToCalFormat = (predictedDays) => {
       accSet[day] = {
         customStyles: {
           container: {
-            borderColor: (i === middleIndex) ? shades[3] : shades[0],
+            borderColor: i === middleIndex ? shades[3] : shades[0],
-            borderStyle: (i === middleIndex) ? 'solid' : 'dashed',
+            borderStyle: i === middleIndex ? 'solid' : 'dashed',
             borderWidth: 1,
           },
-
+        },
-        }
       }
       if (day === todayDateString) {
         accSet[day].customStyles.text = styles.calendarToday
@@ -50,24 +51,24 @@ export const predictionToCalFormat = (predictedDays) => {
 
 export const todayToCalFormat = () => {
   const todayDateString = LocalDate.now().toString()
-  const todayFormated = {}
+  return {
-  todayFormated[todayDateString] = {
+    [todayDateString]: {
-    customStyles: {
+      customStyles: {
-      text: styles.calendarToday
+        text: styles.calendarToday,
-    }
+      },
+    },
   }
-  return todayFormated
 }
 
 const styles = {
   calendarToday: {
     fontFamily: Fonts.bold,
-    color: Colors.purple
+    color: Colors.purple,
   },
 }
 
 export const calendarTheme = {
-  calendarBackground: Colors.tourquiseLight,
+  calendarBackground: Colors.turquoiseLight,
   dayTextColor: Colors.greyDark,
   monthTextColor: Colors.purple,
   textDayFontFamily: Fonts.main,

components/home.js

@@ -77,21 +77,21 @@ class Home extends Component {
         {cycleDayNumber &&
           <View style={styles.line}>
             <AppText style={styles.whiteSubtitle}>{cycleDayText}</AppText>
-            <AppText style={styles.tourquiseText}>{labels.cycleDay}</AppText>
+            <AppText style={styles.turquoiseText}>{labels.cycleDay}</AppText>
           </View>
         }
         {phase &&
           <View style={styles.line}>
             <AppText style={styles.whiteSubtitle}>{phaseText}</AppText>
-            <AppText style={styles.tourquiseText}>
+            <AppText style={styles.turquoiseText}>
               {labels.cyclePhase}
             </AppText>
-            <AppText style={styles.tourquiseText}>{status}</AppText>
+            <AppText style={styles.turquoiseText}>{status}</AppText>
             <Asterisk />
           </View>
         }
         <View style={styles.line}>
-          <AppText style={styles.tourquiseText}>{prediction}</AppText>
+          <AppText style={styles.turquoiseText}>{prediction}</AppText>
         </View>
         <Button isCTA isSmall={false} onPress={this.navigateToCycleDayView}>
           {labels.addData}
@@ -137,8 +137,8 @@ const styles = StyleSheet.create({
     fontSize: Sizes.huge,
     marginVertical: Spacing.base,
   },
-  tourquiseText: {
+  turquoiseText: {
-    color: Colors.tourquise,
+    color: Colors.turquoise,
     fontSize: Sizes.subtitle,
   },
   whiteSubtitle: {

components/settings/nfp-settings/temperature-slider.js

@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
     paddingTop: Sizes.base
   },
   marker: {
-    backgroundColor: Colors.tourquiseDark,
+    backgroundColor: Colors.turquoiseDark,
     borderRadius: 50,
     elevation: 4,
     height: Sizes.subtitle,
@@ -72,9 +72,9 @@ const styles = StyleSheet.create({
     height: Sizes.small
   },
   sliderAccentBackground: {
-    backgroundColor: Colors.tourquiseDark
+    backgroundColor: Colors.turquoiseDark
   },
   sliderBackground: {
-    backgroundColor: Colors.tourquise
+    backgroundColor: Colors.turquoise
   },
 })

styles/colors.js

@@ -19,9 +19,9 @@ export default {
   orange: '#F38337',
   purple: '#3A2671',
   purpleLight: '#938EB2',
-  tourquiseDark: '#69CBC1',
+  turquoiseDark: '#69CBC1',
-  tourquise: '#CFECEA',
+  turquoise: '#CFECEA',
-  tourquiseLight: '#E9F2ED',
+  turquoiseLight: '#E9F2ED',
   iconColors: {
     'bleeding': {
       color: redColor,