Blood drop!

components/chart.js

@@ -6,7 +6,8 @@ import Svg,{
   Rect,
   Text,
   Circle,
-  Line
+  Line,
+  Path
 } from 'react-native-svg'
 import { LocalDate } from 'js-joda'
 import { getCycleDay, getOrCreateCycleDay, cycleDaysSortedByDate } from '../db'
@@ -53,7 +54,13 @@ export default class CycleChart extends Component {
         <Text {...labelProps} y={config.cycleDayNumberRowY}>{cycleDayNumber}</Text>
         <Text {...labelProps} y={config.dateRowY}>{dateLabel}</Text>
 
-        {cycleDay && cycleDay.bleeding ? <Circle {...styles.bleedingIcon} /> : null}
+        {cycleDay && cycleDay.bleeding ?
+          <Path {...styles.bleedingIcon}
+            d="M15 3
+              Q16.5 6.8 25 18
+              A12.8 12.8 0 1 1 5 18
+              Q13.5 6.8 15 3z" />
+          : null}
 
         {y ? this.drawDotAndLines(y, index) : null}
       </G>

components/styles.js

@@ -2,12 +2,12 @@ import config from './config'
 
 const styles = {
   curve: {
-    stroke: 'lightseagreen',
+    stroke: '#ffc425',
     strokeWidth: 2
   },
   curveDots: {
-    fill: 'darkblue',
-    r: 4
+    fill: '#00aedb',
+    r: 6
   },
   column: {
     label: {
@@ -16,7 +16,7 @@ const styles = {
       x: 0
     },
     rect: {
-      fill: 'lightgrey',
+      fill: '#f9f9f9',
       strokeWidth: 1,
       stroke: 'grey',
       x: 0,
@@ -26,10 +26,10 @@ const styles = {
     }
   },
   bleedingIcon: {
-    cx: config.columnMiddle,
-    cy: 50,
-    r: 7,
-    fill: 'red'
+    fill: '#fb2e01',
+    scale: 0.6,
+    x: 7,
+    y: 3
   }
 }