solves the action footer, but messes up the header

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() {
@@ -17,33 +18,29 @@ export default class ActionButtonFooter extends Component {
       autoShowDayView = true}
       = this.props
     const navigateToOverView = () => navigate('CycleDay', {cycleDay})
-    const buttonsNewEntry = [
+    const buttons = [
       {
-        title: 'Cancel',
-        action: () => navigateToOverView(),
-        icon: 'cancel'
-      },
-      {
-        title: 'Add',
+        title: labels.unset,
         action: () => {
-          saveAction()
-          if (autoShowDayView) navigateToOverView()
-        },
-        disabledCondition: saveDisabled,
-        icon: 'content-save-outline'
-      }
-    ]
-    const buttonsEdit = [
-      {
-        title: 'Delete',
-        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()
@@ -52,7 +49,6 @@ export default class ActionButtonFooter extends Component {
         icon: 'content-save-outline'
       }
     ]
-    const buttons = !cycleDay[symptom] ? buttonsNewEntry : buttonsEdit
 
     return (
       <View style={styles.menu}>

components/cycle-day/symptoms/bleeding.js

@@ -10,6 +10,7 @@ import { bleeding as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
+import Header from '../../header'
 
 export default class Bleeding extends Component {
   constructor(props) {
@@ -31,6 +32,15 @@ export default class Bleeding extends Component {
     ]
     return (
       <View style={{ flex: 1 }}>
+        <Header
+          title={'Bleeding'}
+          isSymptomView={true}
+          goBack={() => this.props.navigate('CycleDay', this.props.cycleDay)}
+          cycleDayNumber={this.props.cycleDayNumber}
+          date={this.props.cycleDay.date}
+          infoTitle={'Info here'}
+          infoText={'bla bla'}
+        />
         <ScrollView style={styles.page}>
           <SymptomSection
             header="Heaviness"
@@ -40,7 +50,6 @@ export default class Bleeding extends Component {
               buttons={bleedingRadioProps}
               active={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}
-              isRadioButton={true}
             />
           </SymptomSection>
           <SymptomSection

components/cycle-day/symptoms/cervix.js

@@ -50,7 +50,6 @@ export default class Cervix extends Component {
               buttons={cervixOpeningRadioProps}
               active={this.state.opening}
               onSelect={val => this.setState({ opening: val })}
-              isRadioButton={true}
             />
           </SymptomSection>
           <SymptomSection
@@ -61,7 +60,6 @@ export default class Cervix extends Component {
               buttons={cervixFirmnessRadioProps}
               active={this.state.firmness}
               onSelect={val => this.setState({ firmness: val })}
-              isRadioButton={true}
             />
           </SymptomSection>
           <SymptomSection
@@ -72,7 +70,6 @@ export default class Cervix extends Component {
               buttons={cervixPositionRadioProps}
               active={this.state.position}
               onSelect={val => this.setState({ position: val })}
-              isRadioButton={false}
             />
           </SymptomSection>
           <SymptomSection

components/cycle-day/symptoms/desire.js

@@ -36,7 +36,6 @@ export default class Desire extends Component {
               buttons={desireRadioProps}
               active={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}
-              isRadioButton={true}
             />
           </SymptomSection>
         </ScrollView>