Adds info button to the body as alert

components/cycle-day/symptoms/bleeding.js

@@ -1,11 +1,19 @@
 import React from 'react'
 import {
+  Alert,
   Switch,
-  ScrollView
+  ScrollView,
+  TouchableOpacity,
+  View
 } from 'react-native'
-import styles from '../../../styles'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+
 import { bleeding } from '../../../i18n/en/cycle-day'
+import infoLabels from '../../../i18n/en/symptom-info'
+import styles, { iconStyles } from '../../../styles'
+
 import SelectTabGroup from '../select-tab-group'
+
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
@@ -22,6 +30,14 @@ export default class Bleeding extends SymptomView {
 
   symptomName = 'bleeding'
 
+  showInfoBox(){
+    const symptomName = 'bleeding'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
+
   onBackButtonPress() {
     if (typeof this.state.currentValue != 'number') {
       this.deleteSymptomEntry()
@@ -42,16 +58,28 @@ export default class Bleeding extends SymptomView {
     ]
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
+        <View style={{ flexDirection: 'row' }}>
-          header={bleeding.heaviness.header}
+          <SymptomSection
-          explainer={bleeding.heaviness.explainer}
+            header={bleeding.heaviness.header}
-        >
+            explainer={bleeding.heaviness.explainer}
-          <SelectTabGroup
+          >
-            buttons={bleedingRadioProps}
+            <SelectTabGroup
-            active={this.state.currentValue}
+              buttons={bleedingRadioProps}
-            onSelect={val => this.setState({ currentValue: val })}
+              active={this.state.currentValue}
-          />
+              onSelect={val => this.setState({ currentValue: val })}
-        </SymptomSection>
+            />
+          </SymptomSection>
+          <View style={{ flex: 1 }}></View>
+          <TouchableOpacity
+            onPress={this.showInfoBox}
+            style={styles.infoButton}
+          >
+            <FeatherIcon
+              name="info"
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+        </View>
         <SymptomSection
           header={bleeding.exclude.header}
           explainer={bleeding.exclude.explainer}

components/cycle-day/symptoms/cervix.js

@@ -1,11 +1,19 @@
 import React from 'react'
 import {
+  Alert,
   Switch,
-  ScrollView
+  ScrollView,
+  TouchableOpacity,
+  View
 } from 'react-native'
-import styles from '../../../styles'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+
 import { cervix as labels } from '../../../i18n/en/cycle-day'
+import infoLabels from '../../../i18n/en/symptom-info'
+import styles, { iconStyles } from '../../../styles'
+
 import SelectTabGroup from '../select-tab-group'
+
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
@@ -19,6 +27,14 @@ export default class Cervix extends SymptomView {
 
   symptomName = 'cervix'
 
+  showInfoBox(){
+    const symptomName = 'cervix'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
+
   onBackButtonPress() {
     const nothingEntered = ['opening', 'firmness', 'position'].every(val => typeof this.state[val] != 'number')
     if (nothingEntered) {
@@ -53,16 +69,28 @@ export default class Cervix extends SymptomView {
     // const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
+        <View style={{ flexDirection: 'row' }}>
-          header="Opening"
+          <SymptomSection
-          explainer={labels.opening.explainer}
+            header="Opening"
-        >
+            explainer={labels.opening.explainer}
-          <SelectTabGroup
+          >
-            buttons={cervixOpeningRadioProps}
+            <SelectTabGroup
-            active={this.state.opening}
+              buttons={cervixOpeningRadioProps}
-            onSelect={val => this.setState({ opening: val })}
+              active={this.state.opening}
-          />
+              onSelect={val => this.setState({ opening: val })}
-        </SymptomSection>
+            />
+          </SymptomSection>
+          <View style={{ flex: 1 }}></View>
+          <TouchableOpacity
+            onPress={this.showInfoBox}
+            style={styles.infoButton}
+          >
+            <FeatherIcon
+              name="info"
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+        </View>
         <SymptomSection
           header="Firmness"
           explainer={labels.firmness.explainer}

components/cycle-day/symptoms/desire.js

@@ -1,10 +1,18 @@
 import React from 'react'
 import {
-  ScrollView
+  Alert,
+  ScrollView,
+  TouchableOpacity,
+  View
 } from 'react-native'
-import styles from '../../../styles'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+
+import infoLabels from '../../../i18n/en/symptom-info'
 import { intensity, desire } from '../../../i18n/en/cycle-day'
+import styles, { iconStyles } from '../../../styles'
+
 import SelectTabGroup from '../select-tab-group'
+
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
@@ -19,6 +27,14 @@ export default class Desire extends SymptomView {
 
   symptomName = 'desire'
 
+  showInfoBox(){
+    const symptomName = 'desire'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
+
   onBackButtonPress() {
     if (typeof this.state.currentValue != 'number') {
       this.deleteSymptomEntry()
@@ -35,16 +51,28 @@ export default class Desire extends SymptomView {
     ]
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
+        <View style={{ flexDirection: 'row' }}>
-          header={desire.header}
+          <SymptomSection
-          explainer={desire.explainer}
+            header={desire.header}
-        >
+            explainer={desire.explainer}
-          <SelectTabGroup
+          >
-            buttons={desireRadioProps}
+            <SelectTabGroup
-            active={this.state.currentValue}
+              buttons={desireRadioProps}
-            onSelect={val => this.setState({ currentValue: val })}
+              active={this.state.currentValue}
-          />
+              onSelect={val => this.setState({ currentValue: val })}
-        </SymptomSection>
+            />
+          </SymptomSection>
+          <View style={{ flex: 1 }}></View>
+          <TouchableOpacity
+            onPress={this.showInfoBox}
+            style={styles.infoButton}
+          >
+            <FeatherIcon
+              name="info"
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+        </View>
       </ScrollView>
     )
   }

components/cycle-day/symptoms/mucus.js

@@ -1,12 +1,20 @@
 import React from 'react'
 import {
+  Alert,
   Switch,
-  ScrollView
+  ScrollView,
+  TouchableOpacity,
+  View
 } from 'react-native'
-import styles from '../../../styles'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+
+import styles, { iconStyles } from '../../../styles'
+import infoLabels from '../../../i18n/en/symptom-info'
 import { mucus as labels } from '../../../i18n/en/cycle-day'
 import computeNfpValue from '../../../lib/nfp-mucus'
+
 import SelectTabGroup from '../select-tab-group'
+
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
@@ -19,6 +27,14 @@ export default class Mucus extends SymptomView {
   }
 
   symptomName = 'mucus'
+  
+  showInfoBox(){
+    const symptomName = 'mucus'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
 
   onBackButtonPress() {
     const nothingEntered = ['feeling', 'texture'].every(val => typeof this.state[val] != 'number')
@@ -26,7 +42,7 @@ export default class Mucus extends SymptomView {
       this.deleteSymptomEntry()
       return
     }
-
+    
     const feeling = this.state.feeling
     const texture = this.state.texture
     this.saveSymptomEntry({
@@ -53,16 +69,29 @@ export default class Mucus extends SymptomView {
     // const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
+        <View style={{ flexDirection: 'row' }}>
-          header='Feeling'
+          <SymptomSection
-          explainer={labels.feeling.explainer}
+            header='Feeling'
-        >
+            explainer={labels.feeling.explainer}
-          <SelectTabGroup
+          >
-            buttons={mucusFeeling}
+            <SelectTabGroup
-            onSelect={val => this.setState({ feeling: val })}
+              buttons={mucusFeeling}
-            active={this.state.feeling}
+              onSelect={val => this.setState({ feeling: val })}
-          />
+              active={this.state.feeling}
-        </SymptomSection>
+            />
+          </SymptomSection>
+          <View style={{ flex: 1 }}></View>
+          <TouchableOpacity
+            onPress={this.showInfoBox}
+            style={styles.infoButton}
+          >
+            <FeatherIcon
+              name="info"
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+        </View>
+
         <SymptomSection
           header='Texture'
           explainer={labels.texture.explainer}

components/cycle-day/symptoms/note.js

@@ -1,13 +1,19 @@
 import React from 'react'
 import {
+  Alert,
   ScrollView,
   TextInput,
+  TouchableOpacity,
+  View
 } from 'react-native'
+import FeatherIcon from 'react-native-vector-icons/Feather'
 
-import styles from '../../../styles'
+import infoLabels from '../../../i18n/en/symptom-info'
-import SymptomSection from './symptom-section'
 import { noteExplainer } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
+import styles, { iconStyles } from '../../../styles'
+
+import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
 export default class Note extends SymptomView {
@@ -23,6 +29,14 @@ export default class Note extends SymptomView {
 
   symptomName = 'note'
 
+  showInfoBox(){
+    const symptomName = 'note'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
+
   onBackButtonPress() {
     if (!this.state.currentValue) {
       this.deleteSymptomEntry()
@@ -36,19 +50,31 @@ export default class Note extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
+        <View style={{ flexDirection: 'row' }}>
-          explainer={noteExplainer}
+          <SymptomSection
-        >
+            explainer={noteExplainer}
-          <TextInput
+          >
-            autoFocus={!this.state.currentValue}
+            <TextInput
-            multiline={true}
+              autoFocus={!this.state.currentValue}
-            placeholder={sharedLabels.enter}
+              multiline={true}
-            onChangeText={(val) => {
+              placeholder={sharedLabels.enter}
-              this.setState({ currentValue: val })
+              onChangeText={(val) => {
-            }}
+                this.setState({ currentValue: val })
-            value={this.state.currentValue}
+              }}
-          />
+              value={this.state.currentValue}
-        </SymptomSection>
+            />
+          </SymptomSection>
+          <View style={{ flex: 1 }}></View>
+          <TouchableOpacity
+            onPress={this.showInfoBox}
+            style={styles.infoButton}
+          >
+            <FeatherIcon
+              name="info"
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+        </View>
       </ScrollView>
     )
   }

components/cycle-day/symptoms/sex.js

@@ -1,12 +1,20 @@
 import React from 'react'
 import {
+  Alert,
+  ScrollView,
   TextInput,
-  ScrollView
+  TouchableOpacity,
+  View
 } from 'react-native'
-import styles from '../../../styles'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+
+import infoLabels from '../../../i18n/en/symptom-info'
 import { sex as sexLabels, contraceptives as contraceptivesLabels } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
+import styles, { iconStyles } from '../../../styles'
+
 import SelectBoxGroup from '../select-box-group'
+
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
@@ -24,8 +32,16 @@ export default class Sex extends SymptomView {
     if (this.state.note) this.state.other = true
   }
 
-  symptomName = "sex"
+  symptomName = 'sex'
 
+  showInfoBox(){
+    const symptomName = 'sex'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
+  
   onBackButtonPress() {
     const nothingEntered = Object.values(this.state).every(val => !val)
     if (nothingEntered) {
@@ -51,16 +67,28 @@ export default class Sex extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
+        <View style={{ flexDirection: 'row' }}>
-          header={sexLabels.header}
+          <SymptomSection
-          explainer={sexLabels.explainer}
+            header={sexLabels.header}
-        >
+            explainer={sexLabels.explainer}
-          <SelectBoxGroup
+          >
-            labels={sexLabels.categories}
+            <SelectBoxGroup
-            onSelect={this.toggleState}
+              labels={sexLabels.categories}
-            optionsState={this.state}
+              onSelect={this.toggleState}
-          />
+              optionsState={this.state}
-        </SymptomSection>
+            />
+          </SymptomSection>
+          <View style={{ flex: 1 }}></View>
+          <TouchableOpacity
+            onPress={this.showInfoBox}
+            style={styles.infoButton}
+          >
+            <FeatherIcon
+              name="info"
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+        </View>
         <SymptomSection
           header={contraceptivesLabels.header}
           explainer={contraceptivesLabels.explainer}

styles/index.js

@@ -474,6 +474,11 @@ export const iconStyles = {
   symptomBoxActive: {
     color: fontOnPrimaryColor
   },
+  symptomInfo: {
+    color: secondaryColor,
+    marginHorizontal: 20,
+    fontSize: 25
+  },
   menuIcon: {
     size: 20,
     color: fontOnPrimaryColor