Increase hitSlop of menu icon and navigation arrows

.eslintrc

@@ -4,10 +4,7 @@
     "mocha": true,
     "es6": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
   "parser": "babel-eslint",
   "parserOptions": {
     "sourceType": "module",
@@ -16,31 +13,18 @@
     },
     "ecmaVersion": 2018
   },
-  "plugins": [
-    "react"
-  ],
+  "plugins": ["react"],
   "settings": {
     "react": {
-      "version": require('./package.json').dependencies.react,
-    },
+      "version": require("./package.json").dependencies.react
+    }
   },
   "rules": {
-    "indent": [
-      "error",
-      2
-    ],
-    "no-console": [
-      "error",
-      { allow: ["warn", "error"] }
-    ],
+    "indent": ["error", 2],
+    "no-console": ["error", { "allow": ["warn", "error"] }],
     "space-before-function-paren": 0,
-    "semi": [
-      "warn",
-      "never"
-    ],
-    "space-infix-ops": [
-      "warn"
-    ],
+    "semi": ["warn", "never"],
+    "space-infix-ops": ["warn"],
     "no-var": "error",
     "prefer-const": "error",
     "no-trailing-spaces": "error",
@@ -53,6 +37,6 @@
         "ignoreTemplateLiterals": true
       }
     ],
-    "no-multi-spaces": 2,
+    "no-multi-spaces": 2
   }
 }

.gitignore

@@ -2,6 +2,9 @@
 #
 .DS_Store
 
+# VSCode
+.vscode/
+
 # Xcode
 #
 build/

components/cycle-day/symptom-page-title.js

@@ -12,16 +12,17 @@ import {
   nextDate,
   prevDate,
   isTomorrowInFuture,
-  isYesterdayInFuture
+  isYesterdayInFuture,
 } from '../helpers/cycle-day'
 import { Colors, Containers, Spacing, Typography } from '../../styles'
+import { HIT_SLOP } from '../../config'
 
 const SymptomPageTitle = ({
   date,
   reloadSymptomData,
   setDate,
   subtitle,
-  title
+  title,
 }) => {
   const rightArrowColor = isTomorrowInFuture(date) ? Colors.grey : Colors.orange
   const leftArrowColor = isYesterdayInFuture(date) ? Colors.grey : Colors.orange
@@ -33,15 +34,15 @@ const SymptomPageTitle = ({
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={() => navigate(false)}>
-        <AppIcon name='chevron-left' color={leftArrowColor}/>
+      <TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
+        <AppIcon name='chevron-left' color={leftArrowColor} />
       </TouchableOpacity>
       <View style={styles.textContainer}>
         <AppText style={styles.title}>{title}</AppText>
         {subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
       </View>
-      <TouchableOpacity onPress={() => navigate(true)}>
-        <AppIcon name='chevron-right' color={rightArrowColor}/>
+      <TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
+        <AppIcon name='chevron-right' color={rightArrowColor} />
       </TouchableOpacity>
     </View>
   )
@@ -52,37 +53,34 @@ SymptomPageTitle.propTypes = {
   reloadSymptomData: PropTypes.func.isRequired,
   setDate: PropTypes.func.isRequired,
   subtitle: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
 }
 
 const styles = StyleSheet.create({
   container: {
-    height: (Spacing.base * 4),
+    height: Spacing.base * 4,
     marginHorizontal: Spacing.base,
     marginTop: Spacing.base,
-    ...Containers.rowContainer
+    ...Containers.rowContainer,
   },
   textContainer: {
-    alignItems: 'center'
+    alignItems: 'center',
   },
   title: {
-    ...Typography.titleWithoutMargin
-  }
+    ...Typography.titleWithoutMargin,
+  },
 })
 
 const mapStateToProps = (state) => {
-  return({
+  return {
     date: getDate(state),
-  })
+  }
 }
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     setDate: (date) => dispatch(setDate(date)),
-  })
+  }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(SymptomPageTitle)
+export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle)

components/header/hamburger-menu.js

@@ -6,6 +6,7 @@ import MenuItem from './menu-item'
 
 import { Colors, Sizes } from '../../styles'
 import settingsLabels from '../../i18n/en/settings'
+import { HIT_SLOP } from '../../config'
 
 const { menuItems } = settingsLabels
 
@@ -16,7 +17,6 @@ const settingsMenuItems = [
 ]
 
 export default class HamburgerMenu extends Component {
-
   constructor(props) {
     super(props)
 
@@ -24,20 +24,20 @@ export default class HamburgerMenu extends Component {
   }
 
   toggleMenu = () => {
-    this.setState({ shouldShowMenu: !this.state.shouldShowMenu})
+    this.setState({ shouldShowMenu: !this.state.shouldShowMenu })
   }
 
   render() {
     const { shouldShowMenu } = this.state
 
-    return(
+    return (
       <React.Fragment>
-        {!shouldShowMenu &&
-          <TouchableOpacity onPress={this.toggleMenu}>
-            <AppIcon name='dots-three-vertical' color={Colors.orange}/>
+        {!shouldShowMenu && (
+          <TouchableOpacity onPress={this.toggleMenu} hitSlop={HIT_SLOP}>
+            <AppIcon name='dots-three-vertical' color={Colors.orange} />
           </TouchableOpacity>
-        }
-        {shouldShowMenu &&
+        )}
+        {shouldShowMenu && (
           <Modal
             animationType='fade'
             onRequestClose={this.toggleMenu}
@@ -47,29 +47,27 @@ export default class HamburgerMenu extends Component {
             <TouchableOpacity
               onPress={this.toggleMenu}
               style={styles.blackBackground}
-            >
-            </TouchableOpacity>
+            ></TouchableOpacity>
             <View style={styles.menu}>
               <TouchableOpacity
                 onPress={this.toggleMenu}
                 style={styles.iconContainer}
               >
-                <AppIcon name='cross' color='black'/>
+                <AppIcon name='cross' color='black' />
               </TouchableOpacity>
-              {settingsMenuItems.map(item =>
+              {settingsMenuItems.map((item) => (
                 <MenuItem
                   item={item}
                   key={item.name}
                   closeMenu={this.toggleMenu}
                 />
-              )}
+              ))}
             </View>
           </Modal>
-        }
+        )}
       </React.Fragment>
     )
   }
-
 }
 
 const styles = StyleSheet.create({
@@ -80,7 +78,7 @@ const styles = StyleSheet.create({
   },
   iconContainer: {
     alignSelf: 'flex-end',
-    marginBottom: Sizes.base
+    marginBottom: Sizes.base,
   },
   menu: {
     alignSelf: 'flex-end',
@@ -88,6 +86,6 @@ const styles = StyleSheet.create({
     height: '100%',
     padding: Sizes.base,
     position: 'absolute',
-    width: '60%'
-  }
+    width: '60%',
+  },
 })

config.js

@@ -11,7 +11,7 @@ export const SYMPTOMS = [
   'desire',
   'pain',
   'mood',
-  'note'
+  'note',
 ]
 
 export const CHART_COLUMN_WIDTH = 32
@@ -30,3 +30,5 @@ export const TEMP_SCALE_UNITS = 0.1
 export const TEMP_MAX = 40
 export const TEMP_MIN = 34
 export const TEMP_SLIDER_STEP = 0.5
+
+export const HIT_SLOP = { top: 20, bottom: 20, left: 20, right: 20 }