[WIP] Adds info button to body as alert for:

* mood, pain, temperature

components/cycle-day/symptoms/mood.js

@@ -1,11 +1,20 @@
 import React from 'react'
 import {
+  Alert,
   ScrollView,
-  TextInput} from 'react-native'
+  TextInput,
+  TouchableOpacity,
+  View
+} from 'react-native'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+
+import infoLabels from '../../../i18n/en/symptom-info'
 import { mood as labels } from '../../../i18n/en/cycle-day'
+import styles, { iconStyles } from '../../../styles'
+
 import SelectBoxGroup from '../select-box-group'
+
 import SymptomSection from './symptom-section'
-import styles from '../../../styles'
 import SymptomView from './symptom-view'
 
 export default class Mood extends SymptomView {
@@ -22,7 +31,15 @@ export default class Mood extends SymptomView {
     }
   }
 
-  symptomName = "mood"
+  symptomName = 'mood'
+  
+  showInfoBox(){
+    const symptomName = 'mood'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
 
   onBackButtonPress() {
     const nothingEntered = Object.values(this.state).every(val => !val)
@@ -48,9 +65,19 @@ export default class Mood extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
+        <View style={{ flexDirection: 'row' }}>
           <SymptomSection
             explainer={labels.explainer}
           >
+            <TouchableOpacity
+              onPress={this.showInfoBox}
+              style={styles.infoButton}
+            >
+              <FeatherIcon
+                name="info"
+                style={iconStyles.symptomInfo}
+              />
+            </TouchableOpacity>
             <SelectBoxGroup
               labels={labels.categories}
               onSelect={this.toggleState}
@@ -68,6 +95,7 @@ export default class Mood extends SymptomView {
               />
             }
           </SymptomSection>
+        </View>
       </ScrollView>
     )
   }

components/cycle-day/symptoms/pain.js

@@ -1,13 +1,21 @@
 import React from 'react'
 import {
+  Alert,
   ScrollView,
   TextInput,
+  TouchableOpacity,
+  View
 } from 'react-native'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+
+import infoLabels from '../../../i18n/en/symptom-info'
 import { pain as labels } 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 styles from '../../../styles'
 import SymptomView from './symptom-view'
 
 export default class Pain extends SymptomView {
@@ -26,6 +34,14 @@ export default class Pain extends SymptomView {
 
   symptomName = 'pain'
 
+  showInfoBox(){
+    const symptomName = 'pain'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
+
   onBackButtonPress() {
     const nothingEntered = Object.values(this.state).every(val => !val)
     if (nothingEntered) {
@@ -51,9 +67,19 @@ export default class Pain extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
+        <View style={{ flexDirection: 'row' }}>
           <SymptomSection
             explainer={labels.explainer}
           >
+            <TouchableOpacity
+              onPress={this.showInfoBox}
+              style={styles.infoButton}
+            >
+              <FeatherIcon
+                name="info"
+                style={iconStyles.symptomInfo}
+              />
+            </TouchableOpacity>
             <SelectBoxGroup
               labels={labels.categories}
               onSelect={this.toggleState}
@@ -71,6 +97,7 @@ export default class Pain extends SymptomView {
               />
             }
           </SymptomSection>
+        </View>
       </ScrollView>)
   }
 }

components/cycle-day/symptoms/temperature.js

@@ -1,23 +1,28 @@
 import React from 'react'
 import {
-  View,
-  Switch,
-  Keyboard,
   Alert,
-  ScrollView
+  Keyboard,
+  ScrollView,
+  Switch,
+  TouchableOpacity,
+  View
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
-import padWithZeros from '../../helpers/pad-time-with-zeros'
-
-import { getPreviousTemperature } from '../../../db'
-import styles from '../../../styles'
+import FeatherIcon from 'react-native-vector-icons/Feather'
 import { LocalTime, ChronoUnit } from 'js-joda'
-import { temperature as labels } from '../../../i18n/en/cycle-day'
+
+import config from '../../../config'
+import { getPreviousTemperature } from '../../../db'
+import infoLabels from '../../../i18n/en/symptom-info'
 import { scaleObservable } from '../../../local-storage'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
-import config from '../../../config'
-import AppTextInput from '../../app-text-input'
+import styles, { iconStyles } from '../../../styles'
+import { temperature as labels } from '../../../i18n/en/cycle-day'
+
 import AppText from '../../app-text'
+import AppTextInput from '../../app-text-input'
+import padWithZeros from '../../helpers/pad-time-with-zeros'
+
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
@@ -55,6 +60,14 @@ export default class Temp extends SymptomView {
 
   symptomName = 'temperature'
 
+  showInfoBox(){
+    const symptomName = 'temperature'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
+
   async onBackButtonPress() {
     if (typeof this.state.temperature != 'string' || this.state.temperature === '') {
       this.deleteSymptomEntry()
@@ -134,10 +147,21 @@ export default class Temp extends SymptomView {
     }
     return (
       <ScrollView style={styles.page}>
+        <View style={{ flexDirection: 'row' }}>
           <SymptomSection
             header={labels.temperature.header}
             explainer={labels.temperature.explainer}
           >
+            <View style={{ flex: 1 }}></View>
+            <TouchableOpacity
+              onPress={this.showInfoBox}
+              style={styles.infoButton}
+            >
+              <FeatherIcon
+                name="info"
+                style={iconStyles.symptomInfo}
+              />
+            </TouchableOpacity>
             <View style={styles.framedSegmentInlineChildren}>
               <AppTextInput
                 style={[inputStyle]}
@@ -151,6 +175,7 @@ export default class Temp extends SymptomView {
               <AppText style={{ marginLeft: 5 }}>°C</AppText>
             </View>
           </SymptomSection>
+        </View>
         <SymptomSection
           header={labels.time}
         >