Changes for style-rest

components/DateHeader.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import { Text } from 'react-native'
+import { purple } from '../utils/colors'
 
 export default function DateHeader ({ date }) {
   return (
-    <Text>
+    <Text style={{color: purple, fontSize: 25}}>
       {date}
     </Text>
   )

components/TextButton.js

@@ -1,10 +1,18 @@
 import React from 'react'
-import { Text, TouchableOpacity } from 'react-native'
+import { Text, TouchableOpacity, StyleSheet } from 'react-native'
+import { purple } from '../utils/colors'
 
-export default function TextButton ({ children, onPress }) {
+export default function TextButton ({ children, onPress, style = {} }) {
   return (
     <TouchableOpacity onPress={onPress}>
-      <Text>{children}</Text>
+      <Text style={[styles.reset, style]}>{children}</Text>
     </TouchableOpacity>
   )
-}
+}
+
+const styles = StyleSheet.create({
+  reset: {
+    textAlign: 'center',
+    color: purple,
+  }
+})

components/UdaciSlider.js

@@ -1,20 +1,35 @@
 import React from 'react'
 import { View, Slider, StyleSheet, Text } from 'react-native'
+import { gray } from '../utils/colors'
 
 export default function UdaciSlider ({ max, unit, step, value, onChange }) {
   return (
-    <View>
+    <View style={styles.row}>
       <Slider
+        style={{flex: 1}}
         step={step}
         value={value}
         maximumValue={max}
         minimumValue={0}
         onValueChange={onChange}
       />
-      <View>
-        <Text>{value}</Text>
-        <Text>{unit}</Text>
+      <View style={styles.metricCounter}>
+        <Text style={{fontSize: 24, textAlign: 'center'}}>{value}</Text>
+        <Text style={{fontSize: 18, color: gray}}>{unit}</Text>
       </View>
     </View>
   )
-}
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flex: 1,
+    alignItems: 'center',
+  },
+  metricCounter: {
+    width: 85,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+})