Redesign chart

components/chart/symptom-cell.js

@@ -1,9 +1,13 @@
 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/redesign'
+import {
+  CHART_COLUMN_WIDTH,
+  CHART_DOT_RADIUS,
+  CHART_GRID_LINE_HORIZONTAL_WIDTH
+} from '../../config'
 
 const SymptomCell = ({
   height,
@@ -13,29 +17,23 @@ const SymptomCell = ({
 }) => {
 
   const shouldDrawDot = symptomValue !== false
-  const styleParent = [styles.symptomRow, { height, width: config.columnWidth }]
-  let styleChild
+  const styleCell = [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
+  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>
   )
 }
@@ -50,4 +48,17 @@ SymptomCell.propTypes = {
   isSymptomDataComplete: PropTypes.bool,
 }
 
+const styles = StyleSheet.create({
+  cell: {
+    backgroundColor: 'white',
+    borderColor: Colors.greyLight,
+    borderWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+    ...Containers.centerItems
+  },
+  dot: {
+    width: CHART_DOT_RADIUS * 2,
+    height: CHART_DOT_RADIUS * 2,
+    borderRadius: 50
+  }
+})
 export default SymptomCell