From ac0690ec9f1591eb48d8324286a025cc70768bb4 Mon Sep 17 00:00:00 2001
From: emelko <ml.kochsiek@mailbox.org>
Date: Wed, 22 May 2019 17:27:31 +0200
Subject: [PATCH 1/5] Set show more on homescreen to default and get rid of
 more/less switch

---
 components/home.js | 61 ++++++++++------------------------------------
 i18n/en/labels.js  |  2 --
 styles/index.js    |  8 ------
 3 files changed, 13 insertions(+), 58 deletions(-)

diff --git a/components/home.js b/components/home.js
index 5e64814..2a234f6 100644
--- a/components/home.js
+++ b/components/home.js
@@ -1,42 +1,22 @@
 import { ChronoUnit, LocalDate } from 'js-joda'
 import React, { Component } from 'react'
-import { Dimensions, ScrollView, TouchableHighlight, View } from 'react-native'
-import Icon from 'react-native-vector-icons/Entypo'
+import { ScrollView, View } from 'react-native'
 
 import DripHomeIcon from '../assets/drip-home-icons'
 import { getCycleDay } from '../db'
 import {
   bleedingPrediction as predictLabels,
-  home as labels,
-  shared,
+  home as labels
 } from '../i18n/en/labels'
 import links from '../i18n/en/links'
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
 import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles'
+
 import AppText from './app-text'
 import Button from './button'
 import { formatDateForShortText } from './helpers/format-date'
 
-const ShowMoreToggler = ({ isShowingMore, onToggle }) => {
-  const {height, width} = Dimensions.get('window')
-  const leftPosition = isShowingMore ? 10 : width - 40
-  const style = isShowingMore ? styles.showLess : styles.showMore
-  const topPosition = height / 2 - styles.header.height - 30
-
-  return (
-    <TouchableHighlight
-      onPress={onToggle}
-      style={[style, { top: topPosition, left: leftPosition}]}
-    >
-      <View style={{alignItems: 'center'}}>
-        <AppText>{isShowingMore ? shared.less : shared.more}</AppText>
-        <Icon name='chevron-thin-down' />
-      </View>
-    </TouchableHighlight>
-  )
-}
-
 const IconText = ({ children, wrapperStyles }) => {
   return (
     <View style={[styles.homeIconTextWrapper, wrapperStyles]}>
@@ -75,7 +55,6 @@ export default class Home extends Component {
     const fertilityStatus = getFertilityStatusForDay(this.todayDateString)
 
     this.state = {
-      isShowingMore: false,
       cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
       predictionText: determinePredictionText(prediction),
       bleedingPredictionRange: getBleedingPredictionRange(prediction),
@@ -91,12 +70,8 @@ export default class Home extends Component {
     })
   }
 
-  toggleShowingMore = () => {
-    this.setState({ isShowingMore: !this.state.isShowingMore })
-  }
-
   render() {
-    const { isShowingMore, cycleDayNumber, phase, status } = this.state
+    const { cycleDayNumber, phase, status } = this.state
     const { navigate } = this.props
     const cycleDayMoreText = cycleDayNumber ?
       labels.cycleDayKnown(cycleDayNumber) :
@@ -121,9 +96,7 @@ export default class Home extends Component {
                 {cycleDayNumber || labels.unknown}
               </IconText>
 
-              { isShowingMore &&
-                  <AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
-              }
+              <AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
             </HomeElement>
 
             <HomeElement
@@ -139,11 +112,9 @@ export default class Home extends Component {
                 {this.state.bleedingPredictionRange}
               </IconText>
 
-              { isShowingMore &&
-                <AppText style={styles.paragraph}>
-                  {this.state.predictionText}
-                </AppText>
-              }
+              <AppText style={styles.paragraph}>
+                {this.state.predictionText}
+              </AppText>
             </HomeElement>
 
             <HomeElement
@@ -160,20 +131,14 @@ export default class Home extends Component {
               { phase &&
                 <AppText>{`${labels.phase(phase)} (${status})`}</AppText>
               }
-              { isShowingMore &&
-                <View>
-                  <AppText styles={styles.paragraph}>
-                    { `${statusText} ${links.wiki.url}.` }
-                  </AppText>
-                </View>
-              }
+              <View>
+                <AppText styles={styles.paragraph}>
+                  { `${statusText} ${links.wiki.url}.` }
+                </AppText>
+              </View>
             </HomeElement>
           </View>
         </ScrollView>
-        <ShowMoreToggler
-          isShowingMore={isShowingMore}
-          onToggle={this.toggleShowingMore}
-        />
       </View>
     )
   }
diff --git a/i18n/en/labels.js b/i18n/en/labels.js
index ddae047..df5d2ce 100644
--- a/i18n/en/labels.js
+++ b/i18n/en/labels.js
@@ -15,8 +15,6 @@ export const shared = {
   date: 'Date',
   cycleDayWithLinebreak: 'Cycle\nday',
   loading: 'Loading ...',
-  more: 'more',
-  less: 'less',
   enter: 'Enter'
 }
 
diff --git a/styles/index.js b/styles/index.js
index 2b5d0f0..9928ef8 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -157,14 +157,6 @@ export default StyleSheet.create({
   iconText: {
     fontSize: 25
   },
-  showMore: {
-    transform: [{rotate: '90deg'}],
-    position: 'absolute',
-  },
-  showLess: {
-    transform: [{rotate: '270deg'}],
-    position: 'absolute'
-  },
   cycleDayNumber: {
     fontSize: 15,
     color: fontOnPrimaryColor,

From 668acb4afe0660054edd9389745d20e804700f35 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Wed, 22 May 2019 16:26:39 +0200
Subject: [PATCH 2/5] simple way to rearrange home screen

---
 components/home.js | 20 ++++++++++++--------
 styles/index.js    |  3 ++-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/components/home.js b/components/home.js
index 2a234f6..28cbd11 100644
--- a/components/home.js
+++ b/components/home.js
@@ -12,7 +12,6 @@ import links from '../i18n/en/links'
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
 import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles'
-
 import AppText from './app-text'
 import Button from './button'
 import { formatDateForShortText } from './helpers/format-date'
@@ -33,13 +32,18 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
       onPress={ onPress }
       style={ styles.homeIconElement }
     >
-      { children }
-      <Button
-        style={styles.homeButton}
-        onPress={ onPress }
-        backgroundColor={ buttonColor }>
-        { buttonLabel }
-      </Button>
+      {children[0]}
+      {children[1]}
+
+      <View>
+        {children[2]}
+        <Button
+          style={styles.homeButton}
+          onPress={ onPress }
+          backgroundColor={ buttonColor }>
+          { buttonLabel }
+        </Button>
+      </View>
     </View>
   )
 }
diff --git a/styles/index.js b/styles/index.js
index 9928ef8..edb0da4 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -122,7 +122,8 @@ export default StyleSheet.create({
   },
   homeIconElement: {
     alignItems: 'center',
-    marginTop: 15
+    marginTop: 15,
+    flexDirection: 'row'
   },
   homeIconTextWrapper: {
     alignItems: 'center',

From 418b9c0f5d88265260c16200efacc7abc45c8512 Mon Sep 17 00:00:00 2001
From: emelko <ml.kochsiek@mailbox.org>
Date: Thu, 23 May 2019 17:09:44 +0200
Subject: [PATCH 3/5] Styling for homescreen elements to breathe

---
 components/home.js | 22 ++++++++++++----------
 styles/index.js    | 31 +++++++++++--------------------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/components/home.js b/components/home.js
index 28cbd11..10b45c6 100644
--- a/components/home.js
+++ b/components/home.js
@@ -30,12 +30,12 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
   return (
     <View
       onPress={ onPress }
-      style={ styles.homeIconElement }
+      style={ styles.homeElement }
     >
       {children[0]}
       {children[1]}
 
-      <View>
+      <View style={{paddingLeft: 15}}>
         {children[2]}
         <Button
           style={styles.homeButton}
@@ -96,11 +96,11 @@ export default class Home extends Component {
               <View>
                 <DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
               </View>
-              <IconText wrapperStyles={styles.wrapperCycle}>
+              <IconText wrapperStyles={styles.wrapperIcon}>
                 {cycleDayNumber || labels.unknown}
               </IconText>
 
-              <AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
+              <AppText style={styles.homeDescriptionText}>{cycleDayMoreText}</AppText>
             </HomeElement>
 
             <HomeElement
@@ -109,14 +109,14 @@ export default class Home extends Component {
               buttonLabel={ labels.trackPeriod }
             >
               <View>
-                <DripHomeIcon name="drop" size={105} color={periodColor} />
+                <DripHomeIcon name="drop" size={100} color={periodColor} />
               </View>
 
-              <IconText wrapperStyles={styles.wrapperDrop}>
+              <IconText wrapperStyles={styles.wrapperIcon}>
                 {this.state.bleedingPredictionRange}
               </IconText>
 
-              <AppText style={styles.paragraph}>
+              <AppText style={styles.homeDescriptionText}>
                 {this.state.predictionText}
               </AppText>
             </HomeElement>
@@ -128,15 +128,17 @@ export default class Home extends Component {
             >
               <View style={styles.homeCircle}/>
 
-              <IconText wrapperStyles={styles.wrapperCircle}>
+              <IconText wrapperStyles={styles.wrapperIcon}>
                 { phase ? phase.toString() : labels.unknown }
               </IconText>
 
               { phase &&
-                <AppText>{`${labels.phase(phase)} (${status})`}</AppText>
+                <AppText style={styles.homeDescriptionText}>
+                  {`${labels.phase(phase)} (${status})`}
+                </AppText>
               }
               <View>
-                <AppText styles={styles.paragraph}>
+                <AppText styles={styles.homeDescriptionText}>
                   { `${statusText} ${links.wiki.url}.` }
                 </AppText>
               </View>
diff --git a/styles/index.js b/styles/index.js
index edb0da4..130de97 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -104,9 +104,6 @@ export default StyleSheet.create({
     marginLeft: 10,
     marginTop: 6
   },
-  homeView: {
-    marginHorizontal: 50,
-  },
   button: {
     paddingVertical: 10,
     paddingHorizontal: 20,
@@ -120,30 +117,24 @@ export default StyleSheet.create({
   homeButtonText: {
     color: fontOnPrimaryColor
   },
-  homeIconElement: {
+  homeView: {
+    margin: 40,
+  },
+  homeDescriptionText: {
+    width: 200,
+    marginBottom: defaultBottomMargin,
+  },
+  homeElement: {
     alignItems: 'center',
-    marginTop: 15,
-    flexDirection: 'row'
+    marginBottom: 40,
+    flexDirection: 'row',
   },
   homeIconTextWrapper: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginBottom: 10,
   },
-  wrapperCycle: {
+  wrapperIcon: {
     width: 80,
-    height: 77,
-    position: 'absolute'
-  },
-  wrapperDrop: {
-    width: 81,
-    height: 85,
-    marginTop: 20,
-    position: 'absolute'
-  },
-  wrapperCircle: {
-    width: 80,
-    height: 80,
     position: 'absolute'
   },
   homeCircle: {

From d13a7769705fcfadbe96166a40f83aeac30da92a Mon Sep 17 00:00:00 2001
From: emelko <ml.kochsiek@mailbox.org>
Date: Thu, 23 May 2019 22:07:46 +0200
Subject: [PATCH 4/5] Position icon text for droplet

---
 components/home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/home.js b/components/home.js
index 10b45c6..f6d9362 100644
--- a/components/home.js
+++ b/components/home.js
@@ -112,7 +112,7 @@ export default class Home extends Component {
                 <DripHomeIcon name="drop" size={100} color={periodColor} />
               </View>
 
-              <IconText wrapperStyles={styles.wrapperIcon}>
+              <IconText wrapperStyles={{top: 45, ...styles.wrapperIcon}}>
                 {this.state.bleedingPredictionRange}
               </IconText>
 

From 16b3199892f1fe6f1122399f5c169329a92005c0 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 24 May 2019 11:23:12 +0200
Subject: [PATCH 5/5] Make sure drop text is always positioned correctly

---
 components/home.js | 12 ++++++------
 styles/index.js    |  4 +++-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/home.js b/components/home.js
index f6d9362..ad4edb5 100644
--- a/components/home.js
+++ b/components/home.js
@@ -32,8 +32,10 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
       onPress={ onPress }
       style={ styles.homeElement }
     >
-      {children[0]}
-      {children[1]}
+      <View style={styles.homeIconAndText}>
+        {children[0]}
+        {children[1]}
+      </View>
 
       <View style={{paddingLeft: 15}}>
         {children[2]}
@@ -108,11 +110,9 @@ export default class Home extends Component {
               buttonColor={ periodColor }
               buttonLabel={ labels.trackPeriod }
             >
-              <View>
-                <DripHomeIcon name="drop" size={100} color={periodColor} />
-              </View>
+              <DripHomeIcon name="drop" size={100} color={periodColor} />
 
-              <IconText wrapperStyles={{top: 45, ...styles.wrapperIcon}}>
+              <IconText wrapperStyles={{top: '50%', ...styles.wrapperIcon}}>
                 {this.state.bleedingPredictionRange}
               </IconText>
 
diff --git a/styles/index.js b/styles/index.js
index 130de97..5fba45a 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -125,7 +125,6 @@ export default StyleSheet.create({
     marginBottom: defaultBottomMargin,
   },
   homeElement: {
-    alignItems: 'center',
     marginBottom: 40,
     flexDirection: 'row',
   },
@@ -133,6 +132,9 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  homeIconAndText: {
+    justifyContent: 'center'
+  },
   wrapperIcon: {
     width: 80,
     position: 'absolute'