Use settings segments

components/labels.js

@@ -13,6 +13,7 @@ export const settings = {
     title: 'My Drip data export',
     subject: 'My Drip data export',
     button: 'Export data',
+    segmentExplainer: 'Export data in CSV format for backup or so you can use it elsewhere'
   },
   import: {
     button: 'Import data',
@@ -28,10 +29,12 @@ export const settings = {
     },
     success: {
       message: 'Data successfully imported'
-    }
+    },
+    segmentExplainer: 'Import data in CSV format'
   },
   tempScale: {
-    segmentTitle: 'Change temperature scale',
+    segmentTitle: 'Temperature scale',
+    segmentExplainer: 'Change the minimum and maximum value for entered temperatures',
     min: 'Min',
     max: 'Max'
   }

components/settings.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {
   View,
-  Button,
+  TouchableOpacity,
   ScrollView,
   Alert,
   Text
@@ -22,22 +22,27 @@ export default class Settings extends Component {
     return (
       <ScrollView>
         <View style={styles.settingsSegment}>
-          <Text>{labels.tempScale.segmentTitle}</Text>
+          <Text style={styles.settingsSegmentTitle}>{labels.tempScale.segmentTitle}</Text>
+          <Text>{labels.tempScale.segmentExplainer}</Text>
           <TempSlider/>
         </View>
-        <View style={styles.homeButtons}>
-          <View style={styles.homeButton}>
-            <Button
-              onPress={ openShareDialogAndExport }
-              title={labels.export.button}>
-            </Button>
-          </View>
-          <View style={styles.homeButton}>
-            <Button
-              title={labels.import.button}
-              onPress={ openImportDialogAndImport }>
-            </Button>
-          </View>
+        <View style={styles.settingsSegment}>
+          <Text style={styles.settingsSegmentTitle}>{labels.export.button}</Text>
+          <Text>{labels.export.segmentExplainer}</Text>
+          <TouchableOpacity
+            onPress={openShareDialogAndExport}
+            style={styles.settingsButton}>
+            <Text>{labels.export.button}</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.settingsSegment}>
+          <Text style={styles.settingsSegmentTitle}>{labels.import.button}</Text>
+          <Text>{labels.import.segmentExplainer}</Text>
+          <TouchableOpacity
+            onPress={openImportDialogAndImport}
+            style={styles.settingsButton}>
+            <Text>{labels.import.button}</Text>
+          </TouchableOpacity>
         </View>
       </ScrollView>
     )

styles/index.js

@@ -92,6 +92,15 @@ export default StyleSheet.create({
   settingsSegment: {
     backgroundColor: 'lightgrey',
     padding: 10,
-    marginTop: 10
+    marginTop: 10,
+  },
+  settingsSegmentTitle: {
+    fontWeight: 'bold'
+  },
+  settingsButton: {
+    backgroundColor: 'darkgrey',
+    padding: 10,
+    alignItems: 'center',
+    margin: 10
   }
 })