From 75f5893b0cbd0b47944ae3cfe0b7e6eaefbcf86e Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 21 Aug 2018 14:47:45 +0200
Subject: [PATCH] Use settings segments

---
 components/labels.js   |  7 +++++--
 components/settings.js | 35 ++++++++++++++++++++---------------
 styles/index.js        | 11 ++++++++++-
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/components/labels.js b/components/labels.js
index bd294b6..2d2d045 100644
--- a/components/labels.js
+++ b/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'
   }
diff --git a/components/settings.js b/components/settings.js
index 0f8f76a..4278838 100644
--- a/components/settings.js
+++ b/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>
     )
diff --git a/styles/index.js b/styles/index.js
index 7d5af98..c0995ed 100644
--- a/styles/index.js
+++ b/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
   }
 })
\ No newline at end of file