From 0c22644c54b1d8e6125a3d3e9289848f6eaec0ca Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Sun, 2 Dec 2018 13:15:46 +0100
Subject: [PATCH 1/2] Extracts buttons on home screen as a component

---
 components/home.js | 51 ++++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/components/home.js b/components/home.js
index 8f794f4..52bc360 100644
--- a/components/home.js
+++ b/components/home.js
@@ -14,6 +14,19 @@ import styles from '../styles'
 import AppText, { AppTextLight } from './app-text'
 import nothingChanged from '../db/db-unchanged'
 
+const HomeButton = ({ backgroundColor, children }) => {
+  return (
+    <View style={[
+      styles.homeButton,
+      {backgroundColor}
+    ]}>
+      <AppText style={styles.homeButtonText}>
+        {children}
+      </AppText>
+    </View>
+  )
+}
+
 export default class Home extends Component {
   constructor(props) {
     super(props)
@@ -92,14 +105,11 @@ export default class Home extends Component {
               { this.state.showMore &&
                   <AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
               }
-              <View style={[
-                styles.homeButton,
-                { backgroundColor: cycleDayColor }
-              ]}>
-                <AppText style={styles.homeButtonText}>
-                  {labels.editToday}
-                </AppText>
-              </View>
+
+              <HomeButton backgroundColor={cycleDayColor}>
+                {labels.editToday}
+              </HomeButton>
+
             </TouchableOpacity>
 
             <TouchableOpacity
@@ -120,14 +130,11 @@ export default class Home extends Component {
                   {this.state.predictionText}
                 </AppText>
               }
-              <View style={[
-                styles.homeButton,
-                { backgroundColor: periodColor }
-              ]}>
-                <AppText style={styles.homeButtonText}>
-                  {labels.trackPeriod}
-                </AppText>
-              </View>
+
+              <HomeButton backgroundColor={periodColor}>
+                {labels.trackPeriod}
+              </HomeButton>
+
             </TouchableOpacity>
 
             <TouchableOpacity
@@ -153,14 +160,10 @@ export default class Home extends Component {
                   {this.state.statusText}
                 </AppText>
               }
-              <View style={[
-                styles.homeButton,
-                { backgroundColor: secondaryColor }
-              ]}>
-                <AppText style={styles.homeButtonText}>
-                  {labels.checkFertility}
-                </AppText>
-              </View>
+
+              <HomeButton backgroundColor={secondaryColor}>
+                {labels.checkFertility}
+              </HomeButton>
             </TouchableOpacity>
           </View>
 

From 1b5c637d4ea7cc1e2c79e878fe1ccc4f8148309b Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Sun, 2 Dec 2018 13:52:17 +0100
Subject: [PATCH 2/2] Fixes fertility icon space

---
 components/home.js |  5 ++++-
 styles/index.js    | 10 +++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/home.js b/components/home.js
index 52bc360..73e9591 100644
--- a/components/home.js
+++ b/components/home.js
@@ -141,7 +141,10 @@ export default class Home extends Component {
               onPress={() => this.props.navigate('Chart')}
               style={styles.homeIconElement}
             >
-              <View style={styles.homeCircle}>
+
+              <View style={styles.homeCircle} position='absolute' />
+
+              <View style={[styles.homeIconTextWrapper, styles.wrapperCircle]}>
                 <AppTextLight style={styles.iconText}>
                   {this.state.phase ?
                     this.state.phase.toString()
diff --git a/styles/index.js b/styles/index.js
index 59360e6..05489a5 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -100,13 +100,17 @@ export default StyleSheet.create({
     marginBottom: 10,
   },
   wrapperCycle: {
-    width: 70,
-    height: 75
+    width: 80,
+    height: 77
   },
   wrapperDrop: {
+    width: 81,
+    height: 85,
+    marginTop: 20
+  },
+  wrapperCircle: {
     width: 80,
     height: 80,
-    marginTop: 20
   },
   homeCircle: {
     borderRadius: 100,