diff --git a/components/app.js b/components/app.js index 7cd7d05..aea1c6f 100644 --- a/components/app.js +++ b/components/app.js @@ -66,9 +66,17 @@ export default class App extends Component { }[this.state.currentPage] return ( + {this.state.currentPage != 'CycleDay' && !isSymptomView(this.state.currentPage) && +
} + {isSymptomView(this.state.currentPage) && +
} - {this.state.currentPage != 'CycleDay' && -
} {React.createElement(page, { navigate: this.navigate, diff --git a/components/cycle-day/labels/labels.js b/components/cycle-day/labels/labels.js index b70d6d9..aeff7bc 100644 --- a/components/cycle-day/labels/labels.js +++ b/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' +} diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js index 35360ba..15f22eb 100644 --- a/components/cycle-day/symptoms/action-button-footer.js +++ b/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', - action: () => navigateToOverView(), - icon: 'cancel' - }, - { - title: 'Delete', + title: labels.unset, action: () => { - saveSymptom(symptom, cycleDay) - navigateToOverView() + Alert.alert( + 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() diff --git a/components/header.js b/components/header.js index b99ed15..ad96ba3 100644 --- a/components/header.js +++ b/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 { this.props.goToCycleDay('before')} /> @@ -30,18 +32,37 @@ export default class Header extends Component { } this.props.goToCycleDay('after')} /> - : - - - - {this.props.title} - - + : this.props.isSymptomView ? + + + this.props.goBack()} + + /> + + + {this.props.title} + + + + + : + + + + {this.props.title} + + ) } } \ No newline at end of file diff --git a/styles/index.js b/styles/index.js index c2b18b5..3d19cf3 100644 --- a/styles/index.js +++ b/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, }, } \ No newline at end of file