From e87f439ff28b4aaadfeb4bff6104f3fd6fa5e613 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 8 Jan 2019 09:00:10 +0100
Subject: [PATCH] Update about.js with settingsSegment and give it last prop

---
 components/settings/about.js                 | 29 +++++++-------------
 components/settings/data-management/index.js |  2 +-
 components/settings/settings-segment.js      |  4 ++-
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/components/settings/about.js b/components/settings/about.js
index 0732edc..6ee5451 100644
--- a/components/settings/about.js
+++ b/components/settings/about.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, ScrollView } from 'react-native'
+import { ScrollView } from 'react-native'
 import Hyperlink from 'react-native-hyperlink'
 import AppText from '../app-text'
 import SettingsSegment from './settings-segment'
@@ -11,34 +11,25 @@ export default class AboutSection extends Component {
   render() {
     return (
       <ScrollView>
-        <SettingsSegment title={`${labels.aboutSection.title} `}>
+        <SettingsSegment title={labels.aboutSection.title}>
           <Hyperlink linkStyle={styles.link} linkText={replace}>
-            <AppText>{`${labels.aboutSection.segmentExplainer} `}</AppText>
+            <AppText>{`${labels.aboutSection.text} `}</AppText>
           </Hyperlink>
         </SettingsSegment>
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>{`${labels.philosophy.title} `}</AppText>
+        <SettingsSegment title={labels.philosophy.title}>
           <AppText>{labels.philosophy.text}</AppText>
-        </View>
-        <View style={styles.settingsSegment}>
-          <Hyperlink linkStyle={styles.link} linkText={replace}>
-            <AppText style={styles.settingsSegmentTitle}>{`${labels.aboutSection.title} `}</AppText>
-            <AppText>{labels.aboutSection.text}</AppText>
-          </Hyperlink>
-        </View>
-        <SettingsSegment title={`${labels.credits.title} `} style={styles.settingsSegmentLast}>
+        </SettingsSegment>
+        <SettingsSegment title={labels.credits.title}>
           <AppText>{`${labels.credits.note}`}</AppText>
         </SettingsSegment>
-        <View style={[styles.settingsSegment, styles.settingsSegmentLast]}>
+        <SettingsSegment title={labels.website.title}>
           <Hyperlink linkStyle={styles.link}>
-            <AppText style={styles.settingsSegmentTitle}>{`${labels.website.title} `}</AppText>
             <AppText>{links.website.url}</AppText>
           </Hyperlink>
-        </View>
-        <View style={[styles.settingsSegment, styles.settingsSegmentLast]}>
-          <AppText style={styles.settingsSegmentTitle}>{`${labels.version.title} `}</AppText>
+        </SettingsSegment>
+        <SettingsSegment title={labels.version.title} last={true}>
           <AppText>{require('../../package.json').version}</AppText>
-        </View>
+        </SettingsSegment>
       </ScrollView>
     )
   }
diff --git a/components/settings/data-management/index.js b/components/settings/data-management/index.js
index 4199760..04d4628 100644
--- a/components/settings/data-management/index.js
+++ b/components/settings/data-management/index.js
@@ -26,7 +26,7 @@ const DataManagement = () => {
       </SettingsSegment>
       <SettingsSegment
         title={labels.deleteSegment.title}
-        style={styles.settingsSegmentLast}
+        last={true}
       >
         <AppText>{labels.deleteSegment.explainer}</AppText>
         <DeleteData />
diff --git a/components/settings/settings-segment.js b/components/settings/settings-segment.js
index 0a87719..f29f7c5 100644
--- a/components/settings/settings-segment.js
+++ b/components/settings/settings-segment.js
@@ -6,8 +6,10 @@ import AppText from '../app-text'
 import styles from '../../styles'
 
 const SettingsSegment = ({ children, ...props }) => {
+  const style = [styles.settingsSegment, props.style]
+  if (props.last) style.push(styles.settingsSegmentLast)
   return (
-    <View style={[styles.settingsSegment, props.style]}>
+    <View style={style}>
       <AppText style={styles.settingsSegmentTitle}>{props.title}</AppText>
       {children}
     </View>