Resolve "Stats"

components/common/menu-icon.js

@@ -10,7 +10,7 @@ const Icon = createIconSetFromIcoMoon(iconConfig, '', 'Menu')
 const MenuIcon = ({ isActive, name }) => {
   const color = isActive ? Colors.greyDark : Colors.grey
 
-  return <Icon name={name} size={Sizes.huge} color={color} />
+  return <Icon name={name} size={Sizes.icon} color={color} />
 }
 
 MenuIcon.propTypes = {

components/common/table.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 import AppText from './app-text'
 
-import { Spacing, Typography } from '../../styles'
+import { Sizes, Spacing, Typography } from '../../styles'
 
 const Table = ({ tableContent }) => {
   return (
@@ -56,11 +56,11 @@ Cell.propTypes = {
 const styles = StyleSheet.create({
   accentOrange: {
     ...Typography.accentOrange,
-    fontSize: 18,
+    fontSize: Sizes.small,
   },
   accentPurpleBig: {
     ...Typography.accentPurpleBig,
-    marginRight: Spacing.base,
+    marginRight: Spacing.small,
   },
   cellLeft: {
     alignItems: 'flex-end',

components/home.js

@@ -99,7 +99,7 @@ class Home extends Component {
         {phase && (
           <View style={styles.line}>
             <Asterisk />
-            <AppText linkStyle={styles.whiteText}>
+            <AppText linkStyle={styles.whiteText} style={styles.greyText}>
               {statusText}
             </AppText>
           </View>
@@ -147,6 +147,9 @@ const styles = StyleSheet.create({
   },
   whiteText: {
     color: 'white',
+  },
+  greyText: {
+    color: Colors.greyLight,
   }
 })
 

components/stats.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ImageBackground, StyleSheet, View } from 'react-native'
+import { Dimensions, ImageBackground, StyleSheet, View } from 'react-native'
 
 import AppPage from './common/app-page'
 import AppText from './common/app-text'
@@ -10,9 +10,11 @@ import cycleModule from '../lib/cycle'
 import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
 import {stats as labels} from '../i18n/en/labels'
 
-import { Spacing, Typography } from '../styles'
+import { Sizes, Spacing, Typography } from '../styles'
+import { fontRatio } from '../config'
 
 const image = require('../assets/cycle-icon.png')
+const screen = Dimensions.get('screen')
 
 const Stats = () => {
   const cycleLengths = cycleModule().getAllCycleLengths()
@@ -20,13 +22,15 @@ const Stats = () => {
   const hasAtLeastOneCycle = numberOfCycles >= 1
   const cycleData = hasAtLeastOneCycle ? getCycleInfo(cycleLengths)
     : { minimum: '—', maximum: '—', stdDeviation: '—' }
-
   const statsData = [
     [cycleData.minimum, labels.minLabel],
     [cycleData.maximum, labels.maxLabel],
     [cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel],
     [numberOfCycles, labels.basisOfStatsEnd]
   ]
+  const height = screen.height * 0.2
+  const marginTop = (height / 8 - Sizes.icon / fontRatio) / 4
+
   return (
     <AppPage contentContainerStyle={styles.pageContainer}>
       <Segment last style={styles.pageContainer}>
@@ -38,12 +42,12 @@ const Stats = () => {
               <ImageBackground
                 source={image}
                 imageStyle={styles.image}
-                style={styles.imageContainter}
+                style={[styles.imageContainter, { height }]}
               >
                 <AppText
                   numberOfLines={1}
                   ellipsizeMode="clip"
-                  style={styles.accentPurpleGiant}
+                  style={[styles.accentPurpleGiant, { marginTop }]}
                 >
                   {cycleData.mean}
                 </AppText>
@@ -72,15 +76,14 @@ const column = {
 const styles = StyleSheet.create({
   accentOrange: {
     ...Typography.accentOrange,
-    fontSize: 20,
+    fontSize: Sizes.small,
   },
   accentPurpleGiant: {
     ...Typography.accentPurpleGiant,
   },
   accentPurpleHuge: {
     ...Typography.accentPurpleHuge,
-    marginRight: Spacing.base,
-    marginTop: -15,
+    marginTop: Spacing.base * (-1),
   },
   container: {
     alignItems: 'center',
@@ -97,15 +100,14 @@ const styles = StyleSheet.create({
     paddingTop: Spacing.small,
   },
   image: {
-    height: 120,
-    marginLeft: 20,
-    marginTop: 20,
+    marginLeft: Spacing.large,
+    marginTop: Spacing.large,
     resizeMode: 'contain',
-    width: 120,
+
   },
   imageContainter: {
-    paddingTop: 40,
-    marginBottom: 20,
+    paddingTop: Spacing.large * 2,
+    marginBottom: Spacing.large,
   },
   pageContainer: {
     marginVertical: Spacing.base,

styles/typography.js

@@ -16,6 +16,7 @@ export const sizes = {
   subtitle: 22 / fontRatio,
   title: 24 / fontRatio,
   huge: 32 / fontRatio,
+  icon: 40 / fontRatio,
 }
 
 const accentText = {
@@ -31,7 +32,7 @@ const accentTextBig = {
 
 const accentTextGiant = {
   ...accentText,
-  fontSize: 50 / fontRatio,
+  fontSize: sizes.icon / fontRatio,
 }
 
 const accentTextHuge = {