Merge branch '434-home-page-tuning' into 'rebased-redesign'

Resolve "Redesign fix: Homepage fix"

See merge request bloodyhealth/drip!315

README.md

@@ -3,6 +3,9 @@
 A menstrual cycle tracking app that's open-source and leaves your data on your phone. Use it to track your menstrual cycle and/or for fertility awareness!
 Find more information on [our website](https://bloodyhealth.gitlab.io/).
 
+[<img src="https://bloodyhealth.gitlab.io/assets/get.png"
+     alt="Get it here"
+     height="55">](https://bloodyhealth.gitlab.io/release/5.apk)
 [<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
      alt="Get it on F-Droid"
      height="80">](https://f-droid.org/packages/com.drip/)

components/home.js

@@ -35,16 +35,19 @@ class Home extends Component {
     const { status, phase, statusText } =
       getFertilityStatusForDay(this.todayDateString)
     const prediction = getPredictedMenses()
-
-    this.cycleDayText = !this.cycleDayNumber ? labels.cycleDayNotEnoughInfo
-      : formatWithOrdinalSuffix(this.cycleDayNumber)
-    this.phase = phase
-    this.phaseText = !phase ? statusText : formatWithOrdinalSuffix(phase)
     this.prediction = determinePredictionText(prediction)
-    this.status = status
-    this.statusText = statusText
-    this.title = `${today.dayOfMonth()} ${today.month()}`
-
+    this.title = `${today.dayOfMonth()} ${today.month()} ${today.year()}`
+
+    if (this.cycleDayNumber) {
+      this.cycleDayText = formatWithOrdinalSuffix(this.cycleDayNumber)
+    }
+
+    if (phase) {
+      this.phase = phase
+      this.phaseText = formatWithOrdinalSuffix(phase)
+      this.status = status
+      this.statusText = statusText
+    }
   }
 
   navigateToCycleDayView = () => {
@@ -54,6 +57,7 @@ class Home extends Component {
 
   render() {
     const {
+      cycleDayNumber,
       cycleDayText,
       phase,
       phaseText,
@@ -69,30 +73,23 @@ class Home extends Component {
         contentContainerStyle={styles.contentContainer}
       >
         <AppText style={styles.title}>{title}</AppText>
-        <View style={styles.line}>
-          {this.cycleDayNumber && (
-            <React.Fragment>
-              <AppText style={styles.whiteText}>{cycleDayText}</AppText>
-              <AppText style={styles.tourquiseText}>{labels.cycleDay}</AppText>
-            </React.Fragment>
-          )}
-          {!this.cycleDayNumber && <AppText>{cycleDayText}</AppText>}
-        </View>
-        <View style={styles.line}>
-          {!phase &&
-            <AppText style={styles.tourquiseText}>{phaseText}</AppText>
-          }
-          {phase && (
-            <React.Fragment>
-              <AppText style={styles.whiteText}>{phaseText}</AppText>
-              <AppText style={styles.tourquiseText}>
-                {labels.cyclePhase}
-              </AppText>
-              <AppText style={styles.tourquiseText}>{status}</AppText>
-              <Asterisk />
-            </React.Fragment>
-          )}
-        </View>
+
+        {cycleDayNumber &&
+          <View style={styles.line}>
+            <AppText style={styles.whiteSubtitle}>{cycleDayText}</AppText>
+            <AppText style={styles.tourquiseText}>{labels.cycleDay}</AppText>
+          </View>
+        }
+        {phase &&
+          <View style={styles.line}>
+            <AppText style={styles.whiteSubtitle}>{phaseText}</AppText>
+            <AppText style={styles.tourquiseText}>
+              {labels.cyclePhase}
+            </AppText>
+            <AppText style={styles.tourquiseText}>{status}</AppText>
+            <Asterisk />
+          </View>
+        }
         <View style={styles.line}>
           <AppText style={styles.tourquiseText}>{prediction}</AppText>
         </View>
@@ -102,7 +99,7 @@ class Home extends Component {
         {phase && (
           <View style={styles.line}>
             <Asterisk />
-            <AppText style={styles.tourquiseText} linkStyle={styles.whiteText}>
+            <AppText linkStyle={styles.whiteText}>
               {statusText}
             </AppText>
           </View>
@@ -119,19 +116,20 @@ const Asterisk = () => {
 const styles = StyleSheet.create({
   asterisk: {
     color: Colors.orange,
-    paddingRight: Spacing.base
+    paddingRight: Spacing.base,
   },
   container: {
     backgroundColor: Colors.purple,
-    flex: 1
+    flex: 1,
   },
   contentContainer: {
-    padding: Spacing.base
+    padding: Spacing.base,
   },
   line: {
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    marginBottom: Spacing.tiny
+    marginBottom: Spacing.tiny,
+    marginTop: Spacing.small,
   },
   title: {
     color: Colors.purpleLight,
@@ -141,9 +139,14 @@ const styles = StyleSheet.create({
   },
   tourquiseText: {
     color: Colors.tourquise,
+    fontSize: Sizes.subtitle,
+  },
+  whiteSubtitle: {
+    color: 'white',
+    fontSize: Sizes.subtitle,
   },
   whiteText: {
-    color: 'white'
+    color: 'white',
   }
 })
 

config.js

+import { PixelRatio } from 'react-native'
+
 export const ACTION_DELETE = 'delete'
 export const ACTION_EXPORT = 'export'
 export const ACTION_IMPORT = 'import'
@@ -14,6 +16,7 @@ export const SYMPTOMS = [
   'note',
 ]
 
+export const fontRatio = PixelRatio.getFontScale()
 export const CHART_COLUMN_WIDTH = 32
 export const CHART_COLUMN_MIDDLE = CHART_COLUMN_WIDTH / 2
 export const CHART_DOT_RADIUS = 6

i18n/en/labels.js

@@ -2,7 +2,6 @@ import labels from './settings'
 const settingsTitles = labels.menuItems
 
 export const home = {
-  cycleDayNotEnoughInfo: "We don't have enough information to know what your current cycle day is.",
   unknown: '?',
   phase: n => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`,
   cycleDay: ' day of your cycle',
@@ -70,7 +69,7 @@ export const stats = {
 }
 
 export const bleedingPrediction = {
-  noPrediction: 'There is not enough period data to predict the next one.',
+  noPrediction: `As soon as you have tracked 3 menstrual cycles, drip will make predictions for the next ones.`,
   predictionInFuture: (startDays, endDays) => `Your next period is likely to start in ${startDays} to ${endDays} days.`,
   predictionStartedXDaysLeft: (numberOfDays) => `Your period is likely to start today or during the next ${numberOfDays} days.`,
   predictionStarted1DayLeft: 'Your period is likely to start today or tomorrow.',

styles/spacing.js

+import { fontRatio } from '../config'
+
 export default {
-  tiny: 4,
-  small: 10,
-  base: 16,
-  large: 20,
+  tiny: 4 / fontRatio,
+  small: 10 / fontRatio,
+  base: 16 / fontRatio,
+  large: 20 / fontRatio,
   symptomTileWidth: '48%',
   textWidth: '70%'
 }
\ No newline at end of file

styles/typography.js

+import { fontRatio } from '../config'
+
 import Colors from './colors'
 import Spacing from './spacing'
 
@@ -7,13 +9,13 @@ export const fonts = {
 }
 
 export const sizes = {
-  tiny: 7,
-  footnote: 10,
-  small: 14,
-  base: 18,
-  subtitle: 22,
-  title: 24,
-  huge: 40
+  tiny: 7 / fontRatio,
+  footnote: 10 / fontRatio,
+  small: 14 / fontRatio,
+  base: 18 / fontRatio,
+  subtitle: 22 / fontRatio,
+  title: 24 / fontRatio,
+  huge: 32 / fontRatio,
 }
 
 const accentText = {
@@ -24,12 +26,12 @@ const accentText = {
 
 const accentTextBig = {
   ...accentText,
-  fontSize: 30,
+  fontSize: 30 / fontRatio,
 }
 
 const accentTextGiant = {
   ...accentText,
-  fontSize: 50,
+  fontSize: 50 / fontRatio,
 }
 
 const accentTextHuge = {