Merge branch 'rebased-redesign' into 'master'

Rebased redesign

See merge request bloodyhealth/drip!305

components/app-wrapper.js

@@ -7,7 +7,7 @@ import { openDb } from '../db'
 import App from './app'
 import PasswordPrompt from './password-prompt'
 import License from './license'
-import AppLoadingView from './app-loading'
+import AppLoadingView from './common/app-loading'
 
 import store from "../store"
 import { Provider } from 'react-redux'

components/app.js

 import React, { Component } from 'react'
-import { View, BackHandler } from 'react-native'
+import { BackHandler, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { connect } from 'react-redux'
@@ -10,7 +10,7 @@ import { getNavigation, navigate, goBack } from '../slices/navigation'
 import Header from './header'
 import Menu from './menu'
 import { viewsList } from './views'
-import { isSymptomView, isSettingsView } from './pages'
+import { isSettingsView } from './pages'
 
 import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
@@ -64,9 +64,8 @@ class App extends Component {
     const Page = viewsList[currentPage]
     const title = headerTitles[currentPage]
 
-    const isSymptomEditView = isSymptomView(currentPage)
     const isSettingsSubView = isSettingsView(currentPage)
-    const isCycleDayView = currentPage === 'CycleDay'
+    const isTemperatureEditView = currentPage === 'TemperatureEditView'
 
     const headerProps = {
       title,
@@ -76,24 +75,25 @@ class App extends Component {
     const pageProps = {
       cycleDay: date && getCycleDay(date),
       date,
+      isTemperatureEditView,
     }
 
     return (
-      <View style={{ flex: 1 }}>
-        {
-          !isSymptomEditView &&
-          !isCycleDayView &&
-          <Header { ...headerProps } />
-        }
-
+      <View style={styles.container}>
+        <Header { ...headerProps } />
         <Page { ...pageProps } />
-
-        { !isSymptomEditView && <Menu /> }
+        <Menu />
       </View>
     )
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})
+
 const mapStateToProps = (state) => {
   return({
     date: getDate(state),

components/button.js

-import React from 'react'
-import PropTypes from 'prop-types'
-import { TouchableOpacity } from 'react-native'
-import AppText from './app-text'
-import styles from '../styles'
-
-export default function Button({
-  backgroundColor,
-  children,
-  onPress,
-  style,
-  testID
-}) {
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      style={[styles.button, style, { backgroundColor }]}
-      testID={testID}
-    >
-      <AppText style={styles.homeButtonText}>{children}</AppText>
-    </TouchableOpacity>
-  )
-}
-
-Button.propTypes = {
-  backgroundColor: PropTypes.string,
-  children: PropTypes.node,
-  onPress: PropTypes.func,
-  style: PropTypes.object,
-  testID: PropTypes.string
-}

components/calendar.js

 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
-import { connect } from 'react-redux'
 
+import { connect } from 'react-redux'
 import { setDate } from '../slices/date'
 import { navigate } from '../slices/navigation'
 
-import { LocalDate } from 'js-joda'
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
-import { shadesOfRed, calendarTheme } from '../styles/index'
-import styles from '../styles/index'
 import nothingChanged from '../db/db-unchanged'
+import {
+  calendarTheme,
+  predictionToCalFormat,
+  toCalFormat,
+  todayToCalFormat,
+} from './helpers/calendar'
 
 class CalendarView extends Component {
   static propTypes = {
     setDate: PropTypes.func.isRequired,
-    navigate: PropTypes.func.isRequired
+    navigate: PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -26,7 +30,7 @@ class CalendarView extends Component {
     this.state = {
       bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
       predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
-      todayInCalFormat: todayToCalFormat()
+      todayInCalFormat: todayToCalFormat(),
     }
 
     this.bleedingDays.addListener(this.setStateWithCalFormattedDays)
@@ -38,7 +42,7 @@ class CalendarView extends Component {
     this.setState({
       bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
       predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
-      todayInCalFormat: todayToCalFormat()
+      todayInCalFormat: todayToCalFormat(),
     })
   }
 
@@ -52,93 +56,44 @@ class CalendarView extends Component {
   }
 
   render() {
+    const {
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat,
+    } = this.state
+    const markedDates = Object.assign(
+      {},
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat
+    )
+
     return (
-      <CalendarList
-        onDayPress={this.passDateToDayView.bind(this)}
-        markedDates={
-          Object.assign(
-            {},
-            this.state.todayInCalFormat,
-            this.state.bleedingDaysInCalFormat,
-            this.state.predictedBleedingDaysInCalFormat
-          )
-        }
-        markingType={'custom'}
-        // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
-        firstDay={1}
-        theme={calendarTheme}
-      />
+      <View style={styles.container}>
+        <CalendarList
+          // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+          firstDay={1}
+          onDayPress={this.passDateToDayView.bind(this)}
+          markedDates={markedDates}
+          markingType='custom'
+          theme={calendarTheme}
+          // Max amount of months allowed to scroll to the past.
+          pastScrollRange={120}
+        />
+      </View>
     )
   }
 }
 
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+})
+
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     setDate: (date) => dispatch(setDate(date)),
     navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  null,
-  mapDispatchToProps,
-)(CalendarView)
-
-
-function toCalFormat(bleedingDaysSortedByDate) {
-  const todayDateString = LocalDate.now().toString()
-  return bleedingDaysSortedByDate.reduce((acc, day) => {
-    acc[day.date] = {
-      customStyles: {
-        container: {
-          backgroundColor: shadesOfRed[day.bleeding.value],
-        }
-      }
-    }
-    if (day.date === todayDateString) {
-      acc[day.date].customStyles.text = styles.calendarToday
-    }
-    return acc
-  }, {})
-}
-
-function predictionToCalFormat(predictedDays) {
-  if (!predictedDays.length) return {}
-  const todayDateString = LocalDate.now().toString()
-  const middleIndex = (predictedDays[0].length - 1) / 2
-  return predictedDays.reduce((acc, setOfDays) => {
-    setOfDays.reduce((accSet, day, i) => {
-      accSet[day] = {
-        customStyles: {
-          container: {
-            borderColor: (i === middleIndex) ? shadesOfRed[3] : shadesOfRed[2],
-            borderWidth: 3,
-          },
-          text: {
-            marginTop: 1,
-          }
-        }
-      }
-      if (day === todayDateString) {
-        accSet[day].customStyles.text = Object.assign(
-          {},
-          styles.calendarToday,
-          {marginTop: -2}
-        )
-      }
-      return accSet
-    }, acc)
-    return acc
-  }, {})
+  }
 }
 
-function todayToCalFormat() {
-  const todayDateString = LocalDate.now().toString()
-  const todayFormated = {}
-  todayFormated[todayDateString] = {
-    customStyles: {
-      text: styles.calendarToday
-    }
-  }
-  return todayFormated
-}
+export default connect(null, mapDispatchToProps)(CalendarView)
\ No newline at end of file

components/chart/chart-legend.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
-import AppText from '../app-text'
-import DripHomeIcon from '../../assets/drip-home-icons'
-
-import styles from './styles'
-import { cycleDayColor } from '../../styles'
+import AppText from '../common/app-text'
 
+import { Typography } from '../../styles'
+import { CHART_YAXIS_WIDTH } from '../../config'
 import { shared as labels } from '../../i18n/en/labels'
 
-const ChartLegend = ({ xAxisHeight }) => {
+const ChartLegend = ({ height }) => {
   return (
-    <View style={[styles.yAxis, styles.chartLegend, {height: xAxisHeight}]}>
-      <DripHomeIcon
-        name="circle"
-        size={styles.yAxis.width - 7}
-        color={cycleDayColor}
-      />
-      <AppText style={styles.yAxisLabels.dateLabel}>
-        {labels.date.toLowerCase()}
-      </AppText>
+    <View style={[styles.container, { height }]}>
+      <AppText style={styles.textBold}>#</AppText>
+      <AppText style={styles.text}>{labels.date}</AppText>
     </View>
   )
 }
 
 ChartLegend.propTypes = {
-  xAxisHeight: PropTypes.number.isRequired
+  height: PropTypes.number.isRequired
 }
 
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    width: CHART_YAXIS_WIDTH
+  },
+  text: {
+    ...Typography.label,
+  },
+  textBold: {
+    ...Typography.labelBold
+  }
+})
+
 export default ChartLegend

components/chart/chart-line.js

@@ -3,20 +3,16 @@ import PropTypes from 'prop-types'
 
 import { Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
-import styles from './styles'
+import { Colors } from '../../styles'
+import { CHART_STROKE_WIDTH, CHART_GRID_LINE_HORIZONTAL_WIDTH } from '../../config'
 
-const ChartLine = ({ path, isNfpLine = false }) => {
-  const strokeStyle =
-    isNfpLine ? styles.nfpLine.stroke : styles.column.stroke.color
-  const strokeWidth =
-    isNfpLine ? styles.nfpLine.strokeWidth : styles.column.stroke.width
+const ChartLine = ({ path, isNfpLine }) => {
+  const color = isNfpLine ? Colors.orange : Colors.grey
+  const width = isNfpLine
+    ? CHART_STROKE_WIDTH : CHART_GRID_LINE_HORIZONTAL_WIDTH * 2.5
 
   return (
-    <Shape
-      stroke={strokeStyle}
-      strokeWidth={strokeWidth}
-      d={path}
-    />
+    <Shape d={path} stroke={color} strokeWidth={width} />
   )
 }
 
@@ -25,4 +21,8 @@ ChartLine.propTypes = {
   isNfpLine: PropTypes.bool,
 }
 
+ChartLine.defaultProps = {
+  isNfpLine: false
+}
+
 export default ChartLine

components/chart/chart.js

 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { View, FlatList, ActivityIndicator } from 'react-native'
+import { ActivityIndicator, FlatList, Dimensions, StyleSheet, View } from 'react-native'
+
+import AppLoadingView from '../common/app-loading'
+import AppPage from '../common/app-page'
+import AppText from '../common/app-text'
 
-import NoData from './no-data'
-import AppLoadingView from '../app-loading'
-import YAxis from './y-axis'
-import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
 import HorizontalGrid from './horizontal-grid'
-import AppText from '../app-text'
+import NoData from './no-data'
+import Tutorial from './tutorial'
+import YAxis from './y-axis'
 
 import { connect } from 'react-redux'
 import { navigate } from '../../slices/navigation'
 
 import { getCycleDaysSortedByDate } from '../../db'
 import nothingChanged from '../../db/db-unchanged'
-import { scaleObservable } from '../../local-storage'
-import { makeColumnInfo } from '../helpers/chart'
-
-import config from '../../config'
+import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage'
+import { makeColumnInfo, nfpLines } from '../helpers/chart'
+
+import {
+  CHART_COLUMN_WIDTH,
+  SYMPTOMS,
+  CHART_SYMPTOM_HEIGHT_RATIO,
+  CHART_XAXIS_HEIGHT_RATIO
+} from '../../config'
 import { shared } from '../../i18n/en/labels'
-import styles from './styles'
+import { Colors, Spacing } from '../../styles'
 
 class CycleChart extends Component {
   static propTypes = {
@@ -36,13 +43,37 @@ class CycleChart extends Component {
     this.getFhmAndLtlInfo = nfpLines()
     this.shouldShowTemperatureColumn = false
 
+    this.checkShouldShowHint()
     this.prepareSymptomData()
   }
 
+  componentWillUnmount() {
+    this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
+    this.removeObvListener()
+  }
+
+  checkShouldShowHint = async () => {
+    const flag = await getChartFlag()
+    const shouldShowHint = flag === 'true' ? true : false
+    this.setState({ shouldShowHint })
+  }
+
+  setShouldShowHint = async () => {
+    await setChartFlag()
+    this.setState({ shouldShowHint: false })
+  }
+
+  onLayout = () => {
+    if (this.state.chartHeight) return false
+
+    this.reCalculateChartInfo()
+    this.updateListeners(this.reCalculateChartInfo)
+  }
+
   prepareSymptomData = () => {
-    this.symptomRowSymptoms = config.symptoms.filter((symptomName) => {
+    this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
       return this.cycleDaysSortedByDate.some(cycleDay => {
-        return cycleDay[symptomName]
+        return (symptomName !== 'temperature') && cycleDay[symptomName]
       })
     })
     this.chartSymptoms = [...this.symptomRowSymptoms]
@@ -69,35 +100,23 @@ class CycleChart extends Component {
     )
   }
 
-  reCalculateChartInfo = (nativeEvent) => {
-    const { height, width } = nativeEvent.layout
-    const xAxisCoefficient = this.shouldShowTemperatureColumn ?
-      config.xAxisHeightPercentage : config.xAxisHeightPercentageLarge
-    const symptomCoefficient = this.shouldShowTemperatureColumn ?
-      config.symptomHeightPercentage : config.symptomHeightPercentageLarge
+  reCalculateChartInfo = () => {
+    const { width, height } = Dimensions.get('window')
 
-    this.xAxisHeight = height * xAxisCoefficient
-    const remainingHeight = height - this.xAxisHeight
-    this.symptomHeight = remainingHeight * symptomCoefficient
+    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.columnHeight = remainingHeight - this.symptomRowHeight
     const chartHeight = this.shouldShowTemperatureColumn ?
-      height : (this.symptomRowHeight + this.xAxisHeight)
-
-    const numberOfColumnsToRender = Math.round(width / config.columnWidth)
+      height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)
+    const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
     const columns = makeColumnInfo()
 
     this.setState({ columns, chartHeight, numberOfColumnsToRender })
   }
 
-  onLayout = ({ nativeEvent }) => {
-    if (this.state.chartHeight) return
-
-    this.reCalculateChartInfo(nativeEvent)
-    this.updateListeners(this.reCalculateChartInfo)
-  }
-
   updateListeners(dataUpdateHandler) {
     // remove existing listeners
     if(this.handleDbChange) {
@@ -114,38 +133,47 @@ class CycleChart extends Component {
     this.removeObvListener = scaleObservable(dataUpdateHandler, false)
   }
 
-  componentWillUnmount() {
-    this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
-    this.removeObvListener()
-  }
-
   render() {
-    const { chartHeight, chartLoaded, numberOfColumnsToRender } = this.state
-    const shouldShowChart = this.chartSymptoms.length > 0 ? true : false
+    const {
+      chartHeight,
+      chartLoaded,
+      shouldShowHint,
+      numberOfColumnsToRender
+    } = this.state
+    const hasDataToDisplay = this.chartSymptoms.length > 0
 
     return (
-      <View onLayout={this.onLayout} style={styles.container}>
-        {!shouldShowChart && <NoData navigate={this.props.navigate}/>}
-        {shouldShowChart && !chartHeight && !chartLoaded && <AppLoadingView />}
+      <AppPage
+        contentContainerStyle={styles.pageContainer}
+        onLayout={this.onLayout}
+        scrollViewStyle={styles.page}
+      >
+        {!hasDataToDisplay && <NoData />}
+        {hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
         <View style={styles.chartContainer}>
-          {shouldShowChart && (
+          {shouldShowHint && chartLoaded &&
+            <Tutorial onClose={this.setShouldShowHint} />
+          }
+          {hasDataToDisplay && chartLoaded &&
+            !this.shouldShowTemperatureColumn &&
+            <View style={styles.centerItem}>
+              <AppText style={styles.warning}>
+                {shared.noTemperatureWarning}
+              </AppText>
+            </View>
+          }
+          {hasDataToDisplay && (
             <View style={styles.chartArea}>
 
               {chartHeight && chartLoaded && (
-                <React.Fragment>
-                  <YAxis
-                    height={this.columnHeight}
-                    symptomsToDisplay={this.symptomRowSymptoms}
-                    symptomsSectionHeight={this.symptomRowHeight}
-                    shouldShowTemperatureColumn=
-                      {this.shouldShowTemperatureColumn}
-                    xAxisHeight={this.xAxisHeight}
-                  />
-                  {this.shouldShowTemperatureColumn && (<HorizontalGrid
-                    height={this.columnHeight}
-                    startPosition={this.symptomRowHeight}
-                  />)}
-                </React.Fragment>
+                <YAxis
+                  height={this.columnHeight}
+                  symptomsToDisplay={this.symptomRowSymptoms}
+                  symptomsSectionHeight={this.symptomRowHeight}
+                  shouldShowTemperatureColumn=
+                    {this.shouldShowTemperatureColumn}
+                  xAxisHeight={this.xAxisHeight}
+                />
               )}
 
               {chartHeight &&
@@ -162,27 +190,28 @@ class CycleChart extends Component {
                  onEndReached={() => this.setState({end: true})}
                  ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
                  updateCellsBatchingPeriod={800}
-                 contentContainerStyle={{height: chartHeight}}
+                 contentContainerStyle={{ height: chartHeight }}
                />
               }
+              {chartHeight && chartLoaded && (
+                <React.Fragment>
+                  {this.shouldShowTemperatureColumn &&
+                    <HorizontalGrid height={this.columnHeight} />
+                  }
+                </React.Fragment>
+              )}
             </View>
           )}
         </View>
-        {shouldShowChart && chartLoaded && !this.shouldShowTemperatureColumn
-          && (
-            <View style={styles.centerItem}>
-              <AppText style={{textAlign: 'center'}}>{shared.noTemperatureWarning}</AppText>
-            </View>
-          )}
-      </View>
+      </AppPage>
     )
   }
 }
 
 function LoadingMoreView({ end }) {
   return (
-    <View style={styles.loadingMore}>
-      {!end && <ActivityIndicator size={'large'} color={'white'}/>}
+    <View style={styles.loadingContainer}>
+      {!end && <ActivityIndicator size={'large'} color={Colors.orange}/>}
     </View>
   )
 }
@@ -191,6 +220,29 @@ LoadingMoreView.propTypes = {
   end: PropTypes.bool
 }
 
+const styles = StyleSheet.create({
+  chartArea: {
+    flexDirection: 'row'
+  },
+  chartContainer: {
+    flexDirection: 'column'
+  },
+  loadingContainer: {
+    height: '100%',
+    backgroundColor: Colors.turquoiseLight,
+    justifyContent: 'center'
+  },
+  page: {
+    marginVertical: Spacing.small
+  },
+  pageContainer: {
+    paddingHorizontal: Spacing.base
+  },
+  warning: {
+    padding: Spacing.large
+  }
+})
+
 const mapDispatchToProps = (dispatch) => {
   return({
     navigate: (page) => dispatch(navigate(page)),

components/chart/cycle-day-label.js

 import React from 'react'
 import PropTypes from 'prop-types'
-
-import { Text, View } from 'react-native'
-
+import { StyleSheet, View } from 'react-native'
 import moment from 'moment'
-import { LocalDate } from 'js-joda'
 
-import styles from './styles'
+import AppText from '../common/app-text'
+
 import cycleModule from '../../lib/cycle'
+import { getOrdinalSuffix } from '../helpers/home'
+import { Containers, Typography, Sizes } from '../../styles'
 
 const CycleDayLabel = ({ height, date }) => {
-  const { label } = styles.column
-  const dayDate = LocalDate.parse(date)
   const cycleDayNumber = cycleModule().getCycleDayNumber(date)
+  const cycleDayLabel = cycleDayNumber ? cycleDayNumber : ' '
 
-  const isFirstDayOfMonth = dayDate.dayOfMonth() === 1
-  const dateFormatting = isFirstDayOfMonth ? 'MMM' : 'Do'
-  const shortDate = moment(date, "YYYY-MM-DD").format(dateFormatting)
-  const boldDateLabel = isFirstDayOfMonth ? {fontWeight: 'bold'} : {}
+  const momentDate = moment(date)
+  const dayOfMonth = momentDate.date()
+  const isFirstDayOfMonth = dayOfMonth === 1
 
   return (
-    <View style={[styles.chartLegend, { height }]}>
-      <Text style={label.number}>
-        {cycleDayNumber ? cycleDayNumber : ' '}
-      </Text>
-      <Text style={[label.date, boldDateLabel]}>
-        {shortDate}
-      </Text>
+    <View style={[styles.container, { height }]}>
+      <AppText style={styles.textBold}>{cycleDayLabel}</AppText>
+      <View style={styles.dateLabel}>
+        <AppText style={styles.text}>
+          {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth}
+        </AppText>
+        {!isFirstDayOfMonth &&
+          <AppText style={styles.textLight}>
+            {getOrdinalSuffix(dayOfMonth)}
+          </AppText>
+        }
+      </View>
     </View>
   )
 }
@@ -36,4 +39,30 @@ CycleDayLabel.propTypes = {
   date: PropTypes.string,
 }
 
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'flex-start',
+    justifyContent: 'flex-end',
+    left: 4,
+  },
+  containerRow: {
+    ...Containers.rowContainer
+  },
+  text: {
+    ...Typography.label,
+    fontSize: Sizes.small,
+  },
+  textBold: {
+    ...Typography.labelBold
+  },
+  textLight: {
+    ...Typography.labelLight,
+  },
+  dateLabel: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  }
+})
+
 export default CycleDayLabel

components/chart/day-column.js

@@ -92,10 +92,23 @@ class DayColumn extends Component {
         activeOpacity={1}
       >
 
-        { symptomRowSymptoms.map(symptom => {
+        {shouldShowTemperatureColumn && <TemperatureColumn
+          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
+          isVerticalLine={this.fhmAndLtl.drawFhmLine}
+          data={this.data && this.data.temperature}
+          columnHeight={columnHeight}
+        />}
+
+        <CycleDayLabel
+          height={xAxisHeight}
+          date={dateString}
+        />
+
+        { symptomRowSymptoms.map((symptom, i) => {
           const hasSymptomData = this.data.hasOwnProperty(symptom)
           return (
             <SymptomCell
+              index={i}
               key={symptom}
               symptom={symptom}
               symptomValue={hasSymptomData && this.data[symptom]}
@@ -107,18 +120,6 @@ class DayColumn extends Component {
         }
         )}
 
-        {shouldShowTemperatureColumn && <TemperatureColumn
-          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
-          isVerticalLine={this.fhmAndLtl.drawFhmLine}
-          data={this.data && this.data.temperature}
-          columnHeight={columnHeight}
-        />}
-
-        <CycleDayLabel
-          height={xAxisHeight}
-          date={dateString}
-        />
-
       </TouchableOpacity>
     )
   }

components/chart/dot-and-line.js

@@ -2,8 +2,14 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
-import styles from './styles'
-import config from '../../config'
+import { Colors } from '../../styles'
+
+import {
+  CHART_COLUMN_WIDTH,
+  CHART_COLUMN_MIDDLE,
+  CHART_DOT_RADIUS,
+  CHART_STROKE_WIDTH
+} from '../../config'
 
 export default class DotAndLine extends Component {
   static propTypes = {
@@ -20,48 +26,62 @@ export default class DotAndLine extends Component {
   }
 
   render() {
-    const y = this.props.y
-    const exclude = this.props.exclude
-    let lineToRight
-    let lineToLeft
+    const {
+      exclude,
+      leftTemperatureExclude,
+      leftY,
+      rightTemperatureExclude,
+      rightY,
+      y
+    } = this.props
+    let excludeLeftLine, excludeRightLine, lineLeft, lineRight
 
-    if (this.props.leftY) {
-      const middleY = ((this.props.leftY - y) / 2) + y
-      const excludedLine = this.props.leftTemperatureExclude || exclude
-      lineToLeft = makeLine(y, middleY, 0, excludedLine)
+    if (leftY) {
+      const middleY = ((leftY - y) / 2) + y
+      excludeLeftLine = leftTemperatureExclude || exclude
+      lineLeft = new Path()
+        .moveTo(CHART_COLUMN_MIDDLE, y)
+        .lineTo(0, middleY)
     }
-    if (this.props.rightY) {
-      const middleY = ((y - this.props.rightY) / 2) + this.props.rightY
-      const excludedLine = this.props.rightTemperatureExclude || exclude
-      lineToRight = makeLine(y, middleY, config.columnWidth, excludedLine)
+    if (rightY) {
+      const middleY = ((y - rightY) / 2) + rightY
+      excludeRightLine = rightTemperatureExclude || exclude
+      lineRight = new Path()
+        .moveTo(CHART_COLUMN_MIDDLE, y)
+        .lineTo(CHART_COLUMN_WIDTH, middleY)
     }
 
-    const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
-    const radius = dotStyle.r
-    const dot = (
-      <Shape
-        d={new Path()
-          .moveTo(config.columnMiddle, y - radius)
-          .arc(0, radius * 2, radius)
-          .arc(0, radius * -2, radius)
-        }
-        fill={dotStyle.fill}
-        key='dot'
-      />
+    const dot = new Path().moveTo(CHART_COLUMN_MIDDLE , y - CHART_DOT_RADIUS)
+      .arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
+      .arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
+    const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
+    const lineColorLeft = excludeLeftLine ?
+      Colors.turquoise : Colors.turquoiseDark
+    const lineColorRight = excludeRightLine ?
+      Colors.turquoise : Colors.turquoiseDark
+
+    return(
+      <React.Fragment>
+        <Shape
+          d={lineLeft}
+          stroke={lineColorLeft}
+          strokeWidth={CHART_STROKE_WIDTH}
+          key={y}
+        />
+        <Shape
+          d={lineRight}
+          stroke={lineColorRight}
+          strokeWidth={CHART_STROKE_WIDTH}
+          key={y + CHART_DOT_RADIUS}
+        />
+        <Shape
+          d={dot}
+          stroke={dotColor}
+          strokeWidth={CHART_STROKE_WIDTH}
+          fill="white"
+          key='dot'
+        />
+      </React.Fragment>
     )
-    return [lineToLeft, lineToRight, dot]
   }
 }
-
-function makeLine(currY, middleY, x, excludeLine) {
-  const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
-
-  return <Shape
-    stroke={lineStyle.stroke}
-    d={new Path()
-      .moveTo(config.columnMiddle, currY)
-      .lineTo(x, middleY)
-    }
-    key={x.toString()}
-  />
-}
\ No newline at end of file

components/chart/horizontal-grid.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import { getTickPositions } from '../helpers/chart'
 
-import styles from './styles'
+import { Colors } from '../../styles'
+import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_YAXIS_WIDTH } from '../../config'
 
-const HorizontalGrid = ({ height, startPosition }) => {
+const HorizontalGrid = ({ height }) => {
   return getTickPositions(height).map(tick => {
     return (
-      <View
-        top={startPosition + tick}
-        {...styles.horizontalGrid}
-        key={tick}
-      />
+      <View key={tick} top={tick} {...styles.line}/>
     )
   })
 }
 
 HorizontalGrid.propTypes = {
-  height: PropTypes.number,
-  startPosition: PropTypes.number,
+  height: PropTypes.number
 }
 
+const styles = StyleSheet.create({
+  line: {
+    borderStyle: 'solid',
+    borderBottomColor: Colors.grey,
+    borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+    left: CHART_YAXIS_WIDTH,
+    position:'absolute',
+    right: 0
+  }
+})
+
 export default HorizontalGrid

components/chart/nfp-lines.js

-import { getCycleStatusForDay } from '../../lib/sympto-adapter'
-import { normalizeToScale } from '../helpers/chart'
-
-export default function () {
-  const cycle = {
-    status: null
-  }
-
-  function updateCurrentCycle(dateString) {
-    // for the NFP lines, we don't care about potentially extending the
-    // preOvu phase, so we don't include all earlier cycles, as that is
-    // an expensive db operation at the moment
-    cycle.status = getCycleStatusForDay(
-      dateString, { excludeEarlierCycles: true }
-    )
-    if(!cycle.status) {
-      cycle.noMoreCycles = true
-      return
-    }
-    if (cycle.status.phases.preOvulatory) {
-      cycle.startDate = cycle.status.phases.preOvulatory.start.date
-    } else {
-      cycle.startDate = cycle.status.phases.periOvulatory.start.date
-    }
-  }
-
-  function dateIsInPeriOrPostPhase(dateString) {
-    return (
-      dateString >= cycle.status.phases.periOvulatory.start.date
-    )
-  }
-
-  function precededByAnotherTempValue(dateString) {
-    return (
-      // we are only interested in days that have a preceding
-      // temp
-      Object.keys(cycle.status.phases).some(phaseName => {
-        return cycle.status.phases[phaseName].cycleDays.some(day => {
-          return day.temperature && day.date < dateString
-        })
-      })
-      // and also a following temp, so we don't draw the line
-      // longer than necessary
-      &&
-      cycle.status.phases.postOvulatory.cycleDays.some(day => {
-        return day.temperature && day.date > dateString
-      })
-    )
-  }
-
-  function isInTempMeasuringPhase(temperature, dateString) {
-    return (
-      temperature || precededByAnotherTempValue(dateString)
-    )
-  }
-
-  return function(dateString, temperature, columnHeight) {
-    const ret = {
-      drawLtlAt: null,
-      drawFhmLine: false
-    }
-    if (!cycle.status && !cycle.noMoreCycles) updateCurrentCycle(dateString)
-    if (cycle.noMoreCycles) return ret
-
-    if (dateString < cycle.startDate) updateCurrentCycle(dateString)
-    if (cycle.noMoreCycles) return ret
-
-    const tempShift = cycle.status.temperatureShift
-
-    if (tempShift) {
-      if (tempShift.firstHighMeasurementDay.date === dateString) {
-        ret.drawFhmLine = true
-      }
-
-      if (
-        dateIsInPeriOrPostPhase(dateString) &&
-        isInTempMeasuringPhase(temperature, dateString)
-      ) {
-        ret.drawLtlAt = normalizeToScale(tempShift.ltl, columnHeight)
-      }
-    }
-
-    return ret
-  }
-}
\ No newline at end of file

components/chart/no-data.js

 import React from 'react'
+import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
 
-import AppText from '../app-text'
-import SettingsButton from '../settings/shared/settings-button'
+import AppText from '../common/app-text'
+import Button from '../common/button'
 
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { Containers } from '../../styles'
 import { shared } from '../../i18n/en/labels'
-import styles from './styles'
 
 const NoData = ({ navigate }) => {
   return (
-    <View flex={1}>
-      <View style={styles.centerItem}>
-        <AppText>{shared.noDataWarning}</AppText>
-        <SettingsButton
-          onPress={() => {navigate('CycleDay')}}
-          style={{marginHorizontal: 40}}
-        >
-          {shared.noDataButtonText}
-        </SettingsButton>
-      </View>
+    <View style={styles.container}>
+      <AppText>{shared.noDataWarning}</AppText>
+      <Button isCTA onPress={() => {navigate('CycleDay')}}>
+        {shared.noDataButtonText}
+      </Button>
     </View>
   )
 }
 
 NoData.propTypes = {
-  navigate: PropTypes.func,
+  navigate: PropTypes.func.isRequired,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.centerItems
+  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
 }
 
-export default NoData
+export default connect(
\ No newline at end of file
+  null,
+  mapDispatchToProps,
+)(NoData)
\ No newline at end of file

components/chart/symptom-cell.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
-import styles from './styles'
-import config from '../../config'
+import { Colors, Containers } from '../../styles'
+import {
+  CHART_COLUMN_WIDTH,
+  CHART_DOT_RADIUS,
+  CHART_GRID_LINE_HORIZONTAL_WIDTH
+} from '../../config'
 
 const SymptomCell = ({
   height,
+  index,
   symptom,
   symptomValue,
   isSymptomDataComplete
 }) => {
 
   const shouldDrawDot = symptomValue !== false
-  const styleParent = [styles.symptomRow, { height, width: config.columnWidth }]
-  let styleChild
+  const styleCell = index !== 0
+    ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
+    : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
+  let styleDot
 
   if (shouldDrawDot) {
-    const styleSymptom = styles.iconColors[symptom]
+    const styleSymptom = Colors.iconColors[symptom]
     const symptomColor = styleSymptom.shades[symptomValue]
-
     const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
-
     const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
       'white' : symptomColor
     const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
     const borderColor = symptomColor
-    styleChild = [styles.symptomDot, {
-      backgroundColor,
-      borderColor,
-      borderWidth
-    }]
+    styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
   }
 
   return (
-    <View style={styleParent} key={symptom}>
-      {shouldDrawDot && <View style={styleChild} />}
+    <View style={styleCell} key={symptom}>
+      {shouldDrawDot && <View style={styleDot} />}
     </View>
   )
 }
 
 SymptomCell.propTypes = {
   height: PropTypes.number,
+  index: PropTypes.number.isRequired,
   symptom: PropTypes.string,
   symptomValue: PropTypes.oneOfType([
     PropTypes.bool,
@@ -50,4 +52,23 @@ SymptomCell.propTypes = {
   isSymptomDataComplete: PropTypes.bool,
 }
 
+const styles = StyleSheet.create({
+  cell: {
+    backgroundColor: 'white',
+    borderBottomColor: Colors.grey,
+    borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+    borderLeftColor: Colors.grey,
+    borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+    ...Containers.centerItems
+  },
+  topBorder: {
+    borderTopColor: Colors.grey,
+    borderTopWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+  },
+  dot: {
+    width: CHART_DOT_RADIUS * 2,
+    height: CHART_DOT_RADIUS * 2,
+    borderRadius: 50
+  }
+})
 export default SymptomCell

components/chart/symptom-icon.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
+import { StyleSheet , View } from 'react-native'
 
 import DripIcon from '../../assets/drip-icons'
 
-import styles from './styles'
+import { Colors, Containers } from '../../styles'
+import { CHART_YAXIS_WIDTH, CHART_ICON_SIZE } from '../../config'
 
 const SymptomIcon = ({ symptom, height }) => {
   return (
-    <View style={styles.symptomIcon} width={styles.yAxis.width} height={height}>
+    <View style={styles.container} width={CHART_YAXIS_WIDTH} height={height}>
       <DripIcon
-        size={16}
+        size={CHART_ICON_SIZE}
         name={`drip-icon-${symptom}`}
-        color={styles.iconColors[symptom].color}
+        color={Colors.iconColors[symptom].color}
       />
     </View>
   )
@@ -23,4 +24,10 @@ SymptomIcon.propTypes = {
   symptom: PropTypes.string,
 }
 
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.centerItems
+  }
+})
+
 export default SymptomIcon

components/chart/temperature-column.js

 import React from 'react'
 import PropTypes from 'prop-types'
+import { StyleSheet } from 'react-native'
 
 import { Surface , Path } from 'react-native/Libraries/ART/ReactNativeART'
 
 import ChartLine from './chart-line'
 import DotAndLine from './dot-and-line'
 
-import styles from './styles'
-import config from '../../config'
+import { CHART_COLUMN_WIDTH, CHART_STROKE_WIDTH } from '../../config'
 
 const TemperatureColumn = ({
   horizontalLinePosition,
@@ -15,20 +15,21 @@ const TemperatureColumn = ({
   data,
   columnHeight
 }) => {
-
-  const x = styles.nfpLine.strokeWidth / 2
+  const x = CHART_STROKE_WIDTH / 2
 
   return (
-    <Surface width={config.columnWidth} height={columnHeight}>
+    <Surface
+      width={CHART_COLUMN_WIDTH}
+      height={columnHeight}
+      style={styles.container}
+    >
 
-      <ChartLine
-        path={new Path().lineTo(0, columnHeight)}
-      />
+      <ChartLine path={new Path().lineTo(0, columnHeight)}/>
 
       {horizontalLinePosition && <ChartLine
         path={new Path()
           .moveTo(0, horizontalLinePosition)
-          .lineTo(config.columnWidth, horizontalLinePosition)
+          .lineTo(CHART_COLUMN_WIDTH, horizontalLinePosition)
         }
         isNfpLine={true}
         key='ltl'
@@ -40,7 +41,7 @@ const TemperatureColumn = ({
         key='fhm'
       />}
 
-      {data && data.y && <DotAndLine
+      {data && typeof(data.y) !== 'undefined' && <DotAndLine
         y={data.y}
         exclude={data.temperatureExclude}
         rightY={data.rightY}
@@ -61,4 +62,10 @@ TemperatureColumn.propTypes = {
   columnHeight: PropTypes.number,
 }
 
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white'
+  }
+})
+
 export default TemperatureColumn

components/chart/tick-list.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import Tick from './tick'
 
 import { getTickList } from '../helpers/chart'
 
-import styles from './styles'
-
 const TickList = ({ height }) => {
+
   return (
-    <View style={[styles.yAxis, { height }]}>{
-      getTickList(height)
-        .map(({ label, position, isBold, shouldShowLabel}) => {
-          return (
-            <Tick
-              key={label}
-              yPosition={position}
-              isBold={isBold}
-              shouldShowLabel={shouldShowLabel}
-              label={label}
-            />
-          )
-        })
-    }</View>
+    <View style={[styles.container, height]}>
+      {
+        getTickList(height)
+          .map(({ isBold, label, position, shouldShowLabel, tickHeight}) => {
+            return (
+              <Tick
+                height={tickHeight}
+                isBold={isBold}
+                key={label}
+                label={label}
+                shouldShowLabel={shouldShowLabel}
+                yPosition={position}
+              />
+            )
+          })
+      }
+    </View>
   )
 }
 
@@ -31,4 +33,10 @@ TickList.propTypes = {
   height: PropTypes.number,
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})
+
 export default TickList

components/chart/tick.js

 import React from 'react'
+import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import AppText from '../app-text'
+import AppText from '../common/app-text'
 
-import styles from './styles'
+import { Sizes } from '../../styles'
 
-const Tick = ({ yPosition, isBold, shouldShowLabel, label }) => {
-  // this eyeballing is sadly necessary because RN does not
-  // support percentage values for transforms, which we'd need
-  // to reliably place the label vertically centered to the grid
-  const topPosition = yPosition - 8
-  const style = [
-    styles.yAxisLabels.tempScale,
-    {top: topPosition},
-    isBold && styles.boldTick
-  ]
+const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
+  const top = yPosition - height / 2
+  const containerStyle = [ styles.container, { flexBasis: height, height, top }]
+  const textStyle = isBold ? styles.textBold : styles.textNormal
 
-  return <AppText style={style}>{shouldShowLabel && label}</AppText>
+  return(
+    <View style={containerStyle}>
+      <AppText style={textStyle}>{shouldShowLabel && label}</AppText>
+    </View>
+  )
 }
 
 Tick.propTypes = {
   yPosition: PropTypes.number,
+  height: PropTypes.number.isRequired,
   isBold: PropTypes.bool,
   shouldShowLabel: PropTypes.bool,
   label: PropTypes.string,
 }
 
+
+const text = {
+  lineHeight: Sizes.base,
+  right: 4,
+  textAlign: 'right'
+}
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    position: 'absolute',
+    right: 0,
+    width: 40
+  },
+  textBold: {
+    fontSize: Sizes.base,
+    fontWeight: 'bold',
+    ...text
+  },
+  textNormal: {
+    fontSize: Sizes.small,
+    ...text
+  }
+})
+
 export default Tick

components/chart/tutorial.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import { Image, StyleSheet, View } from 'react-native'
+
+import AppText from '../common/app-text'
+import CloseIcon from '../common/close-icon'
+
+import { Containers, Spacing } from '../../styles'
+import { chart } from '../../i18n/en/labels'
+
+const image = require('../../assets/swipe.png')
+
+const Tutorial = ({ onClose }) => {
+  return (
+    <View style={styles.container}>
+      <Image resizeMode='contain' source={image} style={styles.image} />
+      <View style={styles.textContainer}>
+        <AppText>{chart.tutorial}</AppText>
+      </View>
+      <CloseIcon onClose={onClose} />
+    </View>
+  )
+}
+
+Tutorial.propTypes = {
+  onClose: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer,
+    padding: Spacing.large
+  },
+  image: {
+    height: 40
+  },
+  textContainer: {
+    width: '70%'
+  }
+})
+
+export default Tutorial
\ No newline at end of file

components/chart/y-axis.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import SymptomIcon from './symptom-icon'
 import TickList from './tick-list'
 import ChartLegend from './chart-legend'
 
-import styles from './styles'
+import { CHART_YAXIS_WIDTH } from '../../config'
 
 const YAxis = ({
   height,
@@ -19,6 +19,8 @@ const YAxis = ({
 
   return (
     <View>
+      {shouldShowTemperatureColumn && <TickList height={height} />}
+      <ChartLegend height={xAxisHeight} />
       <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
         {symptomsToDisplay.map(symptom => (
           <SymptomIcon
@@ -29,8 +31,6 @@ const YAxis = ({
         )
         )}
       </View>
-      {shouldShowTemperatureColumn && <TickList height={height} />}
-      <ChartLegend xAxisHeight={xAxisHeight} />
     </View>
   )
 }
@@ -43,4 +43,10 @@ YAxis.propTypes = {
   xAxisHeight: PropTypes.number.isRequired
 }
 
+const styles = StyleSheet.create({
+  yAxis: {
+    width: CHART_YAXIS_WIDTH
+  }
+})
+
 export default YAxis