Rearrange segments in customization + add subheader

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 (
     <View style={commonStyle}>
       {title && <AppText style={styles.title}>{title}</AppText>}
+      {subheader && <AppText style={styles.subheader}>{subheader}</AppText>}
       {children}
     </View>
   )
@@ -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

components/settings/customization/index.js

@@ -274,6 +274,7 @@ const Settings = () => {
           symptom={SYMPTOMS[8]}
         />
       </Segment>
+
       <Pressable onPress={fertilityDisabledPrompt}>
         <Segment title={labels.fertilityTracking.title}>
           <AppText>{labels.fertilityTracking.message}</AppText>
@@ -286,6 +287,19 @@ const Settings = () => {
         </Segment>
       </Pressable>
 
+      <Segment title={labels.periodPrediction.title}>
+        <AppSwitch
+          onToggle={onPeriodPredictionToggle}
+          text={periodPredictionText}
+          value={isPeriodPredictionEnabled}
+        />
+      </Segment>
+
+      <Segment
+        subheader={labels.customization.subheaderSymptoThermalMethod}
+        last
+      ></Segment>
+
       <Pressable onPress={sliderDisabledPrompt}>
         <Segment title={labels.tempScale.segmentTitle}>
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
@@ -294,7 +308,7 @@ const Settings = () => {
       </Pressable>
 
       <Pressable onPress={secondarySymptomDisabledPrompt}>
-        <Segment title={labels.secondarySymptom.title}>
+        <Segment last title={labels.secondarySymptom.title}>
           <AppText>{cervixText}</AppText>
           <SelectTabGroup
             activeButton={useCervixAsSecondarySymptom}
@@ -304,14 +318,6 @@ const Settings = () => {
           />
         </Segment>
       </Pressable>
-
-      <Segment title={labels.periodPrediction.title} last>
-        <AppSwitch
-          onToggle={onPeriodPredictionToggle}
-          text={periodPredictionText}
-          value={isPeriodPredictionEnabled}
-        />
-      </Segment>
     </AppPage>
   )
 }

i18n/en/settings.js

@@ -4,6 +4,7 @@ export default {
   customization: {
     title: 'Customization',
     trackingCategories: 'Tracking categories',
+    subheaderSymptoThermalMethod: 'Sympto-thermal method settings',
   },
   export: {
     errors: {

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