Introduces Header redesign along with some global styles changes

components/common/app-page.js

@@ -4,7 +4,7 @@ import { ScrollView, StyleSheet } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { Colors, Fonts, Sizes, Spacing, Typography } from '../../styles/redesign'
+import { Colors, Typography } from '../../styles/redesign'
 
 const AppPage = ({ children, title }) => {
   return(
@@ -26,11 +26,6 @@ const styles = StyleSheet.create({
     flex: 1
   },
   title: {
-    alignSelf: 'center',
-    fontFamily: Fonts.bold,
-    fontWeight: '700',
-    fontSize: Sizes.title,
-    marginHorizontal: Spacing.base,
     ...Typography.title
   }
 })

components/common/segment.js

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
 
-import { Containers, Spacing, Sizes, Typography } from '../../styles/redesign'
+import { Containers, Spacing, Typography } from '../../styles/redesign'
 
 const Segment = ({ children, last, title }) => {
   const containerStyle = last ? styles.containerLast : styles.container
@@ -37,8 +37,7 @@ const styles = StyleSheet.create({
     ...segmentContainer
   },
   title: {
-    fontSize: Sizes.subtitle,
+    ...Typography.subtitle
-    ...Typography.title
   }
 })
 

components/header/delete-icon.js

@@ -1,27 +0,0 @@
-import React from 'react'
-import { TouchableOpacity } from 'react-native'
-import PropTypes from 'prop-types'
-
-import Icon from 'react-native-vector-icons/AntDesign'
-
-import styles, { iconStyles } from '../../styles'
-
-export default function DeleteIcon({ handleDelete }) {
-
-  return (
-    <TouchableOpacity
-      onPress={handleDelete}
-      style={styles.headerDeleteButton}
-      testID="deleteIcon"
-    >
-      <Icon
-        name="delete"
-        {...iconStyles.symptomHeaderIcons}
-      />
-    </TouchableOpacity>
-  )
-}
-
-DeleteIcon.propTypes = {
-  handleDelete: PropTypes.func,
-}

components/header/index.js

@@ -1,36 +1,78 @@
-import React from 'react'
+import React, { Component } from 'react'
-import { View } from 'react-native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import Title from './title'
+import AppText from '../common/app-text'
-import NavigationArrow from './navigation-arrow'
+import SideMenu from './side-menu'
-import DeleteIcon from './delete-icon'
 
-import styles from '../../styles'
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
 
-export default function Header({
+import { Colors, Containers, Fonts, Sizes } from '../../styles/redesign'
-  handleBack,
+
-  handleNext,
+class Header extends Component {
-  handleDelete,
+
-  title,
+  static propTypes = {
-  subtitle,
+    navigate: PropTypes.func.isRequired
-}) {
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = { shouldShowMenu: false }
+  }
+
+  toggleMenu = () => {
+    this.setState({ shouldShowMenu: !this.state.shouldShowMenu})
+  }
+
+  render() {
+    const { shouldShowMenu } = this.state
 
     return (
       <View style={styles.header}>
-      <View style={styles.accentCircle} />
+        <DripIcon navigate={this.props.navigate}/>
-      { handleBack && <NavigationArrow handleBack={handleBack} /> }
+        <SideMenu
-      <Title title={title} subtitle={subtitle} />
+          shouldShowMenu={shouldShowMenu}
-      { handleNext && <NavigationArrow handleNext={handleNext} /> }
+          onPress={this.toggleMenu}
-      { handleDelete && <DeleteIcon handleDelete={handleDelete} /> }
+        />
       </View >
     )
+  }
+}
+
+const DripIcon = ({ navigate }) => {
+  return(
+    <TouchableOpacity onPress={() => navigate('Home')}>
+      <AppText style={styles.icon}>drip.</AppText>
+    </TouchableOpacity>
+  )
 }
 
-Header.propTypes = {
+DripIcon.propTypes = {
-  handleBack: PropTypes.func,
+  navigate: PropTypes.func.isRequired
-  handleDelete: PropTypes.func,
-  handleNext: PropTypes.func,
-  subtitle: PropTypes.string,
-  title: PropTypes.string.isRequired
 }
+
+const styles = StyleSheet.create({
+  header: {
+    backgroundColor: Colors.purple,
+    padding: Sizes.base,
+    ...Containers.rowContainer
+  },
+  icon: {
+    color: Colors.tourquiseDark,
+    fontFamily: Fonts.bold,
+    fontSize: Sizes.title
+  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(Header)

components/header/navigation-arrow.js

@@ -1,30 +0,0 @@
-import React from 'react'
-import { TouchableOpacity } from 'react-native'
-import PropTypes from 'prop-types'
-import Icon from 'react-native-vector-icons/Entypo'
-
-import styles, { iconStyles } from '../../styles'
-
-export default function NavigationArrow({ handleBack, handleNext }) {
-  const navigationDirection = handleBack ? 'Left' : 'Right'
-  return (
-    <TouchableOpacity
-      style={[
-        styles.navigationArrow,
-        styles[`navigationArrow${navigationDirection}`]
-      ]}
-      onPress={ handleBack || handleNext }
-      testID={ handleBack ? 'backButton' : 'nextButton'}
-    >
-      <Icon
-        name={`chevron-thin-${navigationDirection.toLowerCase()}`}
-        {...iconStyles.navigationArrow}
-      />
-    </TouchableOpacity>
-  )
-}
-
-NavigationArrow.propTypes = {
-  handleBack: PropTypes.func,
-  handleNext: PropTypes.func,
-}

components/header/side-menu.js

@@ -0,0 +1,114 @@
+import React from 'react'
+import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppIcon from '../common/app-icon'
+import AppText from '../common/app-text'
+
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { Sizes, Typography } from '../../styles/redesign'
+import settingsLabels from '../../i18n/en/settings'
+
+const { menuItems } = settingsLabels
+
+const settingsMenuItems = [
+  {name: menuItems.settings, component: 'SettingsMenu'},
+  {name: menuItems.about, component: 'About'},
+  {name: menuItems.license, component: 'License'},
+]
+
+const SideMenu = ({ navigate, onPress, shouldShowMenu }) => {
+  const navigateMenuItem = (page) => {
+    onPress()
+    navigate(page)
+  }
+
+  return(
+    <React.Fragment>
+      {!shouldShowMenu &&
+        <TouchableOpacity onPress={onPress}>
+          <AppIcon name={'dots-three-vertical'} isCTA/>
+        </TouchableOpacity>
+      }
+      {shouldShowMenu &&
+        <Modal
+          animationType='fade'
+          onRequestClose={onPress}
+          transparent={true}
+          visible={shouldShowMenu}
+        >
+          <View style={styles.blackBackground}></View>
+          <View style={styles.menu}>
+            <TouchableOpacity onPress={onPress} style={styles.iconContainer}>
+              <AppIcon name={'cross'}/>
+            </TouchableOpacity>
+            {settingsMenuItems.map(item =>
+              <MenuItem
+                item={item}
+                key={item.name}
+                navigate={navigateMenuItem}
+              />
+            )}
+          </View>
+        </Modal>
+      }
+    </React.Fragment>
+  )
+}
+
+SideMenu.propTypes = {
+  navigate: PropTypes.func.isRequired,
+  onPress: PropTypes.func,
+  shouldShowMenu: PropTypes.bool.isRequired
+}
+
+const MenuItem = ({ item, navigate }) => {
+  return(
+    <View style={styles.menuItem}>
+      <TouchableOpacity onPress={() => navigate(item.component)}>
+        <AppText style={styles.text}>{item.name}</AppText>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+MenuItem.propTypes = {
+  item: PropTypes.object.isRequired,
+  navigate: PropTypes.func.isRequired,
+}
+
+const styles = StyleSheet.create({
+  blackBackground: {
+    backgroundColor: 'black',
+    flex: 1,
+    opacity: 0.65,
+  },
+  iconContainer: {
+    alignSelf: 'flex-end',
+    marginBottom: Sizes.base
+  },
+  menu: {
+    alignSelf: 'flex-end',
+    backgroundColor: 'white',
+    height: '100%',
+    padding: Sizes.base,
+    position: 'absolute',
+    width: '60%'
+  },
+  text: {
+    ...Typography.subtitle
+  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(SideMenu)

components/header/title.js

@@ -1,36 +0,0 @@
-import React from 'react'
-import { View, Text} from 'react-native'
-import PropTypes from 'prop-types'
-
-import styles from '../../styles'
-
-export default function Title({ title, subtitle }) {
-
-  if (subtitle !== undefined) {
-    return (
-      <View>
-        <Text style={styles.dateHeader} testID='headerTitle'>
-          { // design wants everyhting lowercased, but we don't
-            // have CSS pseudo properties
-            title.toLowerCase()}
-        </Text>
-        { subtitle &&
-          <Text style={styles.cycleDayNumber} testID='headerSubtitle'>
-            {subtitle.toLowerCase()}
-          </Text>
-        }
-      </View>
-    )
-  }
-
-  return (
-    <Text testID='headerTitle' style={styles.headerText}>
-      {title.toLowerCase()}
-    </Text>
-  )
-}
-
-Title.propTypes = {
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-}

i18n/en/settings.js

@@ -20,7 +20,10 @@ export default {
     password: {
       name:'Password',
       text: ''
-    }
+    },
+    about: 'About',
+    license: 'License',
+    settings: 'Settings'
   },
   export: {
     errors: {

styles/containers.js

@@ -12,5 +12,10 @@ export default {
     alignItems: 'center',
     flex: 1,
     justifyContent: 'center'
+  },
+  rowContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
   }
 }

styles/typography.js

@@ -12,13 +12,26 @@ export const sizes = {
   title: 24
 }
 
+const title = {
+  color: Colors.purple,
+  marginVertical: Spacing.large
+}
+
 export default {
   mainText: {
     fontFamily: fonts.main,
     fontSize: sizes.base
   },
+  subtitle: {
+    fontSize: sizes.subtitle,
+    ...title
+  },
   title: {
-    color: Colors.purple,
+    alignSelf: 'center',
-    marginVertical: Spacing.large
+    fontFamily: fonts.bold,
+    fontWeight: '700',
+    fontSize: sizes.title,
+    marginHorizontal: Spacing.base,
+    ...title
   }
 }