Introduces Header redesign along with some global styles changes

components/header/index.js

@@ -1,36 +1,78 @@
-import React from 'react'
-import { View } from 'react-native'
+import React, { Component } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import Title from './title'
-import NavigationArrow from './navigation-arrow'
-import DeleteIcon from './delete-icon'
+import AppText from '../common/app-text'
+import SideMenu from './side-menu'
 
-import styles from '../../styles'
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
 
-export default function Header({
-  handleBack,
-  handleNext,
-  handleDelete,
-  title,
-  subtitle,
-}) {
+import { Colors, Containers, Fonts, Sizes } from '../../styles/redesign'
 
-  return (
-    <View style={styles.header}>
-      <View style={styles.accentCircle} />
-      { handleBack && <NavigationArrow handleBack={handleBack} /> }
-      <Title title={title} subtitle={subtitle} />
-      { handleNext && <NavigationArrow handleNext={handleNext} /> }
-      { handleDelete && <DeleteIcon handleDelete={handleDelete} /> }
-    </View >
+class Header extends Component {
+
+  static propTypes = {
+    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}>
+        <DripIcon navigate={this.props.navigate}/>
+        <SideMenu
+          shouldShowMenu={shouldShowMenu}
+          onPress={this.toggleMenu}
+        />
+      </View >
+    )
+  }
+}
+
+const DripIcon = ({ navigate }) => {
+  return(
+    <TouchableOpacity onPress={() => navigate('Home')}>
+      <AppText style={styles.icon}>drip.</AppText>
+    </TouchableOpacity>
   )
 }
 
-Header.propTypes = {
-  handleBack: PropTypes.func,
-  handleDelete: PropTypes.func,
-  handleNext: PropTypes.func,
-  subtitle: PropTypes.string,
-  title: PropTypes.string.isRequired
+DripIcon.propTypes = {
+  navigate: PropTypes.func.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)