merges master into branch

components/cycle-day/cycle-day-overview.js

@@ -6,13 +6,21 @@ import {
   Dimensions
 } from 'react-native'
 import { LocalDate } from 'js-joda'
+import Svg, { G } from 'react-native-svg'
 import Header from '../header'
 import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
-import Icon from 'react-native-vector-icons/FontAwesome'
-import styles, { iconStyles } from '../../styles'
+import styles from '../../styles'
 import * as labels from './labels/labels'
 import { AppText } from '../app-text'
+import BleedingIcon from '../../assets/bleeding'
+import CervixIcon from '../../assets/cervix'
+import DesireIcon from '../../assets/desire'
+import MucusIcon from '../../assets/mucus'
+import NoteIcon from '../../assets/note'
+import PainIcon from '../../assets/pain'
+import SexIcon from '../../assets/sex'
+import TemperatureIcon from '../../assets/temperature'
 
 const bleedingLabels = labels.bleeding
 const feelingLabels = labels.mucus.feeling.categories
@@ -68,47 +76,64 @@ export default class CycleDayOverView extends Component {
               onPress={() => this.navigate('BleedingEditView')}
               data={getLabel('bleeding', cycleDay.bleeding)}
               disabled={dateInFuture}
-            />
+            >
+              <BleedingIcon viewBox='10 10 320 400' />
+            </SymptomBox>
             <SymptomBox
               title='Temperature'
               onPress={() => this.navigate('TemperatureEditView')}
               data={getLabel('temperature', cycleDay.temperature)}
               disabled={dateInFuture}
-            />
+            >
+              <TemperatureIcon viewBox='10 10 320 400' />
+            </SymptomBox>
             <SymptomBox
               title='Mucus'
               onPress={() => this.navigate('MucusEditView')}
               data={getLabel('mucus', cycleDay.mucus)}
               disabled={dateInFuture}
-            />
+            >
+              <MucusIcon viewBox='10 10 320 400' />
+            </SymptomBox>
             <SymptomBox
               title='Cervix'
               onPress={() => this.navigate('CervixEditView')}
               data={getLabel('cervix', cycleDay.cervix)}
               disabled={dateInFuture}
-            />
+            >
+              <CervixIcon viewBox='10 10 320 440' />
+            </SymptomBox>
             <SymptomBox
               title='Desire'
               onPress={() => this.navigate('DesireEditView')}
               data={getLabel('desire', cycleDay.desire)}
               disabled={dateInFuture}
-            />
+            >
+              <DesireIcon viewBox='10 10 320 380' />
+            </SymptomBox>
             <SymptomBox
               title='Sex'
               onPress={() => this.navigate('SexEditView')}
               data={getLabel('sex', cycleDay.sex)}
               disabled={dateInFuture}
-            />
+            >
+              <SexIcon viewBox='10 10 320 400' />
+            </SymptomBox>
             <SymptomBox
               title='Pain'
               onPress={() => this.navigate('PainEditView')}
               data={getLabel('pain', cycleDay.pain)}
-            />
+              disabled={dateInFuture}
+            >
+              <PainIcon viewBox='10 10 300 400' />
+            </SymptomBox>
             <SymptomBox
               title='Note'
               onPress={() => this.navigate('NoteEditView')}
               data={getLabel('note', cycleDay.note)}
-            />
+            >
+              <NoteIcon viewBox='10 10 270 400' />
+            </SymptomBox>
             {/*  this is just to make the last row adhere to the grid
         (and) because there are no pseudo properties in RN */}
             <FillerBoxes />
@@ -221,10 +246,6 @@ class SymptomBox extends Component {
   render() {
     const d = this.props.data
     const boxActive = d ? styles.symptomBoxActive : {}
-    const iconActive = d ? iconStyles.symptomBoxActive : {}
-    const iconStyle = Object.assign(
-      {}, iconStyles.symptomBox, iconActive, disabledStyle
-    )
     const textActive = d ? styles.symptomTextActive : {}
     const disabledStyle = this.props.disabled ? styles.symptomInFuture : {}
 
@@ -234,10 +255,20 @@ class SymptomBox extends Component {
         disabled={this.props.disabled}
       >
         <View style={[styles.symptomBox, boxActive, disabledStyle]}>
-          <Icon
-            name='thermometer'
-            {...iconStyle}
-          />
+
+          {this.props.children ?
+            React.Children.map(this.props.children, child => {
+              return (
+                <Svg width={100} height={50} viewBox={child.props.viewBox}>
+                  <G fill={d ? 'white' : 'black'}>
+                    {child}
+                  </G>
+                </Svg>
+              )
+            })
+            : null
+          }
+
           <AppText style={[textActive, disabledStyle]}>
             {this.props.title}
           </AppText>

components/cycle-day/labels/labels.js

@@ -43,6 +43,8 @@ export const sex = {
   patch: 'Patch',
   ring: 'Ring',
   implant: 'Implant',
+  diaphragm: 'Diaphragm',
+  none: 'None',
   other: 'Other',
   activityExplainer: 'Were you sexually active today?',
   contraceptiveExplainer: 'Did you use contraceptives?'

components/cycle-day/symptoms/action-button-footer.js

@@ -53,7 +53,8 @@ export default class ActionButtonFooter extends Component {
     return (
       <View style={styles.menu}>
         {buttons.map(({ title, action, disabledCondition, icon }, i) => {
-          const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
+          const textStyle = [styles.menuText]
+          if (disabledCondition) textStyle.push(styles.menuTextInActive)
           const iconStyle = disabledCondition ?
             Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
             iconStyles.menuIcon

components/cycle-day/symptoms/sex.js

@@ -37,6 +37,12 @@ const contraceptiveBoxes = [{
 }, {
   label: labels.implant,
   stateKey: 'implant'
+}, {
+  label: labels.diaphragm,
+  stateKey: 'diaphragm'
+}, {
+  label: labels.none,
+  stateKey: 'none'
 }, {
   label: labels.other,
   stateKey: 'other'