diff --git a/components/common/app-icon.js b/components/common/app-icon.js new file mode 100644 index 0000000..03bdb5e --- /dev/null +++ b/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 +} + +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 \ No newline at end of file diff --git a/components/common/segment.js b/components/common/segment.js index 1405845..edc525e 100644 --- a/components/common/segment.js +++ b/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 diff --git a/components/pages.js b/components/pages.js index 943a6a9..3f11562 100644 --- a/components/pages.js +++ b/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', }, { diff --git a/components/settings/settings-menu.js b/components/settings/settings-menu.js index 9f511cf..0305aad 100644 --- a/components/settings/settings-menu.js +++ b/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 ( - - { menu.map(menuItem)} - + + {menu.map((menuItem, i) => + + )} + ) - - function menuItem(item) { - return ( - navigate(item.component)} - > - {item.title.toLowerCase()} - - ) - } } 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 ( + navigate(item.component)} + > + + {item.name} + {item.text.length > 0 && {item.text}} + + + + ) +} + +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)), diff --git a/i18n/en/labels.js b/i18n/en/labels.js index 8047813..7aec163 100644 --- a/i18n/en/labels.js +++ b/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', diff --git a/i18n/en/settings.js b/i18n/en/settings.js index 36f63de..c1f6ec6 100644 --- a/i18n/en/settings.js +++ b/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: { diff --git a/styles/containers.js b/styles/containers.js index d50910e..78194a4 100644 --- a/styles/containers.js +++ b/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, diff --git a/styles/spacing.js b/styles/spacing.js index d1dece0..9b2a0b5 100644 --- a/styles/spacing.js +++ b/styles/spacing.js @@ -1,4 +1,5 @@ export default { + small: 10, base: 16, large: 20 } \ No newline at end of file