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>

styles/index.js

@@ -4,10 +4,29 @@ 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'
   },
+  paragraph: {
+    marginBottom: defaultBottomMargin
+  },
+  emphasis: {
+    fontWeight: 'bold',
+  },
+  title: {
+    fontSize: 18,
+    color: 'black',
+    marginBottom: defaultBottomMargin,
+  },
+  textWrappingView: {
+    marginHorizontal: defaultIndentation,
+    marginTop: defaultTopMargin
+  },
   welcome: {
     fontSize: 20,
     margin: 30,
@@ -15,7 +34,7 @@ export default StyleSheet.create({
     textAlignVertical: 'center'
   },
   dateHeader: {
-    fontSize: 18,
+    fontSize: 22,
     fontWeight: 'bold',
     color: fontOnPrimaryColor,
     textAlign: 'center',
@@ -137,12 +156,6 @@ export default StyleSheet.create({
   symptomEditButton: {
     width: 130
   },
-  statsIntro: {
-    fontSize: 18,
-    margin: 10,
-    textAlign: 'left',
-    textAlignVertical: 'center'
-  },
   settingsSegment: {
     backgroundColor: 'lightgrey',
     padding: 10,
@@ -165,14 +178,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'
   },