From 8696a6d7eaf56bfa9286132376f48067fe31740f Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Thu, 20 Dec 2018 14:52:00 +0100
Subject: [PATCH 1/4] Add info text

---
 components/settings/nfp-settings/index.js | 4 ++++
 i18n/en/settings.js                       | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js
index bac516c..35d9a25 100644
--- a/components/settings/nfp-settings/index.js
+++ b/components/settings/nfp-settings/index.js
@@ -25,6 +25,10 @@ export default class Settings extends Component {
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
         </View>
+        <View style={styles.settingsSegment}>
+          <AppText style={styles.settingsSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
+          <AppText>{`${labels.preOvu.note} `}</AppText>
+        </View>
       </ScrollView>
     )
   }
diff --git a/i18n/en/settings.js b/i18n/en/settings.js
index d230cf0..3351ffa 100644
--- a/i18n/en/settings.js
+++ b/i18n/en/settings.js
@@ -78,5 +78,9 @@ 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',
+    note: "drip applies NFP's rules for calculating infertile days at the start of the cycle (see the wiki 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

From f1b152bb5aaacbb0961ec6546675af95f3b50414 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Thu, 20 Dec 2018 14:59:49 +0100
Subject: [PATCH 2/4] Add icon

---
 components/settings/nfp-settings/index.js | 8 ++++++--
 i18n/en/settings.js                       | 2 +-
 styles/index.js                           | 4 ++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js
index 35d9a25..8375350 100644
--- a/components/settings/nfp-settings/index.js
+++ b/components/settings/nfp-settings/index.js
@@ -2,11 +2,12 @@ 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'
 
 export default class Settings extends Component {
   constructor(props) {
@@ -26,7 +27,10 @@ export default class Settings extends Component {
           <TempSlider/>
         </View>
         <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
+          <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.note} `}</AppText>
         </View>
       </ScrollView>
diff --git a/i18n/en/settings.js b/i18n/en/settings.js
index 3351ffa..a37ca75 100644
--- a/i18n/en/settings.js
+++ b/i18n/en/settings.js
@@ -81,6 +81,6 @@ export default {
   },
   preOvu: {
     title: 'Infertile days at cycle start',
-    note: "drip applies NFP's rules for calculating infertile days at the start of the cycle (see the wiki 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."
+    note: "drip applies NFP's rules for calculating infertile days at the start of the cycle (see the wiki 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..d61b3b7 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -409,4 +409,8 @@ export const iconStyles = {
   menuIconInactive: {
     color: colorInActive,
   },
+  infoInHeading: {
+    marginRight: 5,
+    color: 'black'
+  }
 }
\ No newline at end of file

From 77363511adc93322f19b6ae40da170b0248c2e0e Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Thu, 20 Dec 2018 15:05:25 +0100
Subject: [PATCH 3/4] Add bottom margin

---
 components/settings/nfp-settings/index.js | 2 +-
 styles/index.js                           | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js
index 8375350..a83405e 100644
--- a/components/settings/nfp-settings/index.js
+++ b/components/settings/nfp-settings/index.js
@@ -26,7 +26,7 @@ export default class Settings extends Component {
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
         </View>
-        <View style={styles.settingsSegment}>
+        <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>
diff --git a/styles/index.js b/styles/index.js
index d61b3b7..f4558e4 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -259,6 +259,9 @@ export default StyleSheet.create({
     marginHorizontal: defaultIndentation,
     padding: 7,
   },
+  settingsSegmentLast: {
+    marginBottom: defaultTopMargin,
+  },
   settingsSegmentTitle: {
     fontWeight: 'bold'
   },

From 0aa817957052c320a0cfd75b12e7459b470a912a Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Thu, 20 Dec 2018 15:45:13 +0100
Subject: [PATCH 4/4] Add link

---
 components/app-text.js                    | 47 +++++++++++------------
 components/link.js                        | 13 +++++++
 components/settings/nfp-settings/index.js |  7 +++-
 i18n/en/settings.js                       |  5 ++-
 styles/index.js                           |  4 ++
 5 files changed, 49 insertions(+), 27 deletions(-)
 create mode 100644 components/link.js

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 (
-      <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>
+  )
 }
\ 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 (
+    <AppText
+      style={styles.link}
+      onPress={() => Linking.openURL(props.href)}
+    >{props.text}</AppText>
+  )
+}
\ No newline at end of file
diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js
index a83405e..e975dc7 100644
--- a/components/settings/nfp-settings/index.js
+++ b/components/settings/nfp-settings/index.js
@@ -8,6 +8,7 @@ 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) {
@@ -31,7 +32,11 @@ export default class Settings extends Component {
             <Icon name="info-with-circle" style={iconStyles.infoInHeading}/>
             <AppText style={styles.settingsSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
           </View>
-          <AppText>{`${labels.preOvu.note} `}</AppText>
+          <AppText>
+            {labels.preOvu.note1}
+            <Link text={labels.preOvu.link} href="https://gitlab.com/bloodyhealth/drip/wikis/home" />
+            {labels.preOvu.note2}
+          </AppText>
         </View>
       </ScrollView>
     )
diff --git a/i18n/en/settings.js b/i18n/en/settings.js
index a37ca75..b703703 100644
--- a/i18n/en/settings.js
+++ b/i18n/en/settings.js
@@ -1,3 +1,4 @@
+
 export default {
   menuTitles: {
     reminders: 'Reminders',
@@ -81,6 +82,8 @@ export default {
   },
   preOvu: {
     title: 'Infertile days at cycle start',
-    note: "drip applies NFP's rules for calculating infertile days at the start of the cycle (see the wiki 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."
+    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 f4558e4..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',