Implements SettingsSegment Boxes for info symptom texts

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

@@ -1,11 +1,8 @@
 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 SettingsSegment from '../../settings/shared/settings-segment'
 
 export default class InfoSymptom extends Component {
   render() {
@@ -21,22 +18,12 @@ 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>
+        <SettingsSegment title={labels.symptomTitle[currentSymptom]}>
+          <AppText>{labels.symptomInfo[currentSymptom]}</AppText>
+        </SettingsSegment>
       </ScrollView>
     )
   }