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%', }