Rafactors symptom color definition

components/chart/day-column.js

@@ -146,16 +146,17 @@ class DayColumn extends Component {
     const styleParent = [styles.symptomRow, {height: symptomHeight}]
 
     if (shouldDrawSymptom) {
-      const styleSymptom = styles.iconShades[symptom]
+      const styleSymptom = styles.iconColors[symptom]
       const symptomData = this.data[symptom]
+      const symptomColor = styleSymptom.shades[symptomData]
 
       const dataIsComplete = this.isSymptomDataComplete(symptom)
       const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
 
       const backgroundColor = (isMucusOrCervix && !dataIsComplete) ?
-        'white' : styleSymptom[symptomData]
+        'white' : symptomColor
       const borderWidth = (isMucusOrCervix && !dataIsComplete) ? 2 : 0
-      const borderColor = styleSymptom[0]
+      const borderColor = symptomColor
       const styleChild = [styles.symptomIcon, {
         backgroundColor,
         borderColor,

components/chart/styles.js

@@ -11,6 +11,19 @@ const gridLineWidthVertical = 0.6
 const gridLineWidthHorizontal = 0.3
 const numberLabelFontSize = 13
 
+const redColor = '#c3000d'
+const violetColor = '#7689a9'
+const shadesOfViolet = ['#e3e7ed', '#c8cfdc', '#acb8cb', '#91a0ba', violetColor] // light to dark
+const yellowColor = '#dbb40c'
+const shadesOfYellow = ['#f0e19d', '#e9d26d', '#e2c33c', yellowColor] // light to dark
+const magentaColor = '#6f2565'
+const shadesOfMagenta = ['#a87ca2', '#8b5083', magentaColor] // light to dark
+const pinkColor = '#9e346c'
+const shadesOfPink = ['#c485a6', '#b15c89', pinkColor] // light to dark
+const lightGreenColor = '#bccd67'
+const orangeColor = '#bc6642'
+const mintColor = '#6ca299'
+
 const styles = {
   curve: {
     stroke: colorTemperature,
@@ -53,34 +66,39 @@ const styles = {
     height: 12,
     borderRadius: 50,
   },
-  iconShades: {
-    'bleeding': shadesOfRed,
-    'mucus': [
-      '#e3e7ed',
-      '#c8cfdc',
-      '#acb8cb',
-      '#91a0ba',
-      '#7689a9'
-    ],
-    'cervix': [
-      '#f0e19d',
-      '#e9d26d',
-      '#e2c33c',
-      '#dbb40c',
-    ],
-    'sex': [
-      '#a87ca2',
-      '#8b5083',
-      '#6f2565',
-    ],
-    'desire': [
-      '#c485a6',
-      '#b15c89',
-      '#9e346c',
-    ],
-    'pain': ['#bccd67'],
-    'mood': ['#bc6642'],
-    'note': ['#6ca299']
+  iconColors: {
+    'bleeding': {
+      color: redColor,
+      shades: shadesOfRed,
+    },
+    'mucus': {
+      color: violetColor,
+      shades: shadesOfViolet,
+    },
+    'cervix': {
+      color: yellowColor,
+      shades: shadesOfYellow,
+    },
+    'sex': {
+      color: magentaColor,
+      shades: shadesOfMagenta,
+    },
+    'desire': {
+      color: pinkColor,
+      shades: shadesOfPink,
+    },
+    'pain': {
+      color: lightGreenColor,
+      shades: [lightGreenColor],
+    },
+    'mood': {
+      color: orangeColor,
+      shades: [orangeColor],
+    },
+    'note': {
+      color: mintColor,
+      shades: [mintColor],
+    },
   },
   yAxis: {
     width: 27,

components/chart/y-axis.js

@@ -14,19 +14,6 @@ import { cycleDayColor } from '../../styles'
 
 import { shared as labels } from '../../i18n/en/labels'
 
-
-const symptomIcons = {
-  bleeding: <DripIcon size={16} name='drip-icon-bleeding' color={styles.iconShades.bleeding[3]}/>,
-  mucus: <DripIcon size={16} name='drip-icon-mucus' color={styles.iconShades.mucus[4]}/>,
-  cervix: <DripIcon size={16} name='drip-icon-cervix' color={styles.iconShades.cervix[3]}/>,
-  desire: <DripIcon size={16} name='drip-icon-desire' color={styles.iconShades.desire[2]}/>,
-  sex: <DripIcon size={16} name='drip-icon-sex' color={styles.iconShades.sex[2]}/>,
-  pain: <DripIcon size={16} name='drip-icon-pain' color={styles.iconShades.pain[0]}/>,
-  mood: <DripIcon size={16} name='drip-icon-mood' color={styles.iconShades.mood[0]}/>,
-  note: <DripIcon size={16} name='drip-icon-note' color={styles.iconShades.note[0]}/>
-}
-
-
 export function makeYAxisLabels(columnHeight) {
   const units = unitObservable.value
   const scaleMax = scaleObservable.value.max
@@ -100,14 +87,14 @@ const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => {
   return (
     <View>
       <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
-        {symptomsToDisplay.map(symptomName => {
+        {symptomsToDisplay.map(symptom => {
           return <View
             style={{ alignItems: 'center', justifyContent: 'center' }}
-            key={symptomName}
+            key={symptom}
             width={styles.yAxis.width}
             height={symptomsSectionHeight / symptomsToDisplay.length}
           >
-            {symptomIcons[symptomName]}
+            <DripIcon size={16} name={`drip-icon-${symptom}`} color={styles.iconColors[symptom].color}/>
           </View>
         })}
       </View>