changes y-ticks and labels, cycle day display and colors of symbols

components/chart/styles.js

@@ -1,26 +1,33 @@
 import config from '../../config'
+import {primaryColor, shadesOfRed} from '../../styles/index'
+
+const colorTemperatur = '#765285'
+const colorTemperaturLight = '#a67fb5'
+const dotWidth = 10
+const lineWidth = 2
+const colorLtl = '#feb47b'
 
 const styles = {
   curve: {
     borderStyle: 'solid',
-    borderColor: '#ffc425',
-    borderWidth: 2,
+    borderColor: colorTemperatur,
+    borderWidth: lineWidth,
   },
   curveExcluded: {
-    borderColor: 'lightgrey',
-    borderWidth: 2,
-    borderStyle: 'solid'
+    borderColor: colorTemperaturLight,
+    borderWidth: lineWidth,
+    borderStyle: 'dotted'
   },
   curveDots: {
-    backgroundColor: '#00aedb',
-    width: 12,
-    height: 12,
+    backgroundColor: colorTemperatur,
+    width: dotWidth,
+    height: dotWidth,
     borderRadius: 50
   },
   curveDotsExcluded: {
-    backgroundColor: 'lightgrey',
-    width: 12,
-    height: 12,
+    backgroundColor: colorTemperaturLight,
+    width: dotWidth,
+    height: dotWidth,
     borderRadius: 50
   },
   column: {
@@ -31,7 +38,7 @@ const styles = {
         fontWeight: '100'
       },
       number: {
-        color: '#00b159',
+        color: primaryColor,
         fontSize: 13,
         textAlign: 'center'
       }
@@ -49,17 +56,18 @@ const styles = {
     x: 6,
     y: 3
   },
+  bleedingIconShades: shadesOfRed,
   mucusIcon: {
     width: 12,
     height: 12,
     borderRadius: 50,
   },
   mucusIconShades: [
-    '#cc99cc',
-    '#bf7fbf',
-    '#b266b2',
-    '#a64ca6',
-    '#993299'
+    '#fef0e4',
+    '#fee1ca',
+    '#fed2af',
+    '#fec395',
+    '#feb47b'
   ],
   yAxis: {
     width: config.columnWidth,
@@ -83,8 +91,8 @@ const styles = {
     left: config.columnWidth
   },
   nfpLine: {
-    borderColor: '#00b159',
-    borderWidth: 2,
+    borderColor: colorLtl,
+    borderWidth: lineWidth,
     borderStyle: 'solid'
   },
   symptomRow: {