diff --git a/components/common/segment.js b/components/common/segment.js
index 0069666..0f85b7a 100644
--- a/components/common/segment.js
+++ b/components/common/segment.js
@@ -6,13 +6,14 @@ import AppText from './app-text'
import { Colors, Containers, Spacing, Typography } from '../../styles'
-const Segment = ({ children, last, title }) => {
+const Segment = ({ children, last, title, subheader }) => {
const containerStyle = last ? styles.containerLast : styles.container
const commonStyle = Object.assign({}, containerStyle)
return (
{title && {title}}
+ {subheader && {subheader}}
{children}
)
@@ -23,6 +24,7 @@ Segment.propTypes = {
last: PropTypes.bool,
style: PropTypes.object,
title: PropTypes.string,
+ subheader: PropTypes.string,
}
const styles = StyleSheet.create({
@@ -39,6 +41,11 @@ const styles = StyleSheet.create({
title: {
...Typography.subtitle,
},
+ subheader: {
+ ...Typography.subtitle,
+ fontWeight: 'bold',
+ marginBottom: Spacing.zero,
+ },
})
export default Segment
diff --git a/components/settings/customization/index.js b/components/settings/customization/index.js
index d1381aa..27284b3 100644
--- a/components/settings/customization/index.js
+++ b/components/settings/customization/index.js
@@ -274,6 +274,7 @@ const Settings = () => {
symptom={SYMPTOMS[8]}
/>
+
{labels.fertilityTracking.message}
@@ -286,6 +287,19 @@ const Settings = () => {
+
+
+
+
+
+
{labels.tempScale.segmentExplainer}
@@ -294,7 +308,7 @@ const Settings = () => {
-
+
{cervixText}
{
/>
-
-
-
-
)
}
diff --git a/i18n/en/settings.js b/i18n/en/settings.js
index 5748d02..88821e5 100644
--- a/i18n/en/settings.js
+++ b/i18n/en/settings.js
@@ -4,6 +4,7 @@ export default {
customization: {
title: 'Customization',
trackingCategories: 'Tracking categories',
+ subheaderSymptoThermalMethod: 'Sympto-thermal method settings',
},
export: {
errors: {
diff --git a/styles/spacing.js b/styles/spacing.js
index 9c54ca9..7e418f6 100644
--- a/styles/spacing.js
+++ b/styles/spacing.js
@@ -1,10 +1,11 @@
import { scale } from 'react-native-size-matters'
export default {
+ zero: '0%',
tiny: scale(4),
small: scale(10),
base: scale(16),
large: scale(20),
symptomTileWidth: '48%',
- textWidth: '70%'
+ textWidth: '70%',
}