Rafactors symptom color definition

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>