Merge branch 'master' into link-nfp-rules

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

@@ -1,11 +1,9 @@
 import React, { Component } from 'react'
-import {
-  View,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import { ScrollView } from 'react-native'
 import AppText from '../../app-text'
-import * as labels from '../../../i18n/en/symptom-info.js'
+import labels from '../../../i18n/en/symptom-info.js'
+import FramedSegment from '../../framed-segment'
+import styles from '../../../styles/index'
 
 export default class InfoSymptom extends Component {
   render() {
@@ -14,6 +12,7 @@ export default class InfoSymptom extends Component {
       BleedingEditView: 'bleeding',
       CervixEditView: 'cervix',
       DesireEditView: 'desire',
+      MoodEditView: 'mood',
       MucusEditView: 'mucus',
       NoteEditView: 'note',
       PainEditView: 'pain',
@@ -21,22 +20,15 @@ export default class InfoSymptom extends Component {
       TemperatureEditView: 'temperature'
     }
     const currentSymptom = symptomMapping[symptomView]
-    const currentSymptomText = labels.symptomInfo[currentSymptom]
-    const currentSymptomTitle = labels.symptomTitle[currentSymptom]
+
     return (
       <ScrollView>
-        <View style={[styles.textWrappingView]}>
-          <AppText style={styles.title}>
-            {currentSymptomTitle}
-          </AppText>
-          <AppText style={styles.paragraph}>
-            {currentSymptomText}
-            {labels.symptomTitle.currentSymptomTitle}
-          </AppText>
-          <AppText style={styles.paragraph}>
-            {labels.symptomInfo.currentSymptomText}
-          </AppText>
-        </View>
+        <FramedSegment
+          style={styles.framedSegmentLast}
+          title={labels[currentSymptom].title}
+        >
+          <AppText>{labels[currentSymptom].text}</AppText>
+        </FramedSegment>
       </ScrollView>
     )
   }