Merge branch '157-apply-design-to-stats-screens' into 'master'

makes stats beautiful

Closes #157

See merge request bloodyhealth/drip!74

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.textWrappingView]}>
+          <AppText style={styles.title}>{labels.cycleLengthTitle}</AppText>
+          <AppText style={styles.paragraph}>{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.emphasis}> {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.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>
@@ -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.paragraph]}>
               <AppText style={styles.statsLabelLeft}>{labels.stdLabel}</AppText>
               <AppText style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
             </View>
+            <AppText>
+              {labels.basisOfStatsBeginning}
+              <AppText style={styles.emphasis}> {numberOfCycles} </AppText>
+              {labels.basisOfStatsEnd}
+            </AppText>
           </View>}
         </View>
       </ScrollView>