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..897a1ddd65b5b0e446a1d27718ac0c891f16013a 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.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> diff --git a/styles/index.js b/styles/index.js index 21084769a10dfb16342f0bb164a04dfbbd4ea5d1..e90cac237fab98fb8483b1fe18d6119c3b731060 100644 --- a/styles/index.js +++ b/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' },