From 9b1d47be0d8fb949951247504ff2b0859482d300 Mon Sep 17 00:00:00 2001
From: emelko <ml.kochsiek@mailbox.org>
Date: Thu, 7 Feb 2019 19:45:57 +0100
Subject: [PATCH] Implements MR review: * adds flexWrap to text * rearranges
 text passages in stats

Co-Authored-By: tina <1700791-liv-theo@users.noreply.gitlab.com>
---
 components/stats.js | 41 ++++++++++++++++++++++++-----------------
 styles/index.js     |  2 +-
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/components/stats.js b/components/stats.js
index 6a4ce8a..2488510 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -29,37 +29,44 @@ export default class Stats extends Component {
           style={styles.framedSegmentLast}
           title={labels.cycleLengthTitle}
         >
-          <AppText style={styles.paragraph}>{labels.cycleLengthExplainer}</AppText>
+          <AppText style={styles.paragraph}>
+            {labels.cycleLengthExplainer}
+          </AppText>
+
           {!atLeastOneCycle &&
             <AppText>{labels.emptyStats}</AppText>
           }
           {atLeastOneCycle && numberOfCycles === 1 &&
-            <View style={styles.statsRow}>
+            <View style={[styles.statsRow, styles.paragraph]}>
               <AppText>{labels.oneCycleStats}</AppText>
-              <AppText style={styles.emphasis}>{' ' + cycleLengths[0] + ' '}</AppText>
-              <AppText>{labels.daysLabel + '.'}</AppText>
+              <AppText style={styles.emphasis}> {cycleLengths[0]} </AppText>
+              <AppText>{labels.daysLabel}.</AppText>
             </View>
           }
           {atLeastOneCycle && numberOfCycles > 1 && <View>
-            <View style={styles.statsRow}>
-              <AppText style={styles.emphasis}>{labels.averageLabel}</AppText>
-              <AppText style={styles.emphasis}>{': ' + cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
+            <View style={styles.paragraph}>
+              <AppText style={styles.emphasis}>
+                {labels.averageLabel}: {cycleInfo.mean} {labels.daysLabel}
+              </AppText>
             </View>
-            <View style={styles.statsRow}>
-              <AppText>{labels.minLabel}</AppText>
-              <AppText>{': ' + cycleInfo.minimum + ' ' + labels.daysLabel}</AppText>
+            <View>
+              <AppText>
+                {labels.minLabel}: {cycleInfo.minimum} {labels.daysLabel}
+              </AppText>
             </View>
-            <View style={styles.statsRow}>
-              <AppText>{labels.maxLabel}</AppText>
-              <AppText>{': ' + cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
+            <View>
+              <AppText>
+                {labels.maxLabel}: {cycleInfo.maximum} {labels.daysLabel}
+              </AppText>
             </View>
-            <View style={[styles.statsRow, styles.paragraph]}>
-              <AppText>{labels.stdLabel}</AppText>
-              <AppText>{': ' + cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
+            <View style={styles.paragraph}>
+              <AppText>
+                {labels.stdLabel}: {cycleInfo.stdDeviation} {labels.daysLabel}
+              </AppText>
             </View>
             <View style={styles.statsRow}>
               <AppText>{labels.basisOfStatsBeginning}</AppText>
-              <AppText style={styles.emphasis}>{' ' + numberOfCycles + ' '} </AppText>
+              <AppText style={styles.emphasis}> {numberOfCycles} </AppText>
               <AppText>{labels.basisOfStatsEnd}</AppText>
             </View>
           </View>}
diff --git a/styles/index.js b/styles/index.js
index 29eb7a3..767bade 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -306,7 +306,7 @@ export default StyleSheet.create({
   },
   statsRow: {
     flexDirection: 'row',
-    width: '100%'
+    flexWrap: 'wrap'
   },
   menuLabel: {
     fontSize: 15,