From e9ebde9162f8efad12cb0cee2e3f0588a2d1a773 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Wed, 12 Sep 2018 18:01:01 +0200
Subject: [PATCH 1/3] makes stats beautiful

---
 components/labels.js |  9 +++++++--
 components/stats.js  | 26 ++++++++++++++++----------
 styles/index.js      | 20 ++++++++++++++++----
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/components/labels.js b/components/labels.js
index c4c9cba..c61a939 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -68,10 +68,15 @@ export const headerTitles = {
 }
 
 export const stats = {
+  cycleLengthTitle: 'Cycle length',
+  cycleLengthExplainer: 'Basic statistics about the length of your cycles.',
   emptyStats: 'At least one completed cycle is needed to present you with stats here.',
-  oneCycleStats: (number) => `You have documented one cycle of ${number} days.`,
-  getBasisOfStats: (numberOfCycles) => `Stats are based on ${numberOfCycles} completed cycles.`,
+  //oneCycleStats: (number) => `You have documented one cycle of ${number} days.`,
+  oneCycleStats: 'You have documented one cycle of',
   daysLabel: 'days',
+  //getBasisOfStats: (numberOfCycles) => `Stats are based on ${numberOfCycles} completed cycles.`,
+  basisOfStatsBeginning: 'Stats are based on',
+  basisOfStatsEnd: 'completed cycles.',
   averageLabel: 'Average cycle length',
   minLabel: 'Shortest cycle',
   maxLabel: 'Longest cycle',
diff --git a/components/stats.js b/components/stats.js
index b868e63..c1e4475 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -26,22 +26,23 @@ export default class Stats extends Component {
     }
     return (
       <ScrollView>
-        <View>
+        <View style={styles.appHorizontalMargin}>
+          <AppText style={styles.appTextTitle}>{labels.cycleLengthTitle}</AppText>
+          <AppText style={styles.appBottomMargin}>{labels.cycleLengthExplainer}</AppText>
           {!atLeastOneCycle &&
-            <AppText style={styles.statsIntro}>{labels.emptyStats}</AppText>
+            <AppText>{labels.emptyStats}</AppText>
           }
           {atLeastOneCycle && numberOfCycles === 1 &&
-            <AppText style={styles.statsIntro}>
-              {labels.oneCycleStats(cycleLengths[0])}
+            <AppText>
+              {labels.oneCycleStats}
+              <AppText style={styles.appTextEmphasis}> {cycleLengths[0]} </AppText>
+              {labels.daysLabel + '.'}
             </AppText>
           }
           {atLeastOneCycle && numberOfCycles > 1 && <View>
-            <AppText style={styles.statsIntro}>
-              {labels.getBasisOfStats(numberOfCycles)}
-            </AppText>
             <View style={styles.statsRow}>
-              <AppText style={styles.statsLabelLeft}>{labels.averageLabel}</AppText>
-              <AppText style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
+              <AppText style={[styles.statsLabelLeft, styles.appTextEmphasis]}>{labels.averageLabel}</AppText>
+              <AppText style={[styles.statsLabelRight, styles.appTextEmphasis]}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
               <AppText style={styles.statsLabelLeft}>{labels.minLabel}</AppText>
@@ -51,10 +52,15 @@ export default class Stats extends Component {
               <AppText style={styles.statsLabelLeft}>{labels.maxLabel}</AppText>
               <AppText style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
             </View>
-            <View style={styles.statsRow}>
+            <View style={[styles.statsRow, styles.appBottomMargin]}>
               <AppText style={styles.statsLabelLeft}>{labels.stdLabel}</AppText>
               <AppText style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
             </View>
+            <AppText>
+              {labels.basisOfStatsBeginning}
+              <AppText style={styles.appTextEmphasis}> {numberOfCycles} </AppText>
+              {labels.basisOfStatsEnd}
+            </AppText>
           </View>}
         </View>
       </ScrollView>
diff --git a/styles/index.js b/styles/index.js
index 2108476..73d4b12 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -8,6 +8,20 @@ export default StyleSheet.create({
   appText: {
     color: 'black'
   },
+  appTextEmphasis: {
+    fontWeight: 'bold',
+  },
+  appTextTitle: {
+    fontSize: 18,
+    color: 'black',
+    marginBottom: 5,
+  },
+  appHorizontalMargin: {
+    marginHorizontal: 10,
+  },
+  appBottomMargin: {
+    marginBottom: 5
+  },
   welcome: {
     fontSize: 20,
     margin: 30,
@@ -137,12 +151,12 @@ export default StyleSheet.create({
   symptomEditButton: {
     width: 130
   },
-  statsIntro: {
+  /*statsIntro: {
     fontSize: 18,
     margin: 10,
     textAlign: 'left',
     textAlignVertical: 'center'
-  },
+  },*/
   settingsSegment: {
     backgroundColor: 'lightgrey',
     padding: 10,
@@ -165,14 +179,12 @@ export default StyleSheet.create({
     width: '100%'
   },
   statsLabelLeft: {
-    fontSize: 18,
     width: '60%',
     textAlign: 'left',
     textAlignVertical: 'center',
     marginLeft: 10
   },
   statsLabelRight: {
-    fontSize: 18,
     textAlign: 'left',
     textAlignVertical: 'center'
   },

From 94d991d86890bbebb3a3f8c031c8ebaed2251d53 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Wed, 12 Sep 2018 18:31:18 +0200
Subject: [PATCH 2/3] little improvements to view styling

---
 components/stats.js | 2 +-
 styles/index.js     | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/stats.js b/components/stats.js
index c1e4475..d7e6e3b 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -26,7 +26,7 @@ export default class Stats extends Component {
     }
     return (
       <ScrollView>
-        <View style={styles.appHorizontalMargin}>
+        <View style={[styles.appHorizontalMargin, styles.appVerticalMargin]}>
           <AppText style={styles.appTextTitle}>{labels.cycleLengthTitle}</AppText>
           <AppText style={styles.appBottomMargin}>{labels.cycleLengthExplainer}</AppText>
           {!atLeastOneCycle &&
diff --git a/styles/index.js b/styles/index.js
index 73d4b12..49d5f32 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -16,6 +16,9 @@ export default StyleSheet.create({
     color: 'black',
     marginBottom: 5,
   },
+  appVerticalMargin: {
+    marginTop: 10,
+  },
   appHorizontalMargin: {
     marginHorizontal: 10,
   },
@@ -29,7 +32,7 @@ export default StyleSheet.create({
     textAlignVertical: 'center'
   },
   dateHeader: {
-    fontSize: 18,
+    fontSize: 22,
     fontWeight: 'bold',
     color: fontOnPrimaryColor,
     textAlign: 'center',

From 163f6b5738cf3f7d18e2493bcabc8450d87609e0 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Fri, 14 Sep 2018 12:26:11 +0200
Subject: [PATCH 3/3] little improvements after review

---
 components/stats.js | 16 ++++++++--------
 styles/index.js     | 30 +++++++++++++-----------------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/components/stats.js b/components/stats.js
index d7e6e3b..897a1dd 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -26,23 +26,23 @@ export default class Stats extends Component {
     }
     return (
       <ScrollView>
-        <View style={[styles.appHorizontalMargin, styles.appVerticalMargin]}>
-          <AppText style={styles.appTextTitle}>{labels.cycleLengthTitle}</AppText>
-          <AppText style={styles.appBottomMargin}>{labels.cycleLengthExplainer}</AppText>
+        <View style={[styles.textWrappingView]}>
+          <AppText style={styles.title}>{labels.cycleLengthTitle}</AppText>
+          <AppText style={styles.paragraph}>{labels.cycleLengthExplainer}</AppText>
           {!atLeastOneCycle &&
             <AppText>{labels.emptyStats}</AppText>
           }
           {atLeastOneCycle && numberOfCycles === 1 &&
             <AppText>
               {labels.oneCycleStats}
-              <AppText style={styles.appTextEmphasis}> {cycleLengths[0]} </AppText>
+              <AppText style={styles.emphasis}> {cycleLengths[0]} </AppText>
               {labels.daysLabel + '.'}
             </AppText>
           }
           {atLeastOneCycle && numberOfCycles > 1 && <View>
             <View style={styles.statsRow}>
-              <AppText style={[styles.statsLabelLeft, styles.appTextEmphasis]}>{labels.averageLabel}</AppText>
-              <AppText style={[styles.statsLabelRight, styles.appTextEmphasis]}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
+              <AppText style={[styles.statsLabelLeft, styles.emphasis]}>{labels.averageLabel}</AppText>
+              <AppText style={[styles.statsLabelRight, styles.emphasis]}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
               <AppText style={styles.statsLabelLeft}>{labels.minLabel}</AppText>
@@ -52,13 +52,13 @@ export default class Stats extends Component {
               <AppText style={styles.statsLabelLeft}>{labels.maxLabel}</AppText>
               <AppText style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
             </View>
-            <View style={[styles.statsRow, styles.appBottomMargin]}>
+            <View style={[styles.statsRow, styles.paragraph]}>
               <AppText style={styles.statsLabelLeft}>{labels.stdLabel}</AppText>
               <AppText style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
             </View>
             <AppText>
               {labels.basisOfStatsBeginning}
-              <AppText style={styles.appTextEmphasis}> {numberOfCycles} </AppText>
+              <AppText style={styles.emphasis}> {numberOfCycles} </AppText>
               {labels.basisOfStatsEnd}
             </AppText>
           </View>}
diff --git a/styles/index.js b/styles/index.js
index 49d5f32..e90cac2 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -4,26 +4,28 @@ export const primaryColor = '#ff7e5f'
 export const secondaryColor = '#351c4d'
 export const fontOnPrimaryColor = 'white'
 
+const defaultBottomMargin = 5
+const defaultIndentation = 10
+const defaultTopMargin = 10
+
 export default StyleSheet.create({
   appText: {
     color: 'black'
   },
-  appTextEmphasis: {
+  paragraph: {
+    marginBottom: defaultBottomMargin
+  },
+  emphasis: {
     fontWeight: 'bold',
   },
-  appTextTitle: {
+  title: {
     fontSize: 18,
     color: 'black',
-    marginBottom: 5,
+    marginBottom: defaultBottomMargin,
   },
-  appVerticalMargin: {
-    marginTop: 10,
-  },
-  appHorizontalMargin: {
-    marginHorizontal: 10,
-  },
-  appBottomMargin: {
-    marginBottom: 5
+  textWrappingView: {
+    marginHorizontal: defaultIndentation,
+    marginTop: defaultTopMargin
   },
   welcome: {
     fontSize: 20,
@@ -154,12 +156,6 @@ export default StyleSheet.create({
   symptomEditButton: {
     width: 130
   },
-  /*statsIntro: {
-    fontSize: 18,
-    margin: 10,
-    textAlign: 'left',
-    textAlignVertical: 'center'
-  },*/
   settingsSegment: {
     backgroundColor: 'lightgrey',
     padding: 10,