From a205f432ed624542a491ba4d82a7ca34a30c2312 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Mon, 25 Jun 2018 16:36:37 +0200
Subject: [PATCH] Style x axis labels a bit nicer

---
 components/chart.js  |  6 +++---
 components/styles.js | 13 ++++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/chart.js b/components/chart.js
index 3d03bcc..c0089a4 100644
--- a/components/chart.js
+++ b/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}
diff --git a/components/styles.js b/components/styles.js
index 41db641..5cdb789 100644
--- a/components/styles.js
+++ b/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',