Feature/ios launch

components/app-wrapper.js

@@ -1,16 +1,18 @@
 import React, { Component } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Provider } from 'react-redux'
 import nodejs from 'nodejs-mobile-react-native'
 
 import { getLicenseFlag, saveEncryptionFlag } from '../local-storage'
 import { openDb } from '../db'
 
 import App from './app'
-import PasswordPrompt from './password-prompt'
-import License from './license'
 import AppLoadingView from './common/app-loading'
+import AppStatusBar from './common/app-status-bar'
+import License from './license'
+import PasswordPrompt from './password-prompt'
 
 import store from "../store"
-import { Provider } from 'react-redux'
 
 export default class AppWrapper extends Component {
   constructor() {
@@ -84,7 +86,19 @@ export default class AppWrapper extends Component {
       initialView = <App />
     }
 
-    return <Provider store={store}>{initialView}</Provider>
-
+    return (
+      <Provider store={store}>
+        <View style={styles.container}>
+          <AppStatusBar />
+          {initialView}
+        </View>
+      </Provider>
+    )
   }
-}
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  }
+})

components/chart/chart.js

@@ -1,6 +1,13 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { ActivityIndicator, FlatList, Dimensions, StyleSheet, View } from 'react-native'
+import {
+  ActivityIndicator,
+  Dimensions,
+  FlatList,
+  PixelRatio,
+  StyleSheet,
+  View
+} from 'react-native'
 
 import AppLoadingView from '../common/app-loading'
 import AppPage from '../common/app-page'
@@ -22,9 +29,10 @@ import { makeColumnInfo, nfpLines } from '../helpers/chart'
 
 import {
   CHART_COLUMN_WIDTH,
-  SYMPTOMS,
+  CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
-  CHART_XAXIS_HEIGHT_RATIO
+  CHART_XAXIS_HEIGHT_RATIO,
+  SYMPTOMS
 } from '../../config'
 import { shared } from '../../i18n/en/labels'
 import { Colors, Spacing } from '../../styles'
@@ -105,9 +113,13 @@ class CycleChart extends Component {
 
     this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
     const remainingHeight = height * 0.7 - this.xAxisHeight
-    this.symptomHeight = remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
-    this.symptomRowHeight = this.symptomRowSymptoms.length *
-      this.symptomHeight
+    this.symptomHeight = PixelRatio.roundToNearestPixel(
+      remainingHeight
+      * CHART_SYMPTOM_HEIGHT_RATIO
+    )
+    this.symptomRowHeight = PixelRatio.roundToNearestPixel(
+      this.symptomRowSymptoms.length * this.symptomHeight
+    ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
     this.columnHeight = remainingHeight - this.symptomRowHeight
     const chartHeight = this.shouldShowTemperatureColumn ?
       height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)

components/chart/tick.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 import AppText from '../common/app-text'
 
 import { Sizes } from '../../styles'
+import { CHART_TICK_WIDTH } from '../../config'
 
 const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
   const top = yPosition - height / 2
@@ -28,16 +29,14 @@ Tick.propTypes = {
 
 
 const text = {
-  lineHeight: Sizes.base,
-  right: 4,
-  textAlign: 'right'
+  textAlign: 'right',
 }
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
     position: 'absolute',
     right: 0,
-    width: 40
+    width: CHART_TICK_WIDTH
   },
   textBold: {
     fontSize: Sizes.base,

components/common/app-status-bar.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { SafeAreaView, StatusBar, StyleSheet, View } from 'react-native'
+
+import { Colors } from '../../styles'
+import { STATUSBAR_HEIGHT } from '../../config'
+
+const AppStatusBar = () => (
+  <View style={styles.statusBar}>
+    <SafeAreaView>
+      <StatusBar
+        backgroundColor={Colors.purple}
+        barStyle="light-content"
+        translucent
+      />
+    </SafeAreaView>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  statusBar: {
+    backgroundColor: Colors.purple,
+    height: STATUSBAR_HEIGHT,
+  }
+})
+
+export default AppStatusBar

components/common/app-text-input.js

@@ -38,6 +38,7 @@ const styles = StyleSheet.create({
     marginTop: Spacing.base,
     minWidth: '80%',
     paddingHorizontal: Spacing.base,
+    paddingVertical: Spacing.tiny,
     ...Typography.mainText
   }
 })

components/common/button.js

@@ -5,7 +5,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 import AppIcon from './app-icon'
 import AppText from './app-text'
 
-import { Colors, Fonts, Spacing } from '../../styles'
+import { Colors, Fonts, Sizes, Spacing } from '../../styles'
 
 const Button = ({
   children,
@@ -52,7 +52,7 @@ const text = {
 }
 
 const textSmall = {
-  fontSize: Fonts.small,
+  fontSize: Sizes.small,
   padding: Spacing.small,
   textTransform: 'uppercase'
 }

components/common/close-icon.js

@@ -4,29 +4,32 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 
 import AppIcon from './app-icon'
 
+import { HIT_SLOP} from '../../config'
 import { Colors, Sizes } from '../../styles'
 
-const CloseIcon = ({ onClose, ...props }) => {
+const CloseIcon = ({ onClose, color, ...props }) => {
   return (
     <TouchableOpacity
+      hitSlop={HIT_SLOP}
       onPress={onClose}
       style={styles.container}
       {...props}
     >
-      <AppIcon name='cross' color={Colors.orange} />
+      <AppIcon name='cross' color={color ? color : Colors.orange} />
     </TouchableOpacity>
   )
 }
 
 CloseIcon.propTypes = {
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  color: PropTypes.string
 }
 
 const styles = StyleSheet.create({
   container: {
     alignSelf: 'flex-start',
-    marginBottom: Sizes.base
+    marginBottom: Sizes.base,
   }
 })
 
-export default CloseIcon
+export default CloseIcon

components/cycle-day/temperature.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { Keyboard } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker'
@@ -127,6 +127,7 @@ class Temperature extends Component {
             mode="time"
             onConfirm={this.setTime}
             onCancel={this.onCancelTimePicker}
+            display={Platform.OS === "ios" ? "spinner" : "default"}
           />
         </Segment>
       </React.Fragment>

components/header/hamburger-menu.js

@@ -1,7 +1,14 @@
 import React, { Component } from 'react'
-import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import {
+  Modal,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View
+} from 'react-native'
 
 import AppIcon from '../common/app-icon'
+import CloseIcon from '../common/close-icon'
 import MenuItem from './menu-item'
 
 import { Colors, Sizes } from '../../styles'
@@ -49,12 +56,9 @@ export default class HamburgerMenu extends Component {
               style={styles.blackBackground}
             ></TouchableOpacity>
             <View style={styles.menu}>
-              <TouchableOpacity
-                onPress={this.toggleMenu}
-                style={styles.iconContainer}
-              >
-                <AppIcon name='cross' color='black' />
-              </TouchableOpacity>
+              <View style={styles.iconContainer}>
+                <CloseIcon color={'black'} onClose={() => this.toggleMenu()} />
+              </View>
               {settingsMenuItems.map((item) => (
                 <MenuItem
                   item={item}
@@ -85,6 +89,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     height: '100%',
     padding: Sizes.base,
+    paddingTop: Platform.OS === 'ios' ? Sizes.huge : Sizes.base,
     position: 'absolute',
     width: '60%',
   },