refactor about section

components/settings/about.js

@@ -1,20 +1,20 @@
 import React, { Component } from 'react'
-import { View, ScrollView } from 'react-native'
+import { ScrollView } from 'react-native'
 import AppText from '../app-text'
+import SettingsSegment from './settings-segment'
 import styles from '../../styles/index'
 import labels from '../../i18n/en/settings'
+
 export default class AboutSection extends Component {
   render() {
     return (
       <ScrollView>
-        <View style={styles.settingsSegment}>
+        <SettingsSegment title={`${labels.aboutSection.title} `}>
-          <AppText style={styles.settingsSegmentTitle}>{`${labels.aboutSection.title} `}</AppText>
           <AppText>{`${labels.aboutSection.segmentExplainer} `}</AppText>
-        </View>
+        </SettingsSegment>
-        <View style={[styles.settingsSegment, styles.settingsSegmentLast]}>
+        <SettingsSegment title={`${labels.credits.title} `} style={styles.settingsSegmentLast}>
-          <AppText style={styles.settingsSegmentTitle}>{`${labels.credits.title} `}</AppText>
           <AppText>{`${labels.credits.note}`}</AppText>
-        </View>
+        </SettingsSegment>
       </ScrollView>
     )
   }

components/settings/settings-segment.js

@@ -7,7 +7,7 @@ import styles from '../../styles'
 
 const SettingsSegment = ({ children, ...props }) => {
   return (
-    <View style={styles.settingsSegment}>
+    <View style={[styles.settingsSegment, props.style]}>
       <AppText style={styles.settingsSegmentTitle}>{props.title}</AppText>
       {children}
     </View>