applies little improvements suggested in review

components/chart/day-column.js

@@ -71,7 +71,7 @@ export default class DayColumn extends Component {
     const cycleDayNumber = getCycleDayNumber(dateString)
     const shortDate = dateString.split('-').slice(1).join('-')
     const cycleDayLabel = (
-      <Text style={label.number}>
+      <Text style = {label.number}>
         {cycleDayNumber ? cycleDayNumber : ' '}
       </Text>)
     const dateLabel = (
@@ -140,7 +140,7 @@ export default class DayColumn extends Component {
             {typeof symptoms.sex === 'number' &&
               <View
                 {...styles.mucusIcon}
-                backgroundColor={styles.mucusIconShades[symptoms.mucus]}
+                backgroundColor='orange'
                 key='sex'
               />
             }

components/chart/styles.js

@@ -1,8 +1,8 @@
 import config from '../../config'
 import {primaryColor, shadesOfRed} from '../../styles/index'
 
-const colorTemperatur = '#765285'
-const colorTemperaturLight = '#a67fb5'
+const colorTemperature = '#765285'
+const colorTemperatureLight = '#a67fb5'
 const dotWidth = 10
 const lineWidth = 2
 const colorLtl = '#feb47b'
@@ -10,22 +10,22 @@ const colorLtl = '#feb47b'
 const styles = {
   curve: {
     borderStyle: 'solid',
-    borderColor: colorTemperatur,
+    borderColor: colorTemperature,
     borderWidth: lineWidth,
   },
   curveExcluded: {
-    borderColor: colorTemperaturLight,
+    borderColor: colorTemperatureLight,
     borderWidth: lineWidth,
     borderStyle: 'dotted'
   },
   curveDots: {
-    backgroundColor: colorTemperatur,
+    backgroundColor: colorTemperature,
     width: dotWidth,
     height: dotWidth,
     borderRadius: 50
   },
   curveDotsExcluded: {
-    backgroundColor: colorTemperaturLight,
+    backgroundColor: colorTemperatureLight,
     width: dotWidth,
     height: dotWidth,
     borderRadius: 50
@@ -35,12 +35,12 @@ const styles = {
       date: {
         color: 'grey',
         fontSize: 9,
-        fontWeight: '100'
+        fontWeight: '100',
       },
       number: {
         color: primaryColor,
         fontSize: 13,
-        textAlign: 'center'
+        textAlign: 'center',
       }
     },
     rect: {
@@ -69,7 +69,7 @@ const styles = {
     '#feb47b'
   ],
   yAxis: {
-    width: 27,//config.columnWidth,
+    width: 27,
     borderRightWidth: 0.5,
     borderColor: 'lightgrey',
     borderStyle: 'solid'

components/chart/y-axis.js

@@ -10,9 +10,6 @@ export function makeYAxisLabels(columnHeight) {
   const style = styles.yAxisLabel
 
   return getTickPositions(columnHeight).map((y, i) => {
-    // this eyeballing is sadly necessary because RN does not
-    // support percentage values for transforms, which we'd need
-    // to reliably place the label vertically centered to the grid
     const tick = scaleMax - i * units
     const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0'
     let showTick
@@ -24,6 +21,9 @@ export function makeYAxisLabels(columnHeight) {
       showTick =  (tick * 10 % 5) ? false : true
       tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold'}
     }
+    // this eyeballing is sadly necessary because RN does not
+    // support percentage values for transforms, which we'd need
+    // to reliably place the label vertically centered to the grid
     return (
       <Text
         style={[style, {top: y - 8}, tickBold]}