diff --git a/components/labels.js b/components/labels.js index c4c9cba75ad18957e1ba4dce0ffb609f9cfc389a..c61a939013115aff48b197329bdef3132c492334 100644 --- a/components/labels.js +++ b/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', diff --git a/components/stats.js b/components/stats.js index b868e638290cda28f01fcadba340b12f501bf6e8..c1e4475aab0b4f87b83187ffe1a16f1c16777ec4 100644 --- a/components/stats.js +++ b/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> diff --git a/styles/index.js b/styles/index.js index 21084769a10dfb16342f0bb164a04dfbbd4ea5d1..73d4b122fee2186d2a71085f5e2e4917041579a2 100644 --- a/styles/index.js +++ b/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' },