From 388985034fd876edc5a18581b740223eba0adb09 Mon Sep 17 00:00:00 2001
From: MariaZ <mariya.z@gmail.com>
Date: Sun, 29 Aug 2021 18:28:00 +0200
Subject: [PATCH] Update symptom box styling

---
 components/cycle-day/symptom-box.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js
index af9e514..1df272f 100644
--- a/components/cycle-day/symptom-box.js
+++ b/components/cycle-day/symptom-box.js
@@ -1,6 +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 AppText from '../common/app-text'
 import DripIcon from '../../assets/drip-icons'
@@ -86,7 +87,7 @@ class SymptomBox extends Component {
             color={iconColor}
             isActive={!isSymptomDisabled}
             name={iconName}
-            size={40}
+            size={Sizes.icon}
           />
           <View style={styles.textContainer}>
             <AppText style={symptomNameStyle}>
@@ -111,9 +112,9 @@ const hint = {
 
 const main = {
   fontSize: Sizes.base,
-  height: Sizes.base * 2,
+  height: Sizes.icon,
   lineHeight: Sizes.base,
-  marginBottom: (-1) * Sizes.tiny,
+  marginBottom: (-1) * Sizes.title,
   textAlignVertical: 'center'
 }
 
@@ -121,13 +122,13 @@ const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     backgroundColor: 'white',
-    borderRadius: 10,
+    borderRadius: moderateScale(10),
     elevation: 4,
     flexDirection: 'row',
-    height: 110,
-    marginBottom: Spacing.base,
-    paddingHorizontal: Spacing.small,
-    paddingVertical: Spacing.base,
+    height: verticalScale(110),
+    marginBottom: verticalScale(Spacing.base),
+    paddingHorizontal: scale(Spacing.small),
+    paddingVertical: verticalScale(Spacing.base),
     width: Spacing.symptomTileWidth
   },
   symptomName: {