Adds symptom info screens to each symptom

components/header/default.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import {
+  View,
+  Text} from 'react-native'
+import styles from '../../styles'
+
+export default function DefaultHeader(props) {
+  return (
+    <View style={styles.header}>
+      <View style={styles.accentCircle} />
+      <Text style={styles.headerText}>
+        {props.title}
+      </Text>
+    </View >
+  )
+}

components/header/index.js

@@ -1,27 +1,24 @@
 import React from 'react'
-import {
-  View,
-  Text,
-  Dimensions
-} from 'react-native'
-import styles from '../../styles'
+import { Dimensions } from 'react-native'
 import CycleDayHeader from './cycle-day'
+import DefaultHeader from './default'
+import InfoSymptomHeader from './info-symptom'
 import SymptomViewHeader from './symptom-view'
 
 export default function Header(p) {
   const middle = Dimensions.get('window').width / 2
   const props = Object.assign({}, p, {middle})
-  return (
-    props.isCycleDayOverView ?
-      <CycleDayHeader {...props} />
-      : props.isSymptomView ?
-        <SymptomViewHeader {...props}/>
-        :
-        <View style={styles.header}>
-          <View style={styles.accentCircle} />
-          <Text style={styles.headerText}>
-            {props.title}
-          </Text>
-        </View >
-  )
-}
+
+  if (props.isCycleDayOverView) {
+    return (<CycleDayHeader {...props} />)
+  }
+  else if (props.isSymptomView) {
+    return (<SymptomViewHeader {...props} />)
+  }
+  else if (props.title === 'info') {
+    return (<InfoSymptomHeader {...props} />)
+  }
+  else {
+    return (<DefaultHeader {...props} />)
+  }
+}

components/header/info-symptom.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import {
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import NavigationArrow from './navigation-arrow'
+import Icon from 'react-native-vector-icons/Entypo'
+
+export default function InfoSymptomHeader(props) {
+  return (
+    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
+      <View
+        style={styles.accentCircle}
+        left={props.middle - styles.accentCircle.width / 2}
+      />
+      <NavigationArrow direction='left' {...props}/>
+      <View>
+        <Text style={styles.headerText}>
+          {props.title}
+        </Text>
+      </View>
+      <TouchableOpacity style={styles.hiddenIcon}>
+        <Icon
+          name={'chevron-thin-right'}
+          {...iconStyles.hiddenIcon}
+        />
+      </TouchableOpacity>
+    </View>
+  )
+}

components/header/symptom-view.js

@@ -1,7 +1,9 @@
 import React from 'react'
 import {
   View,
-  Text} from 'react-native'
+  Text,
+  TouchableOpacity
+} from 'react-native'
 import styles, { iconStyles } from '../../styles'
 import FeatherIcon from 'react-native-vector-icons/Feather'
 import NavigationArrow from './navigation-arrow'
@@ -26,11 +28,17 @@ export default function SymptomViewHeader(props) {
           {formatDate(props.date)}
         </Text>
       </View >
-      <FeatherIcon
-        name='info'
-        style={styles.symptomInfoIcon}
-        {...iconStyles.symptomHeaderIcons}
-      />
+      <TouchableOpacity
+        onPress={() => props.goToSymptomInfo()}
+        style={styles.infoButton}
+      >
+        <FeatherIcon
+          name="info"
+          style={styles.symptomInfoIcon}
+          {...iconStyles.symptomHeaderIcons}
+        />
+      </TouchableOpacity>
+
     </View>
   )
 }