diff --git a/components/common/app-switch.js b/components/common/app-switch.js index 2333c0c..ce835a6 100644 --- a/components/common/app-switch.js +++ b/components/common/app-switch.js @@ -6,13 +6,18 @@ import AppText from './app-text' import { Containers } from '../../styles' -const AppSwitch = ({ onToggle, text, value }) => { +const AppSwitch = ({ onToggle, text, value, trackColor }) => { return ( {text} - + ) } @@ -21,6 +26,7 @@ AppSwitch.propTypes = { onToggle: PropTypes.func.isRequired, text: PropTypes.string, value: PropTypes.bool, + trackColor: PropTypes.string, } const styles = StyleSheet.create({ diff --git a/components/pages.js b/components/pages.js index deb7707..1d4b1d0 100644 --- a/components/pages.js +++ b/components/pages.js @@ -37,13 +37,17 @@ export const pages = [ parent: 'SettingsMenu', }, { - component: 'NfpSettings', + component: 'Customization', parent: 'SettingsMenu', }, { component: 'DataManagement', parent: 'SettingsMenu', }, + { + component: 'Info', + parent: 'SettingsMenu', + }, { component: 'Password', parent: 'SettingsMenu', diff --git a/components/settings/Info.js b/components/settings/Info.js new file mode 100644 index 0000000..9a934f6 --- /dev/null +++ b/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 ( + + + + + {labels.preOvu.title} + + {labels.preOvu.note} + + + ) +} + +Info.propTypes = { + children: PropTypes.node, +} + +export default Info + +const styles = StyleSheet.create({ + icon: { + marginRight: Spacing.base, + }, + line: { + flexDirection: 'row', + alignItems: 'center', + }, + title: { + ...Typography.subtitle, + }, +}) diff --git a/components/settings/customization/index.js b/components/settings/customization/index.js new file mode 100644 index 0000000..373888c --- /dev/null +++ b/components/settings/customization/index.js @@ -0,0 +1,120 @@ +import React, { useState } from 'react' + +import AppPage from '../../common/app-page' +import AppSwitch from '../../common/app-switch' +import AppText from '../../common/app-text' +import TemperatureSlider from './temperature-slider' +import Segment from '../../common/segment' + +import { useCervixObservable, saveUseCervix } from '../../../local-storage' +import { Colors } from '../../../styles' +import labels from '../../../i18n/en/settings' + +const Settings = () => { + const [shouldUseCervix, setShouldUseCervix] = useState( + useCervixObservable.value + ) + + const [isEnabled, setIsEnabled] = useState(true) + const toggleSwitch = () => setIsEnabled((previousState) => !previousState) + + const onCervixToggle = (value) => { + setShouldUseCervix(value) + saveUseCervix(value) + } + + const cervixText = shouldUseCervix + ? labels.useCervix.cervixModeOn + : labels.useCervix.cervixModeOff + + return ( + + + + + + + + + + + + + + + + + + {labels.tempScale.segmentExplainer} + + + + + + + + + + + + ) +} + +export default Settings diff --git a/components/settings/nfp-settings/slider-label.js b/components/settings/customization/slider-label.js similarity index 100% rename from components/settings/nfp-settings/slider-label.js rename to components/settings/customization/slider-label.js diff --git a/components/settings/nfp-settings/temperature-slider.js b/components/settings/customization/temperature-slider.js similarity index 100% rename from components/settings/nfp-settings/temperature-slider.js rename to components/settings/customization/temperature-slider.js diff --git a/components/settings/index.js b/components/settings/index.js index bdbc941..950b138 100644 --- a/components/settings/index.js +++ b/components/settings/index.js @@ -1,6 +1,7 @@ import Reminders from './reminders/reminders' -import NfpSettings from './nfp-settings' +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' @@ -8,8 +9,9 @@ import PrivacyPolicy from './privacy-policy' export default { Reminders, - NfpSettings, + Customization, DataManagement, + Info, Password, About, License, diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js deleted file mode 100644 index bf83580..0000000 --- a/components/settings/nfp-settings/index.js +++ /dev/null @@ -1,73 +0,0 @@ -import React, { useState } from 'react' -import { Platform, StyleSheet, View } from 'react-native' - -import AppIcon from '../../common/app-icon' -import AppPage from '../../common/app-page' -import AppSwitch from '../../common/app-switch' -import AppText from '../../common/app-text' -import TemperatureSlider from './temperature-slider' -import Segment from '../../common/segment' - -import { useCervixObservable, saveUseCervix } from '../../../local-storage' -import { Colors, Spacing, Typography } from '../../../styles' -import labels from '../../../i18n/en/settings' - -const Settings = () => { - const [shouldUseCervix, setShouldUseCervix] = useState( - useCervixObservable.value - ) - - const onCervixToggle = (value) => { - setShouldUseCervix(value) - saveUseCervix(value) - } - - const cervixText = shouldUseCervix - ? labels.useCervix.cervixModeOn - : labels.useCervix.cervixModeOff - - return ( - - - - - {/* for iOS disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */} - {Platform.OS !== 'ios' && ( - - {labels.tempScale.segmentExplainer} - - - )} - - - - {labels.preOvu.title} - - {labels.preOvu.note} - - - ) -} - -export default Settings - -const styles = StyleSheet.create({ - icon: { - marginRight: Spacing.base, - }, - line: { - flexDirection: 'row', - alignItems: 'center', - }, - title: { - ...Typography.subtitle, - }, -}) diff --git a/components/settings/settings-menu.js b/components/settings/settings-menu.js index fa2a65d..773ca2e 100644 --- a/components/settings/settings-menu.js +++ b/components/settings/settings-menu.js @@ -7,10 +7,11 @@ import MenuItem from './menu-item' import { useTranslation } from 'react-i18next' const menuItems = [ + { label: 'customization', componentName: 'Customization' }, { label: 'reminders', componentName: 'Reminders' }, - { label: 'nfpSettings', componentName: 'NfpSettings' }, { label: 'dataManagement', componentName: 'DataManagement' }, { label: 'password', componentName: 'Password' }, + { label: 'info', componentName: 'Info' }, ] const SettingsMenu = ({ navigate }) => { diff --git a/i18n/en.json b/i18n/en.json index 90e8a60..f3d6bff 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -116,9 +116,9 @@ "name": "Data", "text": "import, export or delete your data" }, - "nfpSettings": { - "name": "NFP settings", - "text": "define how you want to use NFP" + "customization": { + "name": "Customization", + "text": "define how you want to use drip" }, "password": { "name": "Password", @@ -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": {