Refactor npf settings component

components/settings/nfp-settings/index.js

@@ -6,6 +6,7 @@ import Hyperlink from 'react-native-hyperlink'
 import styles, { iconStyles } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import AppText from '../../app-text'
+import SettingsSegment from '../settings-segment'
 import TempSlider from './temp-slider'
 import UseCervixSetting from './use-cervix'
 import Icon from 'react-native-vector-icons/Entypo'
@@ -20,15 +21,14 @@ export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
-        <UseCervixSetting/>
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>
-            {labels.tempScale.segmentTitle}
-          </AppText>
+        <SettingsSegment title={labels.useCervix.title}>
+          <UseCervixSetting/>
+        </SettingsSegment>
+        <SettingsSegment title={labels.tempScale.segmentTitle}>
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
-        </View>
-        <View style={[styles.settingsSegment, styles.settingsSegmentLast]}>
+        </SettingsSegment>
+        <SettingsSegment style={styles.settingsSegmentLast} >
           <View style={{flexDirection: 'row', alignItems: 'center'}}>
             <Icon name="info-with-circle" style={iconStyles.infoInHeading}/>
             <AppText style={styles.settingsSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
@@ -36,8 +36,8 @@ export default class Settings extends Component {
           <Hyperlink linkStyle={styles.link} linkText={replaceUrlWithText}>
             <AppText>{labels.preOvu.note}</AppText>
           </Hyperlink>
-        </View>
+        </SettingsSegment>
       </ScrollView>
     )
   }
-}
+}