diff --git a/components/cycle-day/symptoms/info-symptom.js b/components/cycle-day/symptoms/info-symptom.js
index dc8f365..8ebe170 100644
--- a/components/cycle-day/symptoms/info-symptom.js
+++ b/components/cycle-day/symptoms/info-symptom.js
@@ -1,11 +1,11 @@
import React, { Component } from 'react'
-import {
- View,
- ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import { ScrollView } from 'react-native'
+import Hyperlink from 'react-native-hyperlink'
import AppText from '../../app-text'
-import * as labels from '../../../i18n/en/symptom-info.js'
+import labels from '../../../i18n/en/symptom-info.js'
+import FramedSegment from '../../framed-segment'
+import styles from '../../../styles/index'
+import replace from '../../helpers/replace-url-with-text'
export default class InfoSymptom extends Component {
render() {
@@ -14,6 +14,7 @@ export default class InfoSymptom extends Component {
BleedingEditView: 'bleeding',
CervixEditView: 'cervix',
DesireEditView: 'desire',
+ MoodEditView: 'mood',
MucusEditView: 'mucus',
NoteEditView: 'note',
PainEditView: 'pain',
@@ -21,22 +22,17 @@ export default class InfoSymptom extends Component {
TemperatureEditView: 'temperature'
}
const currentSymptom = symptomMapping[symptomView]
- const currentSymptomText = labels.symptomInfo[currentSymptom]
- const currentSymptomTitle = labels.symptomTitle[currentSymptom]
+
return (
-
-
- {currentSymptomTitle}
-
-
- {currentSymptomText}
- {labels.symptomTitle.currentSymptomTitle}
-
-
- {labels.symptomInfo.currentSymptomText}
-
-
+
+
+ {labels[currentSymptom].text}
+
+
)
}
diff --git a/components/framed-segment.js b/components/framed-segment.js
new file mode 100644
index 0000000..5d2c68f
--- /dev/null
+++ b/components/framed-segment.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View } from 'react-native'
+import AppText from './app-text'
+import styles from '../styles'
+
+const FramedSegment = ({ children, ...props }) => {
+ const style = [styles.framedSegment, props.style]
+ if (props.last) style.push(styles.framedSegmentLast)
+ return (
+
+ {
+ props.title
+ && {props.title}
+ }
+ {children}
+
+ )
+}
+
+FramedSegment.propTypes = {
+ title: PropTypes.string
+}
+
+export default FramedSegment
diff --git a/components/license.js b/components/license.js
index 051e4ec..8e35b2b 100644
--- a/components/license.js
+++ b/components/license.js
@@ -14,7 +14,7 @@ export default function License({setLicense}) {
return (
- {labels.title}
+ {labels.title}
{labels.text}
diff --git a/components/settings/about.js b/components/settings/about.js
index c944d4a..d317316 100644
--- a/components/settings/about.js
+++ b/components/settings/about.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import { ScrollView } from 'react-native'
import Hyperlink from 'react-native-hyperlink'
import AppText from '../app-text'
-import SettingsSegment from './shared/settings-segment'
+import FramedSegment from '../framed-segment'
import styles from '../../styles/index'
import labels, { links } from '../../i18n/en/settings'
import replace from '../helpers/replace-url-with-text'
@@ -11,25 +11,25 @@ export default class AboutSection extends Component {
render() {
return (
-
+
{labels.aboutSection.text}
-
-
+
+
{labels.philosophy.text}
-
-
+
+
{labels.credits.note}
-
-
+
+
{links.website.url}
-
-
+
+
{require('../../package.json').version}
-
+
)
}
diff --git a/components/settings/data-management/index.js b/components/settings/data-management/index.js
index 43b4f48..bbcf9df 100644
--- a/components/settings/data-management/index.js
+++ b/components/settings/data-management/index.js
@@ -1,7 +1,7 @@
import React from 'react'
import { ScrollView } from 'react-native'
import AppText from '../../app-text'
-import SettingsSegment from '../shared/settings-segment'
+import FramedSegment from '../../framed-segment'
import SettingsButton from '../shared/settings-button'
import openImportDialogAndImport from './import-dialog'
import openShareDialogAndExport from './export-dialog'
@@ -11,27 +11,27 @@ import labels from '../../../i18n/en/settings'
const DataManagement = () => {
return (
-
+
{labels.export.segmentExplainer}
{labels.export.button}
-
-
+
+
{labels.import.segmentExplainer}
{labels.import.button}
-
-
+
{labels.deleteSegment.explainer}
-
+
)
}
-export default DataManagement
\ No newline at end of file
+export default DataManagement
diff --git a/components/settings/license.js b/components/settings/license.js
index d3baf8c..ca46509 100644
--- a/components/settings/license.js
+++ b/components/settings/license.js
@@ -10,9 +10,9 @@ export default class License extends Component {
render() {
return (
-
+
- {`${labels.license.title} `}
+ {`${labels.license.title} `}
{`${labels.license.text} `}
diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js
index be392b5..f24a8b6 100644
--- a/components/settings/nfp-settings/index.js
+++ b/components/settings/nfp-settings/index.js
@@ -6,7 +6,7 @@ import Hyperlink from 'react-native-hyperlink'
import styles, { iconStyles } from '../../../styles'
import labels from '../../../i18n/en/settings'
import AppText from '../../app-text'
-import SettingsSegment from '../shared/settings-segment'
+import FramedSegment from '../../framed-segment'
import TempSlider from './temp-slider'
import UseCervixSetting from './use-cervix'
import Icon from 'react-native-vector-icons/Entypo'
@@ -21,23 +21,23 @@ export default class Settings extends Component {
render() {
return (
-
+
-
-
+
+
{labels.tempScale.segmentExplainer}
-
-
+
+
- {`${labels.preOvu.title} `}
+ {`${labels.preOvu.title} `}
{labels.preOvu.note}
-
+
)
}
-}
\ No newline at end of file
+}
diff --git a/components/settings/password/index.js b/components/settings/password/index.js
index d9caf4b..d4d0242 100644
--- a/components/settings/password/index.js
+++ b/components/settings/password/index.js
@@ -3,7 +3,7 @@ import { ScrollView } from 'react-native'
import CreatePassword from './create'
import ChangePassword from './update'
import DeletePassword from './delete'
-import SettingsSegment from '../shared/settings-segment'
+import FramedSegment from '../../framed-segment'
import AppText from '../../app-text'
import {
hasEncryptionObservable
@@ -44,7 +44,7 @@ export default class PasswordSetting extends Component {
return (
-
+
{ isPasswordSet ? explainerEnabled : explainerDisabled }
@@ -62,8 +62,8 @@ export default class PasswordSetting extends Component {
onStartDeletingPassword = {this.onDeletingPassword}
/>
)}
-
+
)
}
-}
\ No newline at end of file
+}
diff --git a/components/settings/reminders/index.js b/components/settings/reminders/index.js
index 92fc461..93425af 100644
--- a/components/settings/reminders/index.js
+++ b/components/settings/reminders/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import {
ScrollView,
} from 'react-native'
-import SettingsSegment from '../shared/settings-segment'
+import FramedSegment from '../../framed-segment'
import TempReminderPicker from './temp-reminder-picker'
import PeriodReminderPicker from './period-reminder'
@@ -17,12 +17,12 @@ export default class Settings extends Component {
render() {
return (
-
+
-
-
+
+
-
+
)
}
diff --git a/components/settings/settings-menu.js b/components/settings/settings-menu.js
index a26a289..616db7f 100644
--- a/components/settings/settings-menu.js
+++ b/components/settings/settings-menu.js
@@ -28,7 +28,7 @@ export default function SettingsMenu(props) {
function menuItem(item) {
return (
props.navigate(item.component)}
>
diff --git a/components/settings/shared/settings-segment.js b/components/settings/shared/settings-segment.js
deleted file mode 100644
index 18d23d7..0000000
--- a/components/settings/shared/settings-segment.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { View } from 'react-native'
-import AppText from '../../app-text'
-import styles from '../../../styles'
-
-const SettingsSegment = ({ children, ...props }) => {
- const style = [styles.settingsSegment, props.style]
- if (props.last) style.push(styles.settingsSegmentLast)
- return (
-
- {
- props.title
- && {props.title}
- }
- {children}
-
- )
-}
-
-SettingsSegment.propTypes = {
- title: PropTypes.string
-}
-
-export default SettingsSegment
\ No newline at end of file
diff --git a/i18n/en/settings.js b/i18n/en/settings.js
index ad6dd47..2f18fcf 100644
--- a/i18n/en/settings.js
+++ b/i18n/en/settings.js
@@ -9,7 +9,7 @@ export const links = {
text: 'email'
},
wiki: {
- url: 'https://gitlab.com/bloodyhealth/drip/wikis/home',
+ url: 'https://gitlab.com/bloodyhealth/drip/wikis/',
text: 'wiki'
},
website: {
diff --git a/i18n/en/symptom-info.js b/i18n/en/symptom-info.js
index 3654f46..5d94092 100644
--- a/i18n/en/symptom-info.js
+++ b/i18n/en/symptom-info.js
@@ -1,45 +1,156 @@
-export const symptomInfo = {
- bleeding: `Tracking menstrual bleeding allows you to know the beginning and the end of a menstrual cycle.
+import {links} from './settings'
-After a while of tracking it you will get an overview of how long your cycles last on average, whether the length of your last cycles vary a lot and how many days of menstrual bleeding you usually experience.
+export const generalInfo = {
+ chartNfp: `On the chart, you can track fertility signs. When both a valid temperature shift and a mucus or cervix shift have been detected, an orange line will be displayed on the chart. This indicates the end of the peri-ovulatory and the beginning of the post-ovulatory phase.`,
+ curiousNfp: `If you are curious to learn more about the sympto-thermal method that is used for fertility tracking within the app, you can visit our ${links.wiki.url}.`,
+ cycleRelation: `It may be influenced by or have an impact on your menstrual cycles and its hormonal changes.`,
+ excludeExplainer: `You can exclude these values, so they won't be taken into account for any fertility calculation.`,
+ nfpTfyReminder: `Drip makes period predictions for you and helps you apply NFP fertility awareness rules. But please remember that this app is made by humans, and humans make mistakes. Always think for yourself: "Does this make sense?" Remember, you don't need an app to understand your cycle! However, drip wants to support you and make period tracking easier, more transparent and secure.
-The app allows you to track different intensity of bleeding: spotting, light, medium and heavy. Every bleeding value that is not excluded is taken into account for fertility calculation and prediction for the start of next cycles.
+Please find more info on the sympto-thermal method in our ${links.wiki.url}.`,
+ noNfpSymptom: `The app allows you to track this symptom for your mere information, it is not taken into account for any calculation. On the chart you can check how often you track this symptom.`
+}
-Excluding bleeding values is for tracking bleeding when it's not marking the start of a new cycle or the continuation of menstrual bleeding the day(s) before,
-e.g. bleeding caused by miscarriage or ovulation.`,
- cervix: `The cervix is located inside the body at the end of the vaginal canal, between the vagina and the uterus.
+export default {
+ bleeding: {
+ title: `Tracking menstrual bleeding`,
+ text: `Tracking menstrual bleeding allows you to know the beginning and the end of a menstrual cycle.
-Tracking how open and how firm the cervix feels like can help determine in which phase of a menstrual cycle you are.
+After tracking at least 3 menstrual cycles, drip will give you an overview of
+· how long your cycles last on average (in "stats"),
+· whether the length of your last cycles vary a lot (in "stats" and in bleeding predictions)
+· and predict your next 3 cycles with a range of 3 or 5 days (on home screen and "calendar").
-When you track your cervix as a secondary symptom in addition to tracking your basal body temperature, the app helps you identify in which phase of your cycle you are.`,
- desire: `Sexual desire can be influenced by the menstrual cycle and its hormonal changes. The app allows you to track the intensity of your sexual desire for your mere information, it is not taken into account for any calculation.`,
- mucus: `Cervical mucus can help determine in which phase of the menstrual cycle you are.
+The app allows you to track different intensities of bleeding. On the chart and on the calendar, bleeding values are colored in different shades of red. The darker, the more intense your bleeding. Every bleeding value that is not excluded is taken into account for fertility calculation and prediction for the start of next cycles.
-When you track your cervical mucus as a secondary symptom in addition to tracking your basal body temperature, the app helps you identify in which phase of your cycle you are.
+Excluding bleeding values is for tracking bleeding when it's not marking the start of a new cycle or the continuation of menstrual bleeding the day(s) before, e.g. bleeding caused by ovulation or a miscarriage.
-The values you enter for both feeling and texture of your cervical mucus are combined by drip into one of five NFP-conforming values, from least to most fertile: t, ∅, f, S, and S+. Please note that drip does not yet support "parenthesis values": According to NFP rules, you can qualify a mucus value by putting parentheses around it, to indicate that it doesn't fully meet the descriptors of one of the five categories, and instead is in between. This functionality will be supported in the future.
-`,
- note: `Note allows you to track any extra information you want to save here.`,
- pain: `Keep track of different kinds of pain you experience. They may be influenced by or have an impact on your menstrual cycles.`,
- sex: `Did you know that having an orgasm can help release cramps?`,
- temperature: `One of the body signs you need to track for knowing your fertility status is your body basal temperature. The body temperature changes over the course of a menstrual cycle, it rises after ovulation.
+When - on a daily/regular basis - you track:
+1. your basal body temperature,
+2. your cervical mucus OR your cervix,
+3. and menstrual bleeding
+the app helps you identify in which phase of your cycle you are.
-What is body basal temperature?
-It's your temperature after laying still for at least 6 hours. For many this is when they are waking up in the morning after sleeping at least 6 hours and before getting up.
+${generalInfo.nfpTfyReminder}`,
+ },
+ cervix: {
+ title: `Tracking your cervix`,
+ text: `The cervix is located inside of the body at the end of the vaginal canal, between the vagina and the uterus.
-Which thermometer to use?
+Tracking how open or closed and how firm or soft the cervix feels can help determine in which phase of the menstrual cycle you are.
+
+By default, the secondary symptom the app uses for NFP evaluation is cervical mucus, but you can change it to cervix in "Settings" -> "NFP Settings". When - on a daily/regular basis - you track:
+1. your basal body temperature,
+2. your cervical mucus OR your cervix,
+3. and menstrual bleeding
+the app helps you identify in which phase of your cycle you are.
+
+· How to identify a fertile cervix?
+When your cervix is rather open and feels soft like your earlobes, in contrast to an infertile cervix that feels rather closed and hard, like the tip of your nose. If the cervix feels anything but closed and hard, drip takes it as a sign of fertility. On the chart, a fertile cervix is colored in dark yellow, and infertile cervix is colored in light yellow.
+
+${generalInfo.chartNfp}
+
+${generalInfo.excludeExplainer}
+
+${generalInfo.nfpTfyReminder}`
+ },
+ desire: {
+ title: 'Tracking sexual desire',
+ text: `The app allows you to track sexual desire independently from sexual activity.
+
+${generalInfo.cycleRelation}
+
+${generalInfo.noNfpSymptom}
+
+${generalInfo.curiousNfp}`
+ },
+ mood: {
+ title: 'Tracking mood',
+ text: `The app allows you to track your mood.
+
+${generalInfo.cycleRelation}
+
+${generalInfo.noNfpSymptom}
+
+${generalInfo.curiousNfp}`
+ },
+ mucus: {
+ title: 'Tracking cervical mucus',
+ text: `Cervical mucus can help determine in which phase of the menstrual cycle you are.
+
+By default the secondary symptom the app uses for NFP evaluation is cervical mucus. When - on a daily/regular basis - you track:
+1. your basal body temperature,
+2. your cervical mucus OR your cervix,
+3. and menstrual bleeding
+the app helps you identify in which phase of your cycle you are.
+
+· How to identify fertile cervical mucus?
+Tracking the feeling and the texture of your cervical mucus on a daily basis helps you identify changes of the quality of the cervical mucus. The values you enter for both feeling and texture of your cervical mucus are combined by drip into one of five NFP-conforming values, from least to most fertile:
+· t (= dry feeling + no texture),
+· ∅ (= no feeling + no texture),
+· f (= wet feeling + no texture),
+· S (= no OR wet feeling + creamy texture),
+· and S+ (= any feeling + egg white texture OR slippery feeling + any texture).
+
+On the chart, fertile mucus is colored in dark blue, and infertile mucus values are colored in lighter shades of blue.
+
+Please note that drip does not yet support "parenthesis values": According to NFP rules, you can qualify a mucus value by putting parentheses around it, to indicate that it doesn't fully meet the descriptors of one of the five categories, and instead is in between. This functionality will be supported in the future.
+
+${generalInfo.chartNfp}
+
+${generalInfo.excludeExplainer}
+
+${generalInfo.nfpTfyReminder}`
+ },
+ note: {
+ title: 'Notes',
+ text: `Note allows you to track any extra information you want to save here. It is the only category that can store information for a date in the future. This can be helpful e.g. for reminding you of an appointment.
+
+${generalInfo.noNfpSymptom}
+
+${generalInfo.curiousNfp}`
+ },
+ pain: {
+ title: 'Tracking pain',
+ text: `The app allows you to keep track of different kinds of pain you experience.
+
+${generalInfo.cycleRelation}
+
+${generalInfo.noNfpSymptom}
+
+${generalInfo.curiousNfp}`
+ },
+ sex: {
+ title: 'Tracking sex and contraceptives',
+ text: `The app allows you to track sex independently from sexual desire. You can differentiate between masturbation and sex with a partner/partners. Here you can also track your contraceptive method(s). Only sexual activity will be shown in the "chart" section, lighter purple indicating solo sex and darker purple partner sex. Did you know that having an orgasm can help release cramps?
+
+${generalInfo.noNfpSymptom}
+
+${generalInfo.curiousNfp}`
+ },
+ temperature: {
+ title: 'Tracking body basal temperature',
+ text: `One of the body signs you need to track for knowing your fertility status is your body basal temperature. The body temperature changes over the course of a menstrual cycle, it rises after ovulation.
+
+By default the secondary symptom is cervical mucus, but you can change it to cervix in "Settings" -> "NFP Settings". When - on a daily/regular basis - you track:
+1. your basal body temperature,
+2. your cervical mucus OR your cervix,
+3. and menstrual bleeding
+the app helps you identify in which phase of your cycle you are.
+
+· What is body basal temperature?
+It's your temperature after lying still for at least 6 hours. For many, this is when they are waking up in the morning after sleeping at least 6 hours and before getting up.
+
+· Which thermometer to use?
The thermometer must indicate 2 decimal places.
-How to measure?
-You can either measure rectally, vaginally or orally. If you chose rectal or vaginal measurement you need to measure for at least 3 minutes long. If you chose oral measurement you want to measure for at least 5 minutes long. Pick one way and stick to it.`
-}
-export const symptomTitle = {
- bleeding: "Tracking menstrual bleeding",
- cervix: "Tracking your cervix",
- desire: "Tracking sexual desire",
- mucus: "Tracking cervixal mucus",
- note: "Notes",
- pain: "Tracking pain",
- sex: "Tracking sex and contraceptives",
- temperature: "Tracking body basal temperature"
+· How to measure?
+You can either measure rectally, vaginally or orally. If you chose rectal or vaginal measurement, you need to measure for at least 3 minutes. If you chose oral measurement, you should measure for at least 5 minutes. Pick one way and stick to it.
+
+${generalInfo.chartNfp}
+
+${generalInfo.excludeExplainer}
+
+${generalInfo.nfpTfyReminder}`
+ },
}
diff --git a/styles/index.js b/styles/index.js
index 86e839a..8893a4e 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -268,7 +268,7 @@ export default StyleSheet.create({
symptomEditButton: {
width: 130
},
- settingsSegment: {
+ framedSegment: {
borderColor: secondaryColor,
borderStyle: 'solid',
borderWidth: 1,
@@ -278,10 +278,10 @@ export default StyleSheet.create({
padding: 7,
fontFamily: textFont
},
- settingsSegmentLast: {
+ framedSegmentLast: {
marginBottom: defaultTopMargin,
},
- settingsSegmentTitle: {
+ framedSegmentTitle: {
fontWeight: 'bold',
fontFamily: textFontBold
},