Merge branch '177-change-action-button-footer-to-only-save-button' into 'master'

reduces footer actions

Closes #177

See merge request bloodyhealth/drip!83

components/app.js

@@ -66,9 +66,17 @@ export default class App extends Component {
     }[this.state.currentPage]
     return (
       <View style={{flex: 1}}>
+        {this.state.currentPage != 'CycleDay' && !isSymptomView(this.state.currentPage) &&
+          <Header
+            title={headerTitlesLowerCase[this.state.currentPage]}
+          />}
+        {isSymptomView(this.state.currentPage) &&
+          <Header
+            title={headerTitlesLowerCase[this.state.currentPage]}
+            isSymptomView={true}
+            goBack={this.handleBackButtonPress}
+          />}
 
-        {this.state.currentPage != 'CycleDay' &&
-          <Header title={headerTitlesLowerCase[this.state.currentPage]}/>}
 
         {React.createElement(page, {
           navigate: this.navigate,

components/cycle-day/labels/labels.js

@@ -86,3 +86,12 @@ export const temperature = {
 }
 
 export const noteExplainer = "Anything you want to add for the day?"
+
+export const sharedDialogs = {
+  cancel: 'Cancel',
+  areYouSureTitle: 'Are you sure?',
+  areYouSureToUnset: 'Are you sure you want to unset all entered data?',
+  reallyUnsetData: 'Yes, I am sure',
+  save: 'Save',
+  unset: 'Unset'
+}

components/cycle-day/symptoms/action-button-footer.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react'
 import {
-  View, TouchableOpacity, Text
+  View, TouchableOpacity, Text, Alert
 } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { saveSymptom } from '../../../db'
 import styles, {iconStyles} from '../../../styles'
+import {sharedDialogs as labels} from '../labels/labels'
 
 export default class ActionButtonFooter extends Component {
   render() {
@@ -19,20 +20,27 @@ export default class ActionButtonFooter extends Component {
     const navigateToOverView = () => navigate('CycleDay', {cycleDay})
     const buttons = [
       {
-        title: 'Cancel',
+        title: labels.unset,
-        action: () => navigateToOverView(),
-        icon: 'cancel'
-      },
-      {
-        title: 'Delete',
         action: () => {
-          saveSymptom(symptom, cycleDay)
+          Alert.alert(
-          navigateToOverView()
+            labels.areYouSureTitle,
+            labels.areYouSureToUnset,
+            [{
+              text: labels.cancel,
+              style: 'cancel'
+            }, {
+              text: labels.reallyUnsetData,
+              onPress: () => {
+                saveSymptom(symptom, cycleDay)
+                navigateToOverView()
+              }
+            }]
+          )
         },
         disabledCondition: !cycleDay[symptom],
         icon: 'delete-outline'
       }, {
-        title: 'Save',
+        title: labels.save,
         action: () => {
           saveAction()
           if (autoShowDayView) navigateToOverView()

components/header.js

@@ -5,9 +5,11 @@ import {
   Dimensions
 } from 'react-native'
 import styles, { iconStyles } from '../styles'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import Icon from 'react-native-vector-icons/Entypo'
+import FeatherIcon from 'react-native-vector-icons/Feather'
 import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
 
+
 export default class Header extends Component {
   render() {
     const middle = Dimensions.get('window').width / 2
@@ -16,7 +18,7 @@ export default class Header extends Component {
         <View style={[styles.header, styles.headerCycleDay]}>
           <View style={styles.accentCircle} left={middle - styles.accentCircle.width / 2}/>
           <Icon
-            name='arrow-left-drop-circle'
+            name='chevron-thin-left'
             {...iconStyles.navigationArrow}
             onPress={() => this.props.goToCycleDay('before')}
           />
@@ -30,18 +32,37 @@ export default class Header extends Component {
               </Text>}
           </View >
           <Icon
-            name='arrow-right-drop-circle'
+            name='chevron-thin-right'
             {...iconStyles.navigationArrow}
             onPress={() => this.props.goToCycleDay('after')}
           />
         </View >
-        :
+        : this.props.isSymptomView ?
-        <View style={styles.header}>
+          <View style={[styles.header, styles.headerSymptom]}>
-          <View style={styles.accentCircle} />
+            <View style={styles.accentCircle} left={middle - styles.accentCircle.width / 2}/>
-          <Text style={styles.headerText}>
+            <Icon
-            {this.props.title}
+              name='chevron-thin-left'
-          </Text>
+              {...iconStyles.navigationArrow}
-        </View >
+              onPress={() => this.props.goBack()}
+
+            />
+            <View>
+              <Text style={styles.dateHeader}>
+                {this.props.title}
+              </Text>
+            </View >
+            <FeatherIcon
+              name='info'
+              {...iconStyles.symptomHeaderIcons}
+            />
+          </View>
+          :
+          <View style={styles.header}>
+            <View style={styles.accentCircle} />
+            <Text style={styles.headerText}>
+              {this.props.title}
+            </Text>
+          </View >
     )
   }
 }

styles/index.js

@@ -19,6 +19,7 @@ const regularSize = 16
 const defaultBottomMargin = 5
 const defaultIndentation = 10
 const defaultTopMargin = 10
+const colorInActive = '#666666'
 
 export default StyleSheet.create({
   appText: {
@@ -153,12 +154,16 @@ export default StyleSheet.create({
     fontFamily: fontLight
   },
   menuTextInActive: {
-    color: 'lightgrey'
+    color: colorInActive
   },
   headerCycleDay: {
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  headerSymptom: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
   navigationArrow: {
     fontSize: 60,
     color: fontOnPrimaryColor
@@ -317,7 +322,11 @@ export default StyleSheet.create({
 
 export const iconStyles = {
   navigationArrow: {
-    size: 45,
+    size: 20,
+    color: fontOnPrimaryColor
+  },
+  symptomHeaderIcons: {
+    size: 20,
     color: fontOnPrimaryColor
   },
   symptomBox: {
@@ -331,6 +340,6 @@ export const iconStyles = {
     color: fontOnPrimaryColor
   },
   menuIconInactive: {
-    color: 'lightgrey',
+    color: colorInActive,
   },
 }