Update stats page styling

components/stats.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Dimensions, ImageBackground, StyleSheet, View } from 'react-native'
+import { Dimensions, ImageBackground, View } from 'react-native'
+import { ScaledSheet } from 'react-native-size-matters'
 
 import AppPage from './common/app-page'
 import AppText from './common/app-text'
@@ -28,8 +29,6 @@ const Stats = () => {
     [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}>
@@ -42,12 +41,12 @@ const Stats = () => {
               <ImageBackground
                 source={image}
                 imageStyle={styles.image}
-                style={[styles.imageContainter, { height }]}
+                style={styles.imageContainter}
               >
                 <AppText
                   numberOfLines={1}
                   ellipsizeMode="clip"
-                  style={[styles.accentPurpleGiant, { marginTop }]}
+                  style={styles.accentPurpleGiant}
                 >
                   {cycleData.mean}
                 </AppText>
@@ -73,13 +72,14 @@ const column = {
   flexDirection: 'column',
 }
 
-const styles = StyleSheet.create({
+const styles = ScaledSheet.create({
   accentOrange: {
     ...Typography.accentOrange,
     fontSize: Sizes.small,
   },
   accentPurpleGiant: {
     ...Typography.accentPurpleGiant,
+    marginTop: Spacing.base * (-2),
   },
   accentPurpleHuge: {
     ...Typography.accentPurpleHuge,
@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    paddingTop: Spacing.base,
+    paddingTop: Spacing.base
   },
   columnLeft: {
     ...column,
@@ -102,10 +102,9 @@ const styles = StyleSheet.create({
   },
   image: {
     resizeMode: 'contain',
-
   },
   imageContainter: {
-    paddingTop: Spacing.large * 2,
+    paddingTop: Spacing.large * 2.5,
     marginBottom: Spacing.large,
   },
   pageContainer: {

config.js

@@ -1,4 +1,5 @@
-import { Dimensions, PixelRatio, Platform, StatusBar } from 'react-native'
+import { PixelRatio, StatusBar } from 'react-native'
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters'
 
 export const ACTION_DELETE = 'delete'
 export const ACTION_EXPORT = 'export'
@@ -16,20 +17,18 @@ export const SYMPTOMS = [
   'note',
 ]
 
-const windowWidth = Dimensions.get('window').width
+export const fontRatio = PixelRatio.getFontScale()
-const factor = (windowWidth < 1000) && (Platform.OS === 'ios') ? 1.25 : 1
-export const fontRatio = PixelRatio.getFontScale() * factor
 export const CHART_COLUMN_WIDTH = 32
 export const CHART_COLUMN_MIDDLE = CHART_COLUMN_WIDTH / 2
-export const CHART_DOT_RADIUS = 6
+export const CHART_DOT_RADIUS = moderateScale(6)
 export const CHART_GRID_LINE_HORIZONTAL_WIDTH =
   PixelRatio.roundToNearestPixel(0.3)
-export const CHART_ICON_SIZE = 20
+export const CHART_ICON_SIZE = moderateScale(20)
-export const CHART_STROKE_WIDTH = 3
+export const CHART_STROKE_WIDTH = scale(3)
-export const CHART_SYMPTOM_HEIGHT_RATIO = 0.08
+export const CHART_SYMPTOM_HEIGHT_RATIO = verticalScale(0.08)
-export const CHART_XAXIS_HEIGHT_RATIO = 0.1
+export const CHART_XAXIS_HEIGHT_RATIO = verticalScale(0.1)
-export const CHART_YAXIS_WIDTH = 32
+export const CHART_YAXIS_WIDTH = scale(32)
-export const CHART_TICK_WIDTH = 44
+export const CHART_TICK_WIDTH = scale(44)
 
 export const TEMP_SCALE_MAX = 37.5
 export const TEMP_SCALE_MIN = 35.5
@@ -38,6 +37,11 @@ export const TEMP_MAX = 39
 export const TEMP_MIN = 35
 export const TEMP_SLIDER_STEP = 0.5
 
-export const HIT_SLOP = { top: 20, bottom: 20, left: 20, right: 20 }
+export const HIT_SLOP = {
+  top: verticalScale(20),
+  bottom: verticalScale(20),
+  left: scale(20),
+  right: scale(20)
+}
 
 export const STATUSBAR_HEIGHT = StatusBar.currentHeight

styles/spacing.js

@@ -1,10 +1,12 @@
+import { moderateScale } from 'react-native-size-matters'
+
 import { fontRatio } from '../config'
 
 export default {
-  tiny: 4 / fontRatio,
+  tiny: moderateScale(4 / fontRatio),
-  small: 10 / fontRatio,
+  small: moderateScale(10 / fontRatio),
-  base: 16 / fontRatio,
+  base: moderateScale(16 / fontRatio),
-  large: 20 / fontRatio,
+  large: moderateScale(20 / fontRatio),
   symptomTileWidth: '48%',
   textWidth: '70%'
 }