Add more to temp reminder component

components/settings.js

@@ -33,15 +33,7 @@ export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
-        <TouchableOpacity
-          style={styles.settingsSegment}
-          onPress={() => this.setState({ isTimePickerVisible: true })}
-        >
-          <Text style={styles.settingsSegmentTitle}>
-            {settingsLabels.tempReminder.title}
-          </Text>
         <TempReminderPicker/>
-        </TouchableOpacity>
         <View style={styles.settingsSegment}>
           <Text style={styles.settingsSegmentTitle}>
             {settingsLabels.tempScale.segmentTitle}
@@ -88,6 +80,13 @@ class TempReminderPicker extends Component {
 
   render() {
     return (
+      <TouchableOpacity
+        style={styles.settingsSegment}
+        onPress={() => this.setState({ isTimePickerVisible: true })}
+      >
+        <Text style={styles.settingsSegmentTitle}>
+          {settingsLabels.tempReminder.title}
+        </Text>
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
           <View style={{ flex: 1 }}>
             {this.state.time && this.state.enabled ?
@@ -112,7 +111,8 @@ class TempReminderPicker extends Component {
               const time = padWithZeros(`${jsDate.getHours()}:${jsDate.getMinutes()}`)
               this.setState({
                 time,
-              isTimePickerVisible: false
+                isTimePickerVisible: false,
+                enabled: true
               })
               saveTempReminder({
                 time,
@@ -125,6 +125,7 @@ class TempReminderPicker extends Component {
             }}
           />
         </View>
+      </TouchableOpacity>
     )
   }
 }