Style x axis labels a bit nicer

components/chart.js

@@ -45,14 +45,14 @@ export default class CycleChart extends Component {
 
   makeDayColumn({ dateString, cycleDay, y }, index) {
     const cycleDayNumber = getCycleDayNumber(dateString)
-    const labelProps = styles.column.label
+    const label = styles.column.label
     const dateLabel = dateString.split('-').slice(1).join('-')
 
     return (
       <G key={dateString} onPress={() => this.passDateToDayView(dateString)}>
         <Rect {...styles.column.rect} />
-        <Text {...labelProps} y={config.cycleDayNumberRowY}>{cycleDayNumber}</Text>
-        <Text {...labelProps} y={config.dateRowY}>{dateLabel}</Text>
+        <Text {...label.number} y={config.cycleDayNumberRowY}>{cycleDayNumber}</Text>
+        <Text {...label.date} y={config.dateRowY}>{dateLabel}</Text>
 
         {cycleDay && cycleDay.bleeding ?
           <Path {...styles.bleedingIcon}

components/styles.js

@@ -11,9 +11,16 @@ const styles = {
   },
   column: {
     label: {
-      stroke: 'grey',
-      fontSize: 10,
-      x: 0
+      date: {
+        stroke: 'grey',
+        fontSize: 10,
+        x: 2
+      },
+      number: {
+        stroke: 'purple',
+        fontSize: 13,
+        x: config.columnMiddle - 1
+      }
     },
     rect: {
       fill: '#f9f9f9',