Add explainer to note

components/cycle-day/labels/labels.js

@@ -70,3 +70,5 @@ export const temperature = {
   outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.',
   saveAnyway: 'Save anyway'
 }
+
+export const noteExplainer = "Anything you want to add for the day?"

components/cycle-day/symptoms/mucus.js

@@ -10,7 +10,7 @@ import { mucus as labels } from '../labels/labels'
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
-import SymptomSection from './symptom-section';
+import SymptomSection from './symptom-section'
 
 
 export default class Mucus extends Component {
@@ -84,10 +84,12 @@ export default class Mucus extends Component {
           symptom='mucus'
           cycleDay={this.cycleDay}
           saveAction={() => {
+            const feeling = this.state.feeling
+            const texture = this.state.texture
             saveSymptom('mucus', this.cycleDay, {
-              feeling: this.state.feeling,
-              texture: this.state.texture,
-              value: computeSensiplanValue(this.state.feeling, this.state.texture),
+              feeling,
+              texture,
+              value: computeSensiplanValue(feeling, texture),
               exclude: this.state.exclude
             })
           }}

components/cycle-day/symptoms/note.js

@@ -8,6 +8,8 @@ import {
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import ActionButtonFooter from './action-button-footer'
+import SymptomSection from './symptom-section'
+import { noteExplainer } from '../labels/labels'
 
 export default class Note extends Component {
   constructor(props) {
@@ -25,7 +27,9 @@ export default class Note extends Component {
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
-          <View style={styles.symptomViewRow}>
+          <SymptomSection
+            explainer={noteExplainer}
+          >
             <TextInput
               autoFocus={!this.state.currentValue}
               multiline={true}
@@ -35,7 +39,7 @@ export default class Note extends Component {
               }}
               value={this.state.currentValue}
             />
-          </View>
+          </SymptomSection>
         </ScrollView>
         <ActionButtonFooter
           symptom='note'