diff --git a/components/labels.js b/components/labels.js index c4c9cba..c61a939 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 b868e63..897a1dd 100644 --- a/components/stats.js +++ b/components/stats.js @@ -26,22 +26,23 @@ export default class Stats extends Component { } return ( - + + {labels.cycleLengthTitle} + {labels.cycleLengthExplainer} {!atLeastOneCycle && - {labels.emptyStats} + {labels.emptyStats} } {atLeastOneCycle && numberOfCycles === 1 && - - {labels.oneCycleStats(cycleLengths[0])} + + {labels.oneCycleStats} + {cycleLengths[0]} + {labels.daysLabel + '.'} } {atLeastOneCycle && numberOfCycles > 1 && - - {labels.getBasisOfStats(numberOfCycles)} - - {labels.averageLabel} - {cycleInfo.mean + ' ' + labels.daysLabel} + {labels.averageLabel} + {cycleInfo.mean + ' ' + labels.daysLabel} {labels.minLabel} @@ -51,10 +52,15 @@ export default class Stats extends Component { {labels.maxLabel} {cycleInfo.maximum + ' ' + labels.daysLabel} - + {labels.stdLabel} {cycleInfo.stdDeviation + ' ' + labels.daysLabel} + + {labels.basisOfStatsBeginning} + {numberOfCycles} + {labels.basisOfStatsEnd} + } diff --git a/styles/index.js b/styles/index.js index 2108476..e90cac2 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' },