More fine-tuning of calendar and symptom box

components/cycle-day/symptom-box.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View, TouchableOpacity } from 'react-native'
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters'
+import { scale } from 'react-native-size-matters'
 
 import AppText from '../common/app-text'
 import DripIcon from '../../assets/drip-icons'
@@ -109,13 +109,13 @@ const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     backgroundColor: 'white',
-    borderRadius: moderateScale(10),
+    borderRadius: scale(10),
     elevation: 4,
     flexDirection: 'row',
-    height: verticalScale(110),
-    marginBottom: verticalScale(Spacing.base),
-    paddingHorizontal: scale(Spacing.small),
-    paddingVertical: verticalScale(Spacing.base),
+    height: scale(110),
+    marginBottom: Spacing.base,
+    paddingHorizontal: Spacing.small,
+    paddingVertical: Spacing.base,
     width: Spacing.symptomTileWidth
   },
   symptomName: {
@@ -138,7 +138,7 @@ const styles = StyleSheet.create({
   text: {
     fontSize: Sizes.small,
     fontStyle: 'italic',
-    lineHeight: scale(14)
+    lineHeight: Sizes.small
   },
   textDisabled: {
     color: Colors.greyLight

components/helpers/calendar.js

@@ -1,4 +1,5 @@
 import { LocalDate } from 'js-joda'
+import { verticalScale } from 'react-native-size-matters'
 
 import { Colors, Fonts, Sizes } from '../../styles'
 
@@ -12,7 +13,7 @@ export const toCalFormat = (bleedingDaysSortedByDate) => {
       customStyles: {
         container: {
           backgroundColor: shades[day.bleeding.value],
-          paddingTop: 2,
+          paddingTop: verticalScale(2),
         },
         text: {
           color: Colors.turquoiseLight,

config.js

@@ -1,5 +1,5 @@
 import { PixelRatio, StatusBar } from 'react-native'
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters'
+import { scale, verticalScale } from 'react-native-size-matters'
 
 export const ACTION_DELETE = 'delete'
 export const ACTION_EXPORT = 'export'
@@ -19,13 +19,13 @@ export const SYMPTOMS = [
 
 export const CHART_COLUMN_WIDTH = 32
 export const CHART_COLUMN_MIDDLE = CHART_COLUMN_WIDTH / 2
-export const CHART_DOT_RADIUS = moderateScale(6)
+export const CHART_DOT_RADIUS = scale(6)
 export const CHART_GRID_LINE_HORIZONTAL_WIDTH =
   PixelRatio.roundToNearestPixel(0.3)
-export const CHART_ICON_SIZE = moderateScale(20)
+export const CHART_ICON_SIZE = scale(20)
 export const CHART_STROKE_WIDTH = scale(3)
-export const CHART_SYMPTOM_HEIGHT_RATIO = verticalScale(0.08)
-export const CHART_XAXIS_HEIGHT_RATIO = verticalScale(0.1)
+export const CHART_SYMPTOM_HEIGHT_RATIO = scale(0.08)
+export const CHART_XAXIS_HEIGHT_RATIO = scale(0.1)
 export const CHART_YAXIS_WIDTH = scale(32)
 export const CHART_TICK_WIDTH = scale(44)