From cef2e850d7388f62bf8d71c58a2d4a1ddc139326 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 21 May 2019 17:32:51 +0200
Subject: [PATCH] Don't render delete icon, instead of just setting it
 invisible

---
 components/header/navigation-arrow.js |  6 +++++-
 components/header/symptom-view.js     | 26 +++++++++++++-------------
 styles/index.js                       | 12 ++++++------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/components/header/navigation-arrow.js b/components/header/navigation-arrow.js
index 6a7b95b..b574142 100644
--- a/components/header/navigation-arrow.js
+++ b/components/header/navigation-arrow.js
@@ -8,6 +8,10 @@ export default function NavigationArrow(props) {
     left: 'chevron-thin-left',
     right: 'chevron-thin-right'
   }[props.direction]
+  const iconPosition = {
+    left: 'navigationArrowLeft',
+    right: 'navigationArrowRight'
+  }[props.direction]
   let pressHandler
   if (props.goBack) {
     pressHandler = () => props.goBack()
@@ -19,7 +23,7 @@ export default function NavigationArrow(props) {
   }
   return (
     <TouchableOpacity
-      style={styles.navigationArrow}
+      style={[styles.navigationArrow, styles[iconPosition]]}
       onPress={pressHandler}
     >
       <Icon
diff --git a/components/header/symptom-view.js b/components/header/symptom-view.js
index e760377..1d56a81 100644
--- a/components/header/symptom-view.js
+++ b/components/header/symptom-view.js
@@ -30,19 +30,19 @@ export default function SymptomViewHeader(props) {
           {formatDate(props.date)}
         </Text>
       </View >
-      <TouchableOpacity
-        onPress={props.deleteEntry}
-        style={[
-          styles.headerDeleteButton,
-          {opacity: props.deleteIconActive ? 1 : 0}
-        ]}
-        disabled={!props.deleteIconActive}
-      >
-        <Icon
-          name="delete"
-          {...iconStyles.symptomHeaderIcons}
-        />
-      </TouchableOpacity>
+      { props.deleteIconActive &&
+        <TouchableOpacity
+          onPress={props.deleteEntry}
+          style={[
+            styles.headerDeleteButton,
+          ]}
+        >
+          <Icon
+            name="delete"
+            {...iconStyles.symptomHeaderIcons}
+          />
+        </TouchableOpacity>
+      }
 
     </View>
   )
diff --git a/styles/index.js b/styles/index.js
index 4f36a3c..47f1070 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -234,13 +234,12 @@ export default StyleSheet.create({
     justifyContent: 'center',
     height: 80
   },
-  headerCycleDay: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
   navigationArrow: {
-    padding: 20
+    padding: 20,
+    position: 'absolute'
   },
+  navigationArrowLeft: { left: 0 },
+  navigationArrowRight: { right: 0 },
   menu: {
     backgroundColor: primaryColor,
     alignItems: 'center',
@@ -453,7 +452,8 @@ export default StyleSheet.create({
   headerDeleteButton: {
     paddingHorizontal: 20,
     paddingVertical: 20,
-    alignItems: 'flex-end'
+    position: 'absolute',
+    right: 0
   },
   infoButtonSymptomView: {
     position: 'absolute',