Merge branch '432-button-for-email-contact-instead-of-hyperlink' into 'master'

Chore: Adds buttons instead of links to about

Closes #432

See merge request bloodyhealth/drip!384

components/common/button-row.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+const ButtonRow = ({ children }) => {
+  return <View style={styles.container}>{children}</View>
+}
+
+ButtonRow.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+})
+
+export default ButtonRow

components/settings/about.js

 import React from 'react'
+import { Linking } from 'react-native'
 
 import AppPage from '../common/app-page'
 import AppText from '../common/app-text'
 import Segment from '../common/segment'
+import Button from '../common/button'
+import ButtonRow from '../common/button-row'
 
 import labels from '../../i18n/en/settings'
 import links from '../../i18n/en/links'
 
 const AboutSection = () => {
   return (
-    <AppPage title={labels.aboutSection.title} >
+    <AppPage title={labels.aboutSection.title}>
       <Segment>
         <AppText>{labels.aboutSection.text}</AppText>
+        <ButtonRow>
+          {[links.email, links.gitlab, links.website].map((link) => (
+            <Button
+              key={link.url}
+              isCTA
+              isSmall
+              onPress={() => Linking.openURL(link.url)}
+            >
+              {link.text}
+            </Button>
+          ))}
+        </ButtonRow>
       </Segment>
       <Segment title={labels.philosophy.title}>
         <AppText>{labels.philosophy.text}</AppText>
@@ -21,9 +36,9 @@ const AboutSection = () => {
       </Segment>
       <Segment title={labels.donate.title}>
         <AppText>{labels.donate.note}</AppText>
-      </Segment>
-      <Segment title={labels.website.title}>
-        <AppText>{links.website.url}</AppText>
+        <Button isCTA isSmall onPress={() => Linking.openURL(links.donate.url)}>
+          {links.donate.text}
+        </Button>
       </Segment>
       <Segment title={labels.version.title} last>
         <AppText>{require('../../package.json').version}</AppText>

i18n/en/links.js

 export default {
   gitlab: {
     url: 'https://gitlab.com/bloodyhealth/drip',
-    text: 'GitLab'
+    text: 'GitLab',
   },
   email: {
-    url: 'mailto:bloodyhealth@mailbox.org',
-    text: 'email'
+    url: 'mailto:drip@mailbox.org',
+    text: 'email',
   },
   wiki: {
     url: 'https://gitlab.com/bloodyhealth/drip/wikis/home',
-    text: 'our wiki'
+    text: 'our wiki',
   },
   website: {
-    url: 'https://bloodyhealth.gitlab.io/'
+    url: 'https://bloodyhealth.gitlab.io/',
+    text: 'Website',
   },
   donate: {
     url: 'https://ko-fi.com/dripapp',
-    text: 'here'
+    text: 'Donate here',
   },
   smashicons: {
     url: 'https://smashicons.com/',

i18n/en/settings.js

@@ -5,34 +5,35 @@ export default {
   menuItems: {
     reminders: {
       name: 'Reminders',
-      text: 'turn on/off reminders'
+      text: 'turn on/off reminders',
     },
     nfpSettings: {
-      name:'NFP settings',
+      name: 'NFP settings',
       text: 'define how you want to use NFP',
     },
     dataManagement: {
       name: 'Data',
-      text: 'import, export or delete your data'
+      text: 'import, export or delete your data',
     },
     password: {
-      name:'Password',
-      text: ''
+      name: 'Password',
+      text: '',
     },
     about: 'About',
     license: 'License',
-    settings: 'Settings'
+    settings: 'Settings',
   },
   export: {
     errors: {
       noData: 'There is no data to export',
       couldNotConvert: 'Could not convert data to CSV',
-      problemSharing: 'There was a problem sharing the data export file'
+      problemSharing: 'There was a problem sharing the data export file',
     },
     title: 'My drip data export',
     subject: 'My drip data export',
     button: 'Export data',
-    segmentExplainer: 'Export data in CSV format for backup or so you can use it elsewhere'
+    segmentExplainer:
+      'Export data in CSV format for backup or so you can use it elsewhere',
   },
   import: {
     button: 'Import data',
@@ -45,93 +46,103 @@ export default {
     errors: {
       couldNotOpenFile: 'Could not open file',
       postFix: 'No data was imported or changed',
-      futureEdit: 'Future dates may only contain a note, no other symptoms'
+      futureEdit: 'Future dates may only contain a note, no other symptoms',
     },
     success: {
-      message: 'Data successfully imported'
+      message: 'Data successfully imported',
     },
-    segmentExplainer: 'Import data in CSV format'
+    segmentExplainer: 'Import data in CSV format',
   },
   deleteSegment: {
     title: 'Delete app data',
     explainer: 'Delete app data from this phone',
     question: 'Do you want to delete app data from this phone?',
-    message: 'Please note that deletion of the app data is permanent and irreversible. We recommend exporting existing data before deletion.',
+    message:
+      'Please note that deletion of the app data is permanent and irreversible. We recommend exporting existing data before deletion.',
     confirmation: 'Delete app data permanently',
     errors: {
       couldNotDeleteFile: 'Could not delete data',
       postFix: 'No data was deleted or changed',
-      noData: 'There is no data to delete'
+      noData: 'There is no data to delete',
     },
     success: {
-      message: 'App data successfully deleted'
-    }
+      message: 'App data successfully deleted',
+    },
   },
   tempScale: {
     segmentTitle: 'Temperature scale',
-    segmentExplainer: 'Change the minimum and maximum value for the temperature chart',
+    segmentExplainer:
+      'Change the minimum and maximum value for the temperature chart',
     min: 'Min',
     max: 'Max',
     loadError: 'Could not load saved temperature scale settings',
-    saveError: 'Could not save temperature scale settings'
+    saveError: 'Could not save temperature scale settings',
   },
   tempReminder: {
     title: 'Temperature reminder',
     noTimeSet: 'Set a time for a daily reminder to take your temperature',
-    timeSet: time => `Daily reminder set for ${time}`,
-    notification: 'Record your morning temperature'
+    timeSet: (time) => `Daily reminder set for ${time}`,
+    notification: 'Record your morning temperature',
   },
   periodReminder: {
     title: 'Next period reminder',
-    reminderText: 'Get a notification 3 days before your next period is likely to start.',
-    notification: daysToEndOfPrediction => `Your next period is likely to start in 3 to ${daysToEndOfPrediction} days.`
+    reminderText:
+      'Get a notification 3 days before your next period is likely to start.',
+    notification: (daysToEndOfPrediction) =>
+      `Your next period is likely to start in 3 to ${daysToEndOfPrediction} days.`,
   },
   useCervix: {
     title: 'Secondary symptom',
-    cervixModeOn: 'Cervix values are being used for symptothermal fertility detection. You can switch here to use cervical mucus values for symptothermal fertility detection',
-    cervixModeOff: 'By default, cervical mucus values are being used for symptothermal fertility detection. You can switch here to use cervix values for symptothermal fertility detection'
+    cervixModeOn:
+      'Cervix values are being used for symptothermal fertility detection. You can switch here to use cervical mucus values for symptothermal fertility detection',
+    cervixModeOff:
+      'By default, cervical mucus values are being used for symptothermal fertility detection. You can switch here to use cervix values for symptothermal fertility detection',
   },
   passwordSettings: {
     title: 'App password',
-    explainerDisabled: "Encrypt the app's database with a password. You need to enter the password every time the app is started.",
-    explainerEnabled: "Password protection and database encryption is currently enabled",
+    explainerDisabled:
+      "Encrypt the app's database with a password. You need to enter the password every time the app is started.",
+    explainerEnabled:
+      'Password protection and database encryption is currently enabled',
     setPassword: 'Set password',
     savePassword: 'Save password',
     changePassword: 'Change password',
     deletePassword: 'Delete password',
-    enterCurrent: "Please enter your current password",
-    enterNew: "Please enter a new password",
-    confirmPassword: "Please confirm your password",
+    enterCurrent: 'Please enter your current password',
+    enterNew: 'Please enter a new password',
+    confirmPassword: 'Please confirm your password',
     passwordsDontMatch: "Password and confirmation don't match",
     backupReminderTitle: 'Read this before making changes to your password',
-    backupReminder: 'Just to be safe, please backup your data using the export function before making changes to your password.\n\nLonger passwords are better! Consider using a passphrase.\n\nPlease also make sure you do not lose your password. There is no way to recover your data if you do.\n\nMaking any changes to your password setting will keep your data as it was before and restart the app.',
+    backupReminder:
+      'Just to be safe, please backup your data using the export function before making changes to your password.\n\nLonger passwords are better! Consider using a passphrase.\n\nPlease also make sure you do not lose your password. There is no way to recover your data if you do.\n\nMaking any changes to your password setting will keep your data as it was before and restart the app.',
     deleteBackupReminderTitle: 'Read this before deleting your password',
-    deleteBackupReminder: 'Deleting your password means your data will no longer be encrypted.\n\nJust to be safe, please backup your data using the export function before deleting your password.\n\nMaking any changes to your password setting will keep your data as it was before and restart the app.',
+    deleteBackupReminder:
+      'Deleting your password means your data will no longer be encrypted.\n\nJust to be safe, please backup your data using the export function before deleting your password.\n\nMaking any changes to your password setting will keep your data as it was before and restart the app.',
   },
   aboutSection: {
     title: 'About',
-    text: `Please note that your data is stored locally on your phone and not on a server. This means your data cannot be read by anyone else unless they have access to your phone. We want to ensure that you stay in control of your own data. 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 ${links.email.url}. You can also contribute to the code base on ${links.gitlab.url}`,
+    text: `Please note that your data is stored locally on your phone and not on a server. This means your data cannot be read by anyone else unless they have access to your phone. We want to ensure that you stay in control of your own data. 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. You can also contribute to the code base on Gitlab and visit our website.`,
   },
   philosophy: {
     title: 'Remember to think for yourself',
     text: `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.`,
   },
   version: {
-    title: 'Version'
+    title: 'Version',
   },
   website: {
-    title: 'Website'
+    title: 'Website',
   },
   preOvu: {
     title: 'Infertile days at cycle start',
-    note: `drip applies NFP's rules for calculating infertile days at the start of the cycle (see ${links.wiki.url} 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 ${links.wiki.url} 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.`,
   },
   credits: {
     title: 'Credits',
-    note: `We love the drip team. Thanks and lots of <3 to all of our condriputors. Thanks to Paula Härtel for the symptom tracking icons. All the other icons are made by ${links.smashicons.url}, ${links.pause08.url}, ${links.kazachek.url} & ${links.freepik.url} from ${links.flaticon.url}.`
+    note: `We love the drip team. Thanks and lots of <3 to all of our condriputors. Thanks to Paula Härtel for the symptom tracking icons. All the other icons are made by ${links.smashicons.url}, ${links.pause08.url}, ${links.kazachek.url} & ${links.freepik.url} from ${links.flaticon.url}.`,
   },
   donate: {
     title: 'Buy us a coffee!',
-    note: `The Bloody Health team is always grateful for donations, big or small, that help us maintain this app and develop new features. You can donate ${links.donate.url}. Thank you! You're awesome.`
-  }
+    note: `The drips are always grateful for donations, big or small, that help us maintain this app and develop new features. You can donate via Ko-fi. Thank you! You're awesome.`,
+  },
 }