diff --git a/components/app-text.js b/components/app-text.js index eabab32..6e996da 100644 --- a/components/app-text.js +++ b/components/app-text.js @@ -1,33 +1,30 @@ -import React, { Component } from 'react' +import React from 'react' import { Text } from 'react-native' import styles from "../styles" -export default class AppText extends Component { - render() { - return ( - - {this.props.children} - - ) - } +export default function AppText(props) { + return ( + + {props.children} + + ) } -export class AppTextLight extends Component { - render() { - return ( - - {this.props.children} - - ) - } +export function AppTextLight(props) { + return ( + + {props.children} + + ) } -export class SymptomSectionHeader extends Component { - render() { - return ( - - {this.props.children} - - ) - } +export function SymptomSectionHeader(props) { + return ( + + {props.children} + + ) } \ No newline at end of file diff --git a/components/link.js b/components/link.js new file mode 100644 index 0000000..f5d2c10 --- /dev/null +++ b/components/link.js @@ -0,0 +1,13 @@ +import React from 'react' +import { Linking } from 'react-native' +import AppText from "./app-text" +import styles from '../styles'; + +export default function Link(props) { + return ( + Linking.openURL(props.href)} + >{props.text} + ) +} \ No newline at end of file diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js index bac516c..e975dc7 100644 --- a/components/settings/nfp-settings/index.js +++ b/components/settings/nfp-settings/index.js @@ -2,11 +2,13 @@ import React, { Component } from 'react' import { ScrollView, View } from 'react-native' -import styles from '../../../styles' +import styles, { iconStyles } from '../../../styles' import labels from '../../../i18n/en/settings' import AppText from '../../app-text' import TempSlider from './temp-slider' import UseCervixSetting from './use-cervix' +import Icon from 'react-native-vector-icons/Entypo' +import Link from '../../link' export default class Settings extends Component { constructor(props) { @@ -25,6 +27,17 @@ export default class Settings extends Component { {labels.tempScale.segmentExplainer} + + + + {`${labels.preOvu.title} `} + + + {labels.preOvu.note1} + + {labels.preOvu.note2} + + ) } diff --git a/i18n/en/settings.js b/i18n/en/settings.js index d230cf0..b703703 100644 --- a/i18n/en/settings.js +++ b/i18n/en/settings.js @@ -1,3 +1,4 @@ + export default { menuTitles: { reminders: 'Reminders', @@ -78,5 +79,11 @@ export default { aboutSection: { title: 'About', segmentExplainer: 'Please note that your data is stored locally on your phone and not on a server. We want to ensure that you stay in control of those sensitive information. If you are planning to switch or reset your phone, please remember to export your data before doing so. You can reinstall the app afterwards and import your data.\n\nIf you encounter any technical issues, don\'t hesitate to contact us via email (bl00dyhealth@mailbox.org). You can also contribute to the code base on GitLab (https://gitlab.com/bloodyhealth/drip/).', + }, + preOvu: { + title: 'Infertile days at cycle start', + note1: "drip applies NFP's rules for calculating infertile days at the start of the cycle (see the ", + link: 'wiki', + note2: " for more info). However, drip does not currently apply the so called 20-day-rule, which determines infertile days at the cycle start from past cycle lengths in case no past symptothermal info is available." } } \ No newline at end of file diff --git a/styles/index.js b/styles/index.js index 852b6fb..1c6cf62 100644 --- a/styles/index.js +++ b/styles/index.js @@ -40,6 +40,10 @@ export default StyleSheet.create({ emphasis: { fontWeight: 'bold', }, + link: { + color: cycleDayColor, + textDecorationLine: 'underline' + }, title: { fontSize: 18, color: 'black', @@ -259,6 +263,9 @@ export default StyleSheet.create({ marginHorizontal: defaultIndentation, padding: 7, }, + settingsSegmentLast: { + marginBottom: defaultTopMargin, + }, settingsSegmentTitle: { fontWeight: 'bold' }, @@ -409,4 +416,8 @@ export const iconStyles = { menuIconInactive: { color: colorInActive, }, + infoInHeading: { + marginRight: 5, + color: 'black' + } } \ No newline at end of file