uses cycle day symbol in chart and corresponding color

assets/home-circle.js

@@ -1,16 +1,14 @@
 import React from 'react'
-import Svg, { G, Path } from 'react-native-svg'
+import { G, Path } from 'react-native-svg'
 
-export default function HomeCycleIcon() {
+export default function CycleDayIcon() {
   return (
-    <Svg width={80} height={80} viewBox='340 345 170 170'>
     <G>
-        <Path fill="none" stroke="#1E0B7A" strokeWidth="2" d="M379.708,350.568
+      <Path d="M379.708,350.568
 		C356.431,365.455,341,391.529,341,421.21c0,46.275,37.515,83.79,83.791,83.79s83.79-37.515,83.79-83.79
 		c0-31.784-17.696-59.436-43.773-73.637"/>
-        <Path fill="none" stroke="#1E0B7A" strokeWidth="2" d="M383.809,369.885v-18.398
+      <Path d="M383.809,369.885v-18.398
 		c0,0,0-4.843-4.842-4.843h-18.399"/>
     </G>
-    </Svg>
   )
 }

components/chart/chart.js

@@ -19,6 +19,7 @@ import MucusIcon from '../../assets/mucus'
 import NoteIcon from '../../assets/note'
 import PainIcon from '../../assets/pain'
 import SexIcon from '../../assets/sex'
+import CycleDayIcon from '../../assets/home-circle'
 import nothingChanged from '../../db/db-unchanged'
 
 export default class CycleChart extends Component {
@@ -166,13 +167,16 @@ export default class CycleChart extends Component {
             <View style={[styles.yAxis, {height: this.columnHeight}]}>
               {makeYAxisLabels(this.columnHeight)}
             </View>
-            <View style={[styles.yAxis, {height: this.xAxisHeight}]}>
-              <AppText style = {[
-                styles.column.label.number,
-                styles.yAxisLabels.cycleDayLabel
-              ]}>
-                {labels.cycleDayWithLinebreak}
-              </AppText>
+            <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
+              <Svg
+                width={styles.yAxis.width * 0.7}
+                height={styles.yAxis.width * 0.7}
+                viewBox='325 330 185 185'
+              >
+                <G fill="none" stroke="#1E0B7A" strokeWidth="10">
+                  <CycleDayIcon/>
+                </G>
+              </Svg>
               <AppText style={[
                 styles.column.label.date,
                 styles.yAxisLabels.dateLabel

components/chart/styles.js

@@ -1,5 +1,5 @@
 import config from '../../config'
-import {primaryColor, shadesOfRed} from '../../styles/index'
+import { shadesOfRed, cycleDayColor } from '../../styles/index'
 
 const colorTemperature = '#765285'
 const colorTemperatureLight = '#a67fb5'
@@ -36,7 +36,7 @@ const styles = {
         textAlign: 'center',
       },
       number: {
-        color: primaryColor,
+        color: cycleDayColor,
         fontSize: numberLabelFontSize,
         textAlign: 'center',
       }

components/home.js

@@ -2,9 +2,10 @@ import React, { Component } from 'react'
 import { ScrollView, View, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
 import Icon from 'react-native-vector-icons/Entypo'
+import Svg, { G } from 'react-native-svg'
 import { secondaryColor, cycleDayColor, periodColor } from '../styles'
 import { home as labels, bleedingPrediction as predictLabels, shared } from './labels'
-import CycleCircle from '../assets/home-circle'
+import CycleDayIcon from '../assets/home-circle'
 import Drop from '../assets/home-drop'
 import cycleModule from '../lib/cycle'
 import { getOrCreateCycleDay, getCycleDaysSortedByDate } from '../db'
@@ -74,7 +75,15 @@ export default class Home extends Component {
               style={styles.homeIconElement}
             >
               <View position='absolute'>
-                <CycleCircle/>
+                <Svg
+                  width={80}
+                  height={80}
+                  viewBox='340 345 170 170'
+                >
+                  <G fill="none" stroke="#1E0B7A" strokeWidth="2">
+                    <CycleDayIcon/>
+                  </G>
+                </Svg>
               </View>
               <View style={[styles.homeIconTextWrapper, styles.wrapperCycle]}>
                 <AppTextLight style={styles.iconText}>