Introduces bottom menu redesign (Menu component)

components/common/menu-icon.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons'
+import iconConfig from '../../selection.json'
+
+import { Colors, Sizes } from '../../styles/redesign'
+
+const Icon = createIconSetFromIcoMoon(iconConfig, '', 'Menu')
+
+const MenuIcon = ({ isActive, name }) => {
+  const color = isActive ? Colors.greyDark : Colors.grey
+
+  return <Icon name={name} size={Sizes.icon} color={color} />
+}
+
+MenuIcon.propTypes = {
+  isActive: PropTypes.bool,
+  name: PropTypes.string.isRequired
+}
+
+export default MenuIcon

components/menu/index.js

@@ -1,30 +1,23 @@
 import React from 'react'
-import { View } from 'react-native'
-import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
 
 import MenuItem from './menu-item'
 
-import { connect } from 'react-redux'
-import { getNavigation, navigate } from '../../slices/navigation'
-
+import { Containers } from '../../styles/redesign'
 import { pages } from '../pages'
 
-import styles from '../../styles'
-
-const Menu = ({ navigate, navigation }) => {
+const Menu = () => {
   const menuItems = pages.filter(page => page.isInMenu)
+
   return (
-    <View style={styles.menu}>
-      { menuItems.map(({ icon, label, component, children }) => {
-        const isActive = (component === navigation.currentPage) ||
-          (children && children.indexOf(navigation.currentPage) !== -1)
+    <View style={styles.container}>
+      { menuItems.map(({ icon, label, component }) => {
         return (
           <MenuItem
+            component={component}
+            icon={icon}
             key={label}
             label={label}
-            icon={icon}
-            active={isActive}
-            onPress={() => navigate(component)}
           />
         )}
       )}
@@ -32,24 +25,11 @@ const Menu = ({ navigate, navigation }) => {
   )
 }
 
-Menu.propTypes = {
-  navigation: PropTypes.object,
-  navigate: PropTypes.func,
-}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    ...Containers.rowContainer
+  }
+})
 
-const mapStateToProps = (state) => {
-  return({
-    navigation: getNavigation(state),
-  })
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Menu)
+export default Menu

components/menu/menu-item.js

@@ -1,36 +1,72 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Text, TouchableOpacity } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
 
-import styles, { iconStyles, secondaryColor } from '../../styles'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import Icon from '../common/menu-icon'
 
-import { menuTitles } from '../../i18n/en/labels'
+import { connect } from 'react-redux'
+import { getNavigation, navigate } from '../../slices/navigation'
 
-const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
-  acc[curr] = menuTitles[curr].toLowerCase()
-  return acc
-}, {})
+import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles/redesign'
 
-export default function MenuItem({ active, icon, label, onPress }) {
-  const styleActive = active ? { color: secondaryColor } : null
+const MenuItem = ({ component, icon, label, navigate, navigation }) => {
+  const isActive = (component === navigation.currentPage)
+  const textStyle = isActive ? styles.menuTextActive : styles.menuText
+  const testID = isActive ? 'activeMenuItem' : `menuItem${label}`
 
   return (
-    <TouchableOpacity style={styles.menuItem} onPress={onPress} >
-      <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
-      <Text
-        testID={active ? 'activeMenuItem' : `menuItem${label}`}
-        style={[styles.menuText, styleActive]}
-      >
-        {menuTitlesLowerCase[label]}
-      </Text>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={() => navigate(component)}
+    >
+      <Icon name={icon} isActive={isActive}/>
+      <Text testID={testID} style={textStyle} >{label}</Text>
     </TouchableOpacity>
   )
 }
 
 MenuItem.propTypes = {
-  active: PropTypes.bool,
+  component: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  onPress: PropTypes.func.isRequired
-}
+  navigation: PropTypes.object,
+  navigate: PropTypes.func,
+}
+
+const text = {
+  fontFamily: Fonts.bold,
+  fontSize: Sizes.small,
+  textTransform: 'uppercase'
+}
+
+const styles = StyleSheet.create({
+  button: {
+    padding: Spacing.base,
+    ...Containers.centerItems
+  },
+  menuText: {
+    color: Colors.grey,
+    ...text
+  },
+  menuTextActive: {
+    color: Colors.orange,
+    ...text
+  }
+})
+
+const mapStateToProps = (state) => {
+  return({
+    navigation: getNavigation(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(MenuItem)

components/pages.js

@@ -19,26 +19,25 @@ export const pages = [
   {
     component: 'Home',
     icon: 'home',
-    isInMenu: true,
     label: 'Home',
   },
   {
     component: 'Calendar',
-    icon: 'calendar-range',
+    icon: 'calendar',
     isInMenu: true,
     label: 'Calendar',
     parent: 'Home',
   },
   {
     component: 'Chart',
-    icon: 'chart-line',
+    icon: 'chart',
     isInMenu: true,
     label: 'Chart',
     parent: 'Home',
   },
   {
     component: 'Stats',
-    icon: 'chart-pie',
+    icon: 'statistics',
     isInMenu: true,
     label: 'Stats',
     parent: 'Home',
@@ -47,7 +46,6 @@ export const pages = [
     children: Object.keys(settingsViews),
     component: 'SettingsMenu',
     icon: 'settings',
-    isInMenu: true,
     label: 'Settings',
     parent: 'Home',
   },

styles/typography.js

@@ -7,9 +7,11 @@ export const fonts = {
 }
 
 export const sizes = {
+  small: 14,
   base: 18,
   subtitle: 22,
-  title: 24
+  title: 24,
+  icon: 40
 }
 
 const title = {