Add explainer to temperature

components/cycle-day/labels/labels.js

@@ -73,7 +73,14 @@ export const fertilityStatus = {
 export const temperature = {
   outOfRangeWarning: 'This temperature value is out of the current range for the temperature chart. You can change the range in the settings.',
   outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.',
-  saveAnyway: 'Save anyway'
+  saveAnyway: 'Save anyway',
+  temperature: {
+    explainer: 'Take your temperature right after waking up, before getting out of bed'
+  },
+  note: {
+    explainer: 'Is there anything that could have influenced this value, such as bad sleep or alcohol consumption?'
+  },
+  excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
 }
 
 export const noteExplainer = "Anything you want to add for the day?"

components/cycle-day/symptoms/bleeding.js

@@ -49,7 +49,7 @@ export default class Bleeding extends Component {
           <SymptomSection
             header="Exclude"
             explainer="You can exclude this value if it's not menstrual bleeding"
-            inlineExplainer={true}
+            inline={true}
           >
             <Switch
               onValueChange={(val) => {

components/cycle-day/symptoms/cervix.js

@@ -81,7 +81,7 @@ export default class Cervix extends Component {
           <SymptomSection
             header="Exclude"
             explainer="You can exclude this value if you don't want to use it for fertility detection"
-            inlineExplainer={true}
+            inline={true}
           >
             <Switch
               onValueChange={(val) => {

components/cycle-day/symptoms/mucus.js

@@ -70,7 +70,7 @@ export default class Mucus extends Component {
           <SymptomSection
             header="Exclude"
             explainer={labels.excludeExplainer}
-            inlineExplainer={true}
+            inline={true}
           >
             <Switch
               onValueChange={(val) => {

components/cycle-day/symptoms/symptom-section.js

@@ -4,14 +4,25 @@ import { SymptomSectionHeader, AppText } from '../../app-text'
 
 export default class SymptomSection extends Component {
   render() {
+    const p = this.props
+    let placeHeadingInline
+    if (!p.explainer && p.inline) {
+      placeHeadingInline = {
+        flexDirection: 'row',
+        alignItems: "center"
+      }
+    }
     return (
-      <View>
-        <SymptomSectionHeader>{this.props.header}</SymptomSectionHeader>
-        <View flexDirection={this.props.inlineExplainer ? 'row' : 'column'}>
+      <View style={placeHeadingInline}>
+        <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+        <View
+          flexDirection={p.inline ? 'row' : 'column'}
+          flex={1}
+        >
           <View flex={1}>
-            <AppText>{this.props.explainer}</AppText>
+            <AppText>{p.explainer}</AppText>
           </View>
-          {this.props.children}
+          {p.children}
         </View>
       </View>
     )

components/cycle-day/symptoms/temperature.js

@@ -12,12 +12,13 @@ import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 import { getPreviousTemperature, saveSymptom } from '../../../db'
 import styles from '../../../styles'
 import { LocalTime, ChronoUnit } from 'js-joda'
-import { temperature as tempLabels } from '../labels/labels'
+import { temperature as labels } from '../labels/labels'
 import { scaleObservable } from '../../../local-storage'
 import { shared } from '../../labels'
 import ActionButtonFooter from './action-button-footer'
 import config from '../../../config'
 import { SymptomSectionHeader } from '../../app-text'
+import SymptomSection from './symptom-section'
 
 const minutes = ChronoUnit.MINUTES
 
@@ -72,9 +73,9 @@ export default class Temp extends Component {
     const scale = scaleObservable.value
     let warningMsg
     if (value < absolute.min || value > absolute.max) {
-      warningMsg = tempLabels.outOfAbsoluteRangeWarning
+      warningMsg = labels.outOfAbsoluteRangeWarning
     } else if (value < scale.min || value > scale.max) {
-      warningMsg = tempLabels.outOfRangeWarning
+      warningMsg = labels.outOfRangeWarning
     }
 
     if (warningMsg) {
@@ -98,16 +99,21 @@ export default class Temp extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <View>
-            <View style={styles.symptomViewRowInline}>
-              <SymptomSectionHeader>Temperature (°C)</SymptomSectionHeader>
+            <SymptomSection
+              header="Temperature (°C)"
+              explainer={labels.temperature.explainer}
+              inline={true}
+            >
               <TempInput
                 value={this.state.temperature}
                 setState={(val) => this.setState(val)}
                 isSuggestion={this.state.isSuggestion}
               />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <SymptomSectionHeader>Time</SymptomSectionHeader>
+            </SymptomSection>
+            <SymptomSection
+              header="Time"
+              inline={true}
+            >
               <TextInput
                 style={styles.temperatureTextInput}
                 onFocus={() => {
@@ -116,40 +122,44 @@ export default class Temp extends Component {
                 }}
                 value={this.state.time}
               />
-            </View>
-            <DateTimePicker
-              mode="time"
-              isVisible={this.state.isTimePickerVisible}
-              onConfirm={jsDate => {
-                this.setState({
-                  time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
-                  isTimePickerVisible: false
-                })
-              }}
-              onCancel={() => this.setState({ isTimePickerVisible: false })}
-            />
-            <SymptomSectionHeader>Note</SymptomSectionHeader>
-            <View>
+              <DateTimePicker
+                mode="time"
+                isVisible={this.state.isTimePickerVisible}
+                onConfirm={jsDate => {
+                  this.setState({
+                    time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+                    isTimePickerVisible: false
+                  })
+                }}
+                onCancel={() => this.setState({ isTimePickerVisible: false })}
+              />
+            </SymptomSection>
+            <SymptomSection
+              header="Note"
+              explainer={labels.note.explainer}
+            >
               <TextInput
-                style={styles.temperatureTextInput}
                 multiline={true}
                 autoFocus={this.state.focusTextArea}
-                placeholder="enter"
+                placeholder="Enter"
                 value={this.state.note}
                 onChangeText={(val) => {
                   this.setState({ note: val })
                 }}
               />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <SymptomSectionHeader>Exlude</SymptomSectionHeader>
+            </SymptomSection>
+            <SymptomSection
+              header="Exclude"
+              explainer={labels.excludeExplainer}
+              inline={true}
+            >
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })
                 }}
                 value={this.state.exclude}
               />
-            </View>
+            </SymptomSection>
           </View>
         </ScrollView>
         <ActionButtonFooter