[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,15 +65,25 @@ export default class Mood extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
+        <View style={{ flexDirection: 'row' }}>
-          explainer={labels.explainer}
+          <SymptomSection
-        >
+            explainer={labels.explainer}
-          <SelectBoxGroup
+          >
-            labels={labels.categories}
+            <TouchableOpacity
-            onSelect={this.toggleState}
+              onPress={this.showInfoBox}
-            optionsState={this.state}
+              style={styles.infoButton}
-          />
+            >
-          { this.state.other &&
+              <FeatherIcon
+                name="info"
+                style={iconStyles.symptomInfo}
+              />
+            </TouchableOpacity>
+            <SelectBoxGroup
+              labels={labels.categories}
+              onSelect={this.toggleState}
+              optionsState={this.state}
+            />
+            { this.state.other &&
               <TextInput
                 autoFocus={this.state.focusTextArea}
                 multiline={true}
@@ -66,8 +93,9 @@ export default class Mood extends SymptomView {
                   this.setState({note: val})
                 }}
               />
-          }
+            }
-        </SymptomSection>
+          </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,15 +67,25 @@ export default class Pain extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
+        <View style={{ flexDirection: 'row' }}>
-          explainer={labels.explainer}
+          <SymptomSection
-        >
+            explainer={labels.explainer}
-          <SelectBoxGroup
+          >
-            labels={labels.categories}
+            <TouchableOpacity
-            onSelect={this.toggleState}
+              onPress={this.showInfoBox}
-            optionsState={this.state}
+              style={styles.infoButton}
-          />
+            >
-          { this.state.other &&
+              <FeatherIcon
+                name="info"
+                style={iconStyles.symptomInfo}
+              />
+            </TouchableOpacity>
+            <SelectBoxGroup
+              labels={labels.categories}
+              onSelect={this.toggleState}
+              optionsState={this.state}
+            />
+            { this.state.other &&
               <TextInput
                 autoFocus={this.state.focusTextArea}
                 multiline={true}
@@ -69,8 +95,9 @@ export default class Pain extends SymptomView {
                   this.setState({note: val})
                 }}
               />
-          }
+            }
-        </SymptomSection>
+          </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 FeatherIcon from 'react-native-vector-icons/Feather'
-
-import { getPreviousTemperature } from '../../../db'
-import styles from '../../../styles'
 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 styles, { iconStyles } from '../../../styles'
-import AppTextInput from '../../app-text-input'
+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,23 +147,35 @@ export default class Temp extends SymptomView {
     }
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
+        <View style={{ flexDirection: 'row' }}>
-          header={labels.temperature.header}
+          <SymptomSection
-          explainer={labels.temperature.explainer}
+            header={labels.temperature.header}
-        >
+            explainer={labels.temperature.explainer}
-          <View style={styles.framedSegmentInlineChildren}>
+          >
-            <AppTextInput
+            <View style={{ flex: 1 }}></View>
-              style={[inputStyle]}
+            <TouchableOpacity
-              autoFocus={true}
+              onPress={this.showInfoBox}
-              placeholder={this.state.temperature}
+              style={styles.infoButton}
-              value={this.state.temperature}
+            >
-              onChangeText={this.setTemperature}
+              <FeatherIcon
-              keyboardType='numeric'
+                name="info"
-              maxLength={5}
+                style={iconStyles.symptomInfo}
-            />
+              />
-            <AppText style={{ marginLeft: 5 }}>°C</AppText>
+            </TouchableOpacity>
-          </View>
+            <View style={styles.framedSegmentInlineChildren}>
-        </SymptomSection>
+              <AppTextInput
+                style={[inputStyle]}
+                autoFocus={true}
+                placeholder={this.state.temperature}
+                value={this.state.temperature}
+                onChangeText={this.setTemperature}
+                keyboardType='numeric'
+                maxLength={5}
+              />
+              <AppText style={{ marginLeft: 5 }}>°C</AppText>
+            </View>
+          </SymptomSection>
+        </View>
         <SymptomSection
           header={labels.time}
         >