diff --git a/README.md b/README.md
index a7c4315..b088d35 100644
--- a/README.md
+++ b/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/).
+[
](https://bloodyhealth.gitlab.io/release/5.apk)
[
](https://f-droid.org/packages/com.drip/)
diff --git a/components/home.js b/components/home.js
index aabd81b..3db3507 100644
--- a/components/home.js
+++ b/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}
>
{title}
-
- {this.cycleDayNumber && (
-
- {cycleDayText}
- {labels.cycleDay}
-
- )}
- {!this.cycleDayNumber && {cycleDayText}}
-
-
- {!phase &&
- {phaseText}
- }
- {phase && (
-
- {phaseText}
-
- {labels.cyclePhase}
-
- {status}
-
-
- )}
-
+
+ {cycleDayNumber &&
+
+ {cycleDayText}
+ {labels.cycleDay}
+
+ }
+ {phase &&
+
+ {phaseText}
+
+ {labels.cyclePhase}
+
+ {status}
+
+
+ }
{prediction}
@@ -102,7 +99,7 @@ class Home extends Component {
{phase && (
-
+
{statusText}
@@ -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',
}
})
diff --git a/config.js b/config.js
index 71855b6..4053b74 100644
--- a/config.js
+++ b/config.js
@@ -1,3 +1,5 @@
+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
diff --git a/i18n/en/labels.js b/i18n/en/labels.js
index ce66229..3fb046b 100644
--- a/i18n/en/labels.js
+++ b/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.',
diff --git a/styles/spacing.js b/styles/spacing.js
index b665347..50eb0d7 100644
--- a/styles/spacing.js
+++ b/styles/spacing.js
@@ -1,8 +1,10 @@
+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
diff --git a/styles/typography.js b/styles/typography.js
index f0f6bb5..2ea043d 100644
--- a/styles/typography.js
+++ b/styles/typography.js
@@ -1,3 +1,5 @@
+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 = {