Add info section under settings

components/pages.js

@@ -44,6 +44,10 @@ export const pages = [
     component: 'DataManagement',
     parent: 'SettingsMenu',
   },
+  {
+    component: 'Info',
+    parent: 'SettingsMenu',
+  },
   {
     component: 'Password',
     parent: 'SettingsMenu',

components/settings/Info.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+
+import AppIcon from '../common/app-icon'
+import AppPage from '../common/app-page'
+import AppText from '../common/app-text'
+import Segment from '../common/segment'
+
+import { Colors, Spacing, Typography } from '../../styles'
+import labels from '../../i18n/en/settings'
+
+const Info = () => {
+  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.info' })
+  return (
+    <AppPage title={t('title')}>
+      <Segment last>
+        <View style={styles.line}>
+          <AppIcon
+            color={Colors.purple}
+            name="info-with-circle"
+            style={styles.icon}
+          />
+          <AppText style={styles.title}>{labels.preOvu.title}</AppText>
+        </View>
+        <AppText>{labels.preOvu.note}</AppText>
+      </Segment>
+    </AppPage>
+  )
+}
+
+Info.propTypes = {
+  children: PropTypes.node,
+}
+
+export default Info
+
+const styles = StyleSheet.create({
+  icon: {
+    marginRight: Spacing.base,
+  },
+  line: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    ...Typography.subtitle,
+  },
+})

components/settings/index.js

@@ -1,6 +1,7 @@
 import Reminders from './reminders/reminders'
 import Customization from './customization'
 import DataManagement from './data-management/DataManagement'
+import Info from './Info'
 import Password from './password'
 import About from './About'
 import License from './License'
@@ -10,6 +11,7 @@ export default {
   Reminders,
   Customization,
   DataManagement,
+  Info,
   Password,
   About,
   License,

components/settings/settings-menu.js

@@ -11,6 +11,7 @@ const menuItems = [
   { label: 'reminders', componentName: 'Reminders' },
   { label: 'dataManagement', componentName: 'DataManagement' },
   { label: 'password', componentName: 'Password' },
+  { label: 'info', componentName: 'Info' },
 ]
 
 const SettingsMenu = ({ navigate }) => {

i18n/en.json

@@ -127,9 +127,16 @@
         "reminders": {
           "name": "Reminders",
           "text": "turn on/off reminders"
+        },
+        "info": {
+          "name": "Info",
+          "text": "Learn more about how drip works"
         }
       },
       "title": "Settings"
+    },
+    "info": {
+      "title": "info"
     }
   },
   "stats": {