adds colors for symptoms

components/chart/chart.js

@@ -111,7 +111,7 @@ export default class CycleChart extends Component {
             (cycleDay.cervix.opening + cycleDay.cervix.firmness)
         } else if (symptom === 'sex') {
           // solo = 1 + partner = 2
-          acc.sex = cycleDay.sex && (cycleDay.sex.solo + cycleDay.sex.partner)
+          acc.sex = cycleDay.sex && (cycleDay.sex.solo + 2 * cycleDay.sex.partner)
         } else if (symptom === 'pain') {
           // is any pain documented?
           acc.pain = cycleDay.pain &&

components/chart/day-column.js

@@ -3,7 +3,6 @@ import {
   Text, View, TouchableOpacity
 } from 'react-native'
 import Svg,{ G, Rect, Line } from 'react-native-svg'
-import Icon from 'react-native-vector-icons/Entypo'
 import styles from './styles'
 import config from '../../config'
 import { getOrCreateCycleDay } from '../../db'
@@ -116,10 +115,9 @@ export default class DayColumn extends Component {
           symptomHeight={symptomHeight}
           key='bleeding'
         >
-          <Icon
+          <View
-            name='drop'
+            {...styles.symptomIcon}
-            size={12}
+            backgroundColor={styles.iconShades.bleeding[this.props.bleeding]}
-            color={styles.bleedingIconShades[this.props.bleeding]}
           />
         </SymptomIconView>
       ),
@@ -130,8 +128,8 @@ export default class DayColumn extends Component {
           key='mucus'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor={styles.mucusIconShades[this.props.mucus]}
+            backgroundColor={styles.iconShades.mucus[this.props.mucus]}
           />
         </SymptomIconView>
       ),
@@ -142,9 +140,9 @@ export default class DayColumn extends Component {
           key='cervix'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
             // cervix is sum of openess and firmness - fertile only when closed and hard (=0)
-            backgroundColor={this.props.cervix > 0 ? 'blue' : 'green'}
+            backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[1] : styles.iconShades.cervix[0]}
           />
         </SymptomIconView>
       ),
@@ -155,8 +153,8 @@ export default class DayColumn extends Component {
           key='sex'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor='orange'
+            backgroundColor={styles.iconShades.sex[this.props.sex - 1]}
           />
         </SymptomIconView>
       ),
@@ -167,8 +165,8 @@ export default class DayColumn extends Component {
           key='desire'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor='red'
+            backgroundColor={styles.iconShades.desire[this.props.desire]}
           />
         </SymptomIconView>
       ),
@@ -179,8 +177,8 @@ export default class DayColumn extends Component {
           key='pain'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor='blue'
+            backgroundColor={styles.iconShades.pain}
           />
         </SymptomIconView>
       ),
@@ -191,8 +189,8 @@ export default class DayColumn extends Component {
           key='note'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor='green'
+            backgroundColor={styles.iconShades.note}
           />
         </SymptomIconView>
       )

components/chart/styles.js

@@ -48,25 +48,39 @@ const styles = {
       fill: 'transparent'
     }
   },
-  bleedingIcon: {
+  symptomIcon: {
-    fill: '#fb2e01',
-    scale: 0.6,
-    x: 6,
-    y: 3
-  },
-  bleedingIconShades: shadesOfRed,
-  mucusIcon: {
     width: 12,
     height: 12,
     borderRadius: 50,
   },
-  mucusIconShades: [
+  iconShades: {
-    '#fef0e4',
+    'bleeding': shadesOfRed,
-    '#fee1ca',
+    'mucus': [
-    '#fed2af',
+      '#e8f6a4',
-    '#fec395',
+      '#bccd67',
-    '#feb47b'
+      '#91a437',
-  ],
+      '#6a7b15',
+      '#445200',
+    ],
+    'cervix': [
+      '#f0e19d',
+      '#e9d26d',
+      '#e2c33c',
+      '#dbb40c',
+    ],
+    'sex': [
+      '#A66FA6',
+      '#8A458A',
+      '#6f2565',
+    ],
+    'desire': [
+      '#68113f',
+      '#8b2e5f',
+      '#ad5784',
+    ],
+    'pain': ['#7689A9'],
+    'note': ['#6CA299']
+  },
   yAxis: {
     width: 27,
     borderRightWidth: 1,

styles/index.js

@@ -4,7 +4,12 @@ export const primaryColor = '#ff7e5f'
 export const secondaryColor = '#351c4d'
 export const secondaryColorLight = '#91749d'
 export const fontOnPrimaryColor = 'white'
-export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark
+export const shadesOfRed = [
+  '#e7999e',
+  '#db666d',
+  '#cf323d',
+  '#c3000d'
+] // light to dark
 
 const defaultBottomMargin = 5
 const defaultIndentation = 10