Merge branch '153-note-about-minus-20-rule-not-taken-into-account' into 'master'

Resolve "Note about Minus 20 rule not taken into account"

Closes #153

See merge request bloodyhealth/drip!141

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 (
-      <Text style={[styles.appText, this.props.style]}>
-        {this.props.children}
-      </Text>
-    )
-  }
+export default function AppText(props) {
+  return (
+    <Text
+      style={[styles.appText, props.style]}
+      onPress={props.onPress}
+    >
+      {props.children}
+    </Text>
+  )
 }
 
-export class AppTextLight extends Component {
-  render() {
-    return (
-      <Text style={[styles.appTextLight, this.props.style]}>
-        {this.props.children}
-      </Text>
-    )
-  }
+export function AppTextLight(props) {
+  return (
+    <Text style={[styles.appTextLight, props.style]}>
+      {props.children}
+    </Text>
+  )
 }
 
-export class SymptomSectionHeader extends Component {
-  render() {
-    return (
-      <AppText style={styles.symptomViewHeading}>
-        {this.props.children}
-      </AppText>
-    )
-  }
+export function SymptomSectionHeader(props) {
+  return (
+    <AppText style={styles.symptomViewHeading}>
+      {props.children}
+    </AppText>
+  )
 }

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 (
+    <AppText
+      style={styles.link}
+      onPress={() => Linking.openURL(props.href)}
+    >{props.text}</AppText>
+  )
+}

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 {
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
         </View>
+        <View style={[styles.settingsSegment, styles.settingsSegmentLast]}>
+          <View style={{flexDirection: 'row', alignItems: 'center'}}>
+            <Icon name="info-with-circle" style={iconStyles.infoInHeading}/>
+            <AppText style={styles.settingsSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
+          </View>
+          <AppText>
+            {labels.preOvu.note1}
+            <Link text={labels.preOvu.link} href="https://gitlab.com/bloodyhealth/drip/wikis/home" />
+            {labels.preOvu.note2}
+          </AppText>
+        </View>
       </ScrollView>
     )
   }