From 646543c9283b2cec15b790dbc9586c6cf54e4fc9 Mon Sep 17 00:00:00 2001
From: emelko <ml.kochsiek@mailbox.org>
Date: Tue, 5 Feb 2019 01:20:35 +0100
Subject: [PATCH] Make stats look a bit more consistent with framed segment

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

diff --git a/components/stats.js b/components/stats.js
index 23a83d1..6a4ce8a 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -9,6 +9,7 @@ import cycleModule from '../lib/cycle'
 import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
 import {stats as labels} from '../i18n/en/labels'
 import AppText from './app-text'
+import FramedSegment from './framed-segment'
 
 export default class Stats extends Component {
   render() {
@@ -24,8 +25,10 @@ export default class Stats extends Component {
     }
     return (
       <ScrollView>
-        <View style={[styles.textWrappingView]}>
-          <AppText style={styles.title}>{labels.cycleLengthTitle}</AppText>
+        <FramedSegment
+          style={styles.framedSegmentLast}
+          title={labels.cycleLengthTitle}
+        >
           <AppText style={styles.paragraph}>{labels.cycleLengthExplainer}</AppText>
           {!atLeastOneCycle &&
             <AppText>{labels.emptyStats}</AppText>
@@ -39,20 +42,20 @@ export default class Stats extends Component {
           }
           {atLeastOneCycle && numberOfCycles > 1 && <View>
             <View style={styles.statsRow}>
-              <AppText style={[styles.statsLabelLeft, styles.emphasis]}>{labels.averageLabel}</AppText>
-              <AppText style={[styles.statsLabelRight, styles.emphasis]}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
+              <AppText style={styles.emphasis}>{labels.averageLabel}</AppText>
+              <AppText style={styles.emphasis}>{': ' + cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
-              <AppText style={styles.statsLabelLeft}>{labels.minLabel}</AppText>
-              <AppText style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</AppText>
+              <AppText>{labels.minLabel}</AppText>
+              <AppText>{': ' + cycleInfo.minimum + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
-              <AppText style={styles.statsLabelLeft}>{labels.maxLabel}</AppText>
-              <AppText style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
+              <AppText>{labels.maxLabel}</AppText>
+              <AppText>{': ' + cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={[styles.statsRow, styles.paragraph]}>
-              <AppText style={styles.statsLabelLeft}>{labels.stdLabel}</AppText>
-              <AppText style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
+              <AppText>{labels.stdLabel}</AppText>
+              <AppText>{': ' + cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
               <AppText>{labels.basisOfStatsBeginning}</AppText>
@@ -60,7 +63,7 @@ export default class Stats extends Component {
               <AppText>{labels.basisOfStatsEnd}</AppText>
             </View>
           </View>}
-        </View>
+        </FramedSegment>
       </ScrollView>
     )
   }
diff --git a/styles/index.js b/styles/index.js
index 8893a4e..29eb7a3 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -45,7 +45,8 @@ export default StyleSheet.create({
   },
   emphasis: {
     fontWeight: 'bold',
-    fontFamily: textFontBold
+    fontFamily: textFontBold,
+    color: secondaryColor,
   },
   link: {
     color: cycleDayColor,
@@ -307,16 +308,6 @@ export default StyleSheet.create({
     flexDirection: 'row',
     width: '100%'
   },
-  statsLabelLeft: {
-    width: '60%',
-    textAlign: 'left',
-    textAlignVertical: 'center',
-    marginLeft: 10
-  },
-  statsLabelRight: {
-    textAlign: 'left',
-    textAlignVertical: 'center'
-  },
   menuLabel: {
     fontSize: 15,
     color: fontOnPrimaryColor