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": {