Introduces SettingsMenu component redesign

components/common/app-icon.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet } from 'react-native'
+import Icon from 'react-native-vector-icons/Entypo'
+
+import { Colors, Sizes } from '../../styles/redesign'
+
+const AppIcon = ({ isCTA, name }) => {
+  const style = isCTA ? styles.iconCTA : styles.icon
+
+  return <Icon name={name} style={style}/>
+}
+
+AppIcon.propTypes = {
+  isCTA: PropTypes.bool,
+  name: PropTypes.string.isRequired
+}
+
+AppIcon.defaultProps = {
+  isCTA: true
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    color: 'black',
+    fontSize: Sizes.subtitle
+  },
+  iconCTA: {
+    color: Colors.orange,
+    fontSize: Sizes.subtitle
+  }
+})
+
+export default AppIcon

components/common/segment.js

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
 
-import { Colors, Spacing, Sizes, Typography } from '../../styles/redesign'
+import { Containers, Spacing, Sizes, Typography } from '../../styles/redesign'
 
 const Segment = ({ children, last, title }) => {
   const containerStyle = last ? styles.containerLast : styles.container
@@ -23,13 +23,6 @@ Segment.propTypes = {
   title: PropTypes.string
 }
 
-const bottomBorder = {
-  borderStyle: 'solid',
-  borderBottomWidth: 2,
-  borderBottomColor: Colors.grey,
-  paddingBottom: Spacing.base
-}
-
 const segmentContainer = {
   marginHorizontal: Spacing.base,
   marginBottom: Spacing.base,
@@ -38,7 +31,7 @@ const segmentContainer = {
 const styles = StyleSheet.create({
   container: {
     ...segmentContainer,
-    ...bottomBorder
+    ...Containers.bottomBorder
   },
   containerLast: {
     ...segmentContainer

components/pages.js

@@ -2,7 +2,7 @@ import symptomViews from './cycle-day/symptoms'
 import settingsViews from './settings'
 
 import settingsLabels from '../i18n/en/settings'
-const labels = settingsLabels.menuTitles
+const labels = settingsLabels.menuItems
 
 const symptomsPages = Object.keys(symptomViews).map(symptomView => ({
   component: symptomView,
@@ -53,32 +53,32 @@ export const pages = [
   },
   {
     component: 'Reminders',
-    label: labels.reminders,
+    label: labels.reminders.name,
     parent: 'SettingsMenu',
   },
   {
     component: 'NfpSettings',
-    label: labels.nfpSettings,
+    label: labels.nfpSettings.name,
     parent: 'SettingsMenu',
   },
   {
     component: 'DataManagement',
-    label: labels.dataManagement,
+    label: labels.dataManagement.name,
     parent: 'SettingsMenu',
   },
   {
     component: 'Password',
-    label: labels.password,
+    label: labels.password.name,
     parent: 'SettingsMenu',
   },
   {
     component: 'About',
-    label: labels.about,
+    label: 'About',
     parent: 'SettingsMenu',
   },
   {
     component: 'License',
-    label: labels.license,
+    label: 'License',
     parent: 'SettingsMenu',
   },
   {

components/settings/settings-menu.js

@@ -1,51 +1,83 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { TouchableOpacity, ScrollView } from 'react-native'
-import { connect } from 'react-redux'
-
-import { navigate } from '../../slices/navigation'
-
-import styles from '../../styles/index'
-
-import settingsLabels from '../../i18n/en/settings'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
+import AppIcon from '../common/app-icon'
+import AppPage from '../common/app-page'
 import AppText from '../common/app-text'
 
-const labels = settingsLabels.menuTitles
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
 
+import { Colors, Containers, Sizes, Spacing } from '../../styles/redesign'
+import settingsLabels from '../../i18n/en/settings'
+
+const { menuItems } = settingsLabels
 const menu = [
-  {title: labels.reminders, component: 'Reminders'},
-  {title: labels.nfpSettings, component: 'NfpSettings'},
-  {title: labels.dataManagement, component: 'DataManagement'},
-  {title: labels.password, component: 'Password'},
-  {title: labels.about, component: 'About'},
-  {title: labels.license, component: 'License'}
+  { ...menuItems.reminders, component: 'Reminders'},
+  { ...menuItems.nfpSettings, component: 'NfpSettings'},
+  { ...menuItems.dataManagement, component: 'DataManagement'},
+  { ...menuItems.password, component: 'Password'}
 ]
 
 const SettingsMenu = ({ navigate }) => {
   return (
-    <ScrollView>
-      { menu.map(menuItem)}
-    </ScrollView>
+    <AppPage title={settingsLabels.title}>
+      {menu.map((menuItem, i) =>
+        <MenuItem item={menuItem} i={i} navigate={navigate} key={i}/>
+      )}
+    </AppPage>
   )
-
-  function menuItem(item) {
-    return (
-      <TouchableOpacity
-        style={styles.framedSegment}
-        key={item.title}
-        onPress={() => navigate(item.component)}
-      >
-        <AppText>{item.title.toLowerCase()}</AppText>
-      </TouchableOpacity>
-    )
-  }
 }
 
 SettingsMenu.propTypes = {
   navigate: PropTypes.func.isRequired
 }
 
+const MenuItem = ({ i, item, navigate }) => {
+  const isLast = (menu.length === i + 1)
+  const containerStyle = isLast ? styles.containerLast : styles.container
+
+  return (
+    <TouchableOpacity
+      style={containerStyle}
+      key={item.name}
+      onPress={() => navigate(item.component)}
+    >
+      <View>
+        <AppText style={styles.title}>{item.name}</AppText>
+        {item.text.length > 0 && <AppText>{item.text}</AppText>}
+      </View>
+      <AppIcon name={'chevron-right'} isCTA/>
+    </TouchableOpacity>
+  )
+}
+
+MenuItem.propTypes = {
+  i: PropTypes.number.isRequired,
+  item: PropTypes.object.isRequired,
+  navigate: PropTypes.func.isRequired
+}
+
+const menuItemContainer = {
+  margin: Spacing.base,
+  ...Containers.rowContainer
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...menuItemContainer,
+    ...Containers.bottomBorder
+  },
+  containerLast: {
+    ...menuItemContainer
+  },
+  title: {
+    color: Colors.purple,
+    fontSize: Sizes.subtitle
+  },
+})
+
 const mapDispatchToProps = (dispatch) => {
   return({
     navigate: (page) => dispatch(navigate(page)),

i18n/en/labels.js

@@ -1,5 +1,5 @@
 import labels from './settings'
-const settingsTitles = labels.menuTitles
+const settingsTitles = labels.menuItems
 
 export const shared = {
   cancel: 'Cancel',
@@ -27,12 +27,12 @@ export const headerTitles = {
   Chart: 'Chart',
   Stats: 'Statistics',
   SettingsMenu: 'Settings',
-  Reminders: settingsTitles.reminders,
-  NfpSettings: settingsTitles.nfpSettings,
-  DataManagement: settingsTitles.dataManagement,
-  Password: settingsTitles.password,
-  About: settingsTitles.about,
-  License: settingsTitles.license,
+  Reminders: settingsTitles.reminders.name,
+  NfpSettings: settingsTitles.nfpSettings.name,
+  DataManagement: settingsTitles.dataManagement.name,
+  Password: settingsTitles.password.name,
+  About: 'About',
+  License: 'License',
   bleeding: 'Bleeding',
   temperature: 'Temperature',
   mucus: 'Cervical Mucus',

i18n/en/settings.js

@@ -3,13 +3,24 @@ import links from './links'
 const currentYear = new Date().getFullYear()
 
 export default {
-  menuTitles: {
-    reminders: 'Reminders',
-    dataManagement: 'Manage your data',
-    nfpSettings: 'NFP settings',
-    password: 'Password',
-    about: 'About',
-    license: 'License'
+  title: 'Settings',
+  menuItems: {
+    reminders: {
+      name: 'Reminders',
+      text: 'turn on/off reminders'
+    },
+    nfpSettings: {
+      name:'NFP settings',
+      text: 'define how you want to use NFP',
+    },
+    dataManagement: {
+      name: 'Data',
+      text: 'import, export or delete your data'
+    },
+    password: {
+      name:'Password',
+      text: ''
+    }
   },
   export: {
     errors: {

styles/containers.js

@@ -1,4 +1,13 @@
+import Colors from './colors'
+import Spacing from './spacing'
+
 export default {
+  bottomBorder: {
+    borderStyle: 'solid',
+    borderBottomWidth: 2,
+    borderBottomColor: Colors.grey,
+    paddingBottom: Spacing.base
+  },
   centerItems: {
     alignItems: 'center',
     flex: 1,

styles/spacing.js

@@ -1,4 +1,5 @@
 export default {
+  small: 10,
   base: 16,
   large: 20
 }