makes stats beautiful

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',

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>

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'
   },