little improvements after review

components/chart/chart.js

@@ -10,6 +10,7 @@ import styles from './styles'
 import { scaleObservable } from '../../local-storage'
 import config from '../../config'
 import { AppText } from '../app-text'
+import { shared as labels } from '../labels'
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -137,7 +138,6 @@ export default class CycleChart extends Component {
   }
 
   render() {
-    console.log(this.symptomRowSymptoms)
     return (
       <View
         onLayout={this.onLayout}
@@ -145,55 +145,29 @@ export default class CycleChart extends Component {
       >
         {!this.state.chartLoaded &&
           <View style={{width: '100%', justifyContent: 'center', alignItems: 'center'}}>
-            <AppText>Loading...</AppText>
+            <AppText>{labels.loading}</AppText>
           </View>
         }
 
         {this.state.chartHeight && this.state.chartLoaded &&
           <View>
-            <View
+            <View style={[styles.yAxis, {height: this.symptomRowHeight}]}>
-              style={[
-                styles.yAxis,
-                {
-                  height: this.symptomRowHeight,
-                }
-              ]}
-            >
               {this.symptomRowSymptoms.map(symptomName => {
                 return <View key={symptomName} style={{flex: 1}}>
                   <AppText>{symptomName[0]}</AppText>
                 </View>
-              })
+              })}
-              }
             </View>
-            <View
+            <View style={[styles.yAxis, {height: this.columnHeight}]}>
-              style={[styles.yAxis, {
-                height: this.columnHeight,
-              }]}
-            >
               {makeYAxisLabels(this.columnHeight)}
             </View>
-            <View style={[
+            <View style={[styles.yAxis, {height: this.xAxisHeight}]}>
-              styles.yAxis,
+              <AppText style = {[styles.column.label.number, styles.yAxisLabels.cycleDayLabel]}>
-              {
+                {labels.cycleDayWithLinebreak}
-                height: this.xAxisHeight
+              </AppText>
-              }
+              <AppText style={[styles.column.label.date,styles.yAxisLabels.dateLabel]}>
-            ]}>
+                {labels.date}
-              <AppText style = {[
+              </AppText>
-                styles.column.label.number,
-                {
-                  textAlign: 'center',
-                  justifyContent: 'center',
-                  fontSize: Math.ceil(styles.column.label.number.fontSize / 2)
-                }
-              ]}>{'Cycle\nday'}</AppText>
-              <AppText style={[
-                styles.column.label.date,
-                {
-                  textAlign: 'center',
-                  justifyContent: 'center'
-                }
-              ]}>{'Date'}</AppText>
             </View>
           </View>}
 

components/chart/day-column.js

@@ -149,7 +149,7 @@ export default class DayColumn extends Component {
           <View
             {...styles.symptomIcon}
             // cervix is sum of openess and firmness - fertile only when closed and hard (=0)
-            backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[1] : styles.iconShades.cervix[0]}
+            backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[2] : styles.iconShades.cervix[0]}
           />
         </SymptomIconView>
       ),

components/chart/styles.js

@@ -8,6 +8,7 @@ const lineWidth = 1.5
 const colorLtl = '#feb47b'
 const gridColor = 'lightgrey'
 const gridLineWidth = 0.5
+const numberLabelFontSize = 13
 
 const styles = {
   curve: {
@@ -36,7 +37,7 @@ const styles = {
       },
       number: {
         color: primaryColor,
-        fontSize: 13,
+        fontSize: numberLabelFontSize,
         textAlign: 'center',
       }
     },
@@ -57,11 +58,11 @@ const styles = {
   iconShades: {
     'bleeding': shadesOfRed,
     'mucus': [
-      '#e8f6a4',
+      '#e3e7ed',
-      '#bccd67',
+      '#c8cfdc',
-      '#91a437',
+      '#acb8cb',
-      '#6a7b15',
+      '#91a0ba',
-      '#445200',
+      '#7689a9'
     ],
     'cervix': [
       '#f0e19d',
@@ -70,16 +71,16 @@ const styles = {
       '#dbb40c',
     ],
     'sex': [
-      '#A66FA6',
+      '#a87ca2',
-      '#8A458A',
+      '#8b5083',
       '#6f2565',
     ],
     'desire': [
-      '#68113f',
+      '#c485a6',
-      '#8b2e5f',
+      '#b15c89',
-      '#ad5784',
+      '#9e346c',
     ],
-    'pain': ['#7689A9'],
+    'pain': ['#bccd67'],
     'note': ['#6CA299']
   },
   yAxis: {
@@ -88,13 +89,24 @@ const styles = {
     borderColor: 'lightgrey',
     borderStyle: 'solid'
   },
-  yAxisLabel: {
+  yAxisLabels: {
+    tempScale: {
       position: 'absolute',
       right: 2,
       color: 'grey',
       fontSize: 9,
       textAlign: 'left'
     },
+    cycleDayLabel: {
+      textAlign: 'center',
+      justifyContent: 'center',
+      fontSize: Math.ceil(numberLabelFontSize / 2)
+    },
+    dateLabel: {
+      textAlign: 'center',
+      justifyContent: 'center'
+    }
+  },
   horizontalGrid: {
     position:'absolute',
     borderColor: gridColor,

components/chart/y-axis.js

@@ -8,7 +8,7 @@ import { AppText } from '../app-text'
 export function makeYAxisLabels(columnHeight) {
   const units = unitObservable.value
   const scaleMax = scaleObservable.value.max
-  const style = styles.yAxisLabel
+  const style = styles.yAxisLabels.tempScale
 
   return getTickPositions(columnHeight).map((y, i) => {
     const tick = scaleMax - i * units

components/labels.js

@@ -8,7 +8,10 @@ export const shared = {
   incorrectPasswordMessage: 'That password is incorrect.',
   tryAgain: 'Try again',
   ok: 'OK',
-  unlock: 'Unlock'
+  unlock: 'Unlock',
+  date: 'Date',
+  cycleDayWithLinebreak: 'Cycle\nday',
+  loading: 'Loading ...'
 }
 
 export const settings = {