Highlight weekend dates in chart

components/chart/day-column.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
+import moment from 'moment'
 
 import { getCycleDay } from '../../db'
 
@@ -26,6 +27,8 @@ const DayColumn = ({
   symptomRowSymptoms,
   xAxisHeight,
 }) => {
+  const momentDate = moment(dateString)
+  const isWeekend = momentDate.day() == 0 || momentDate.day() == 6
   const cycleDayData = getCycleDay(dateString)
   let data = {}
 
@@ -73,6 +76,7 @@ const DayColumn = ({
           isVerticalLine={fhmAndLtl.drawFhmLine}
           data={data && data.temperature}
           columnHeight={columnHeight}
+          isWeekend={isWeekend}
         />
       )}
 
@@ -92,6 +96,7 @@ const DayColumn = ({
             isSymptomDataComplete={
               hasSymptomData && isSymptomDataComplete(symptom, dateString)
             }
+            isWeekend={isWeekend}
             height={symptomHeight}
           />
         )

components/chart/symptom-cell.js

@@ -15,14 +15,31 @@ const SymptomCell = ({
   symptom,
   symptomValue,
   isSymptomDataComplete,
+  isWeekend,
 }) => {
   const shouldDrawDot = symptomValue !== false
+  // Determine the background color based on isWeekend prop
+  const weekendBackgroundColor = isWeekend ? Colors.greyVeryLight : 'white'
   const styleCell =
     index !== 0
-      ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
-      : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
+      ? [
+          styles.cell,
+          {
+            height,
+            width: CHART_COLUMN_WIDTH,
+            backgroundColor: weekendBackgroundColor,
+          },
+        ]
+      : [
+          styles.cell,
+          {
+            height,
+            width: CHART_COLUMN_WIDTH,
+            backgroundColor: weekendBackgroundColor,
+          },
+          styles.topBorder,
+        ]
   let styleDot
-
   if (shouldDrawDot) {
     const styleSymptom = Colors.iconColors[symptom]
     const symptomColor = styleSymptom.shades[symptomValue]
@@ -47,6 +64,7 @@ SymptomCell.propTypes = {
   symptom: PropTypes.string,
   symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   isSymptomDataComplete: PropTypes.bool,
+  isWeekend: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({

components/chart/temperature-column.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet } from 'react-native'
+import { Colors } from '../../styles'
 
 import { Surface, Path } from '@react-native-community/art'
 
@@ -14,14 +15,16 @@ const TemperatureColumn = ({
   isVerticalLine,
   data,
   columnHeight,
+  isWeekend,
 }) => {
   const x = CHART_STROKE_WIDTH / 2
 
+  const weekendBackgroundColor = isWeekend ? Colors.greyVeryLight : 'white'
   return (
     <Surface
       width={CHART_COLUMN_WIDTH}
       height={columnHeight}
-      style={styles.container}
+      style={{ ...styles.container, backgroundColor: weekendBackgroundColor }}
     >
       <ChartLine path={new Path().lineTo(0, columnHeight)} />
 
@@ -63,6 +66,7 @@ TemperatureColumn.propTypes = {
   isVerticalLine: PropTypes.bool,
   data: PropTypes.object,
   columnHeight: PropTypes.number,
+  isWeekend: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({

styles/colors.js

@@ -1,7 +1,14 @@
 const redColor = '#c3000d'
 export const shadesOfRed = ['#e7999e', '#db666d', '#cf323d', '#c3000d'] // light to dark
 const violetColor = '#6a7b98'
-const shadesOfViolet = ['#e3e7ed', '#c8cfdc', '#acb8cb', '#91a0ba', '#7689a9', violetColor] // light to dark
+const shadesOfViolet = [
+  '#e3e7ed',
+  '#c8cfdc',
+  '#acb8cb',
+  '#91a0ba',
+  '#7689a9',
+  violetColor,
+] // light to dark
 const yellowColor = '#dbb40c'
 const shadesOfYellow = ['#f0e19d', '#e9d26d', '#e2c33c', yellowColor] // light to dark
 const magentaColor = '#6f2565'
@@ -16,6 +23,7 @@ export default {
   greyDark: '#555',
   grey: '#888',
   greyLight: '#CCC',
+  greyVeryLight: '#F4F4F4',
   orange: '#F38337',
   purple: '#3A2671',
   purpleLight: '#938EB2',
@@ -23,37 +31,37 @@ export default {
   turquoise: '#CFECEA',
   turquoiseLight: '#E9F2ED',
   iconColors: {
-    'bleeding': {
+    bleeding: {
       color: redColor,
       shades: shadesOfRed,
     },
-    'mucus': {
+    mucus: {
       color: violetColor,
       shades: shadesOfViolet,
     },
-    'cervix': {
+    cervix: {
       color: yellowColor,
       shades: shadesOfYellow,
     },
-    'sex': {
+    sex: {
       color: magentaColor,
       shades: shadesOfMagenta,
     },
-    'desire': {
+    desire: {
       color: pinkColor,
       shades: shadesOfPink,
     },
-    'pain': {
+    pain: {
       color: lightGreenColor,
       shades: [lightGreenColor],
     },
-    'mood': {
+    mood: {
       color: orangeColor,
       shades: [orangeColor],
     },
-    'note': {
+    note: {
       color: mintColor,
       shades: [mintColor],
     },
   },
-}
+}