Skip to content
Snippets Groups Projects
Commit 59aef112 authored by mashazyu's avatar mashazyu Committed by emelko
Browse files

Updates styling of Stats page

parent 8145619f
No related branches found
No related tags found
No related merge requests found
......@@ -50,29 +50,30 @@ const Cell = ({ content, isLeft }) => {
Cell.propTypes = {
content: PropTypes.node.isRequired,
isLeft: PropTypes.bool
isLeft: PropTypes.bool,
}
const styles = StyleSheet.create({
accentOrange: {
...Typography.accentOrange
...Typography.accentOrange,
fontSize: 18,
},
accentPurpleBig: {
...Typography.accentPurpleBig,
marginRight: Spacing.base
marginRight: Spacing.base,
},
cellLeft: {
alignItems: 'flex-end',
flex: 5,
justifyContent: 'center'
justifyContent: 'center',
},
cellRight: {
flex: 6,
justifyContent: 'center'
justifyContent: 'center',
},
row: {
flexDirection: 'row',
marginBottom: Spacing.tiny
marginBottom: Spacing.tiny,
}
})
......
......@@ -10,7 +10,7 @@ import cycleModule from '../lib/cycle'
import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
import {stats as labels} from '../i18n/en/labels'
import { Sizes, Spacing, Typography } from '../styles'
import { Spacing, Typography } from '../styles'
const image = require('../assets/cycle-icon.png')
......@@ -28,7 +28,7 @@ const Stats = () => {
[numberOfCycles, labels.basisOfStatsEnd]
]
return (
<AppPage>
<AppPage contentContainerStyle={styles.pageContainer}>
<Segment last style={styles.pageContainer}>
<AppText>{labels.cycleLengthExplainer}</AppText>
{!hasAtLeastOneCycle && <AppText>{labels.emptyStats}</AppText>}
......@@ -66,20 +66,21 @@ const Stats = () => {
}
const column = {
flexDirection: 'column'
flexDirection: 'column',
}
const styles = StyleSheet.create({
accentOrange: {
...Typography.accentOrange
...Typography.accentOrange,
fontSize: 20,
},
accentPurpleGiant: {
...Typography.accentPurpleGiant,
marginVertical: -25
},
accentPurpleHuge: {
...Typography.accentPurpleHuge,
marginRight: Spacing.base
marginRight: Spacing.base,
marginTop: -15,
},
container: {
alignItems: 'center',
......@@ -88,24 +89,26 @@ const styles = StyleSheet.create({
},
columnLeft: {
...column,
flex: 4
flex: 4,
},
columnRight: {
...column,
flex: 5
flex: 5,
paddingTop: Spacing.small,
},
image: {
height: Sizes.huge * 3,
marginLeft: Sizes.huge / 2,
height: 120,
marginLeft: 20,
marginTop: 20,
resizeMode: 'contain',
width: Sizes.huge * 3
width: 120,
},
imageContainter: {
paddingTop: Sizes.huge,
marginBottom: Sizes.huge / 4
paddingTop: 40,
marginBottom: 20,
},
pageContainer: {
marginVertical: Spacing.large
marginVertical: Spacing.base,
}
})
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment