Merge branch '294-white-space-on-home-screen' into 'master'

Resolve "white space on home screen"

Closes #294

See merge request bloodyhealth/drip!175

components/home.js

@@ -53,6 +53,7 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
     >
       { children }
       <Button
+        style={styles.homeButton}
         onPress={ onPress }
         backgroundColor={ buttonColor }>
         { buttonLabel }
@@ -108,7 +109,7 @@ export default class Home extends Component {
               buttonColor={ cycleDayColor }
               buttonLabel={ labels.editToday }
             >
-              <View position='absolute'>
+              <View>
                 <DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
               </View>
               <IconText wrapperStyles={styles.wrapperCycle}>
@@ -125,7 +126,7 @@ export default class Home extends Component {
               buttonColor={ periodColor }
               buttonLabel={ labels.trackPeriod }
             >
-              <View position='absolute'>
+              <View>
                 <DripHomeIcon name="drop" size={105} color={periodColor} />
               </View>
 
@@ -145,7 +146,7 @@ export default class Home extends Component {
               buttonColor={ secondaryColor }
               buttonLabel={ labels.checkFertility }
             >
-              <View style={styles.homeCircle} position='absolute' />
+              <View style={styles.homeCircle}/>
 
               <IconText wrapperStyles={styles.wrapperCircle}>
                 { phase ? phase.toString() : labels.unknown }

styles/index.js

@@ -95,7 +95,6 @@ export default StyleSheet.create({
   },
   homeView: {
     marginHorizontal: 50,
-    marginTop: 20,
   },
   button: {
     paddingVertical: 10,
@@ -105,13 +104,14 @@ export default StyleSheet.create({
   },
   homeButton: {
     width: 200,
+    marginTop: 5
   },
   homeButtonText: {
     color: fontOnPrimaryColor
   },
   homeIconElement: {
     alignItems: 'center',
-    marginBottom: 10
+    marginTop: 15
   },
   homeIconTextWrapper: {
     alignItems: 'center',
@@ -120,16 +120,19 @@ export default StyleSheet.create({
   },
   wrapperCycle: {
     width: 80,
-    height: 77
+    height: 77,
+    position: 'absolute'
   },
   wrapperDrop: {
     width: 81,
     height: 85,
-    marginTop: 20
+    marginTop: 20,
+    position: 'absolute'
   },
   wrapperCircle: {
     width: 80,
     height: 80,
+    position: 'absolute'
   },
   homeCircle: {
     borderRadius: 100,