changes in customization texts and small changes to styling

components/common/app-switch.js

@@ -34,10 +34,10 @@ AppSwitch.propTypes = {
 const styles = StyleSheet.create({
   container: {
     ...Containers.rowContainer,
+    marginTop: Spacing.tiny,
   },
   switch: {
     flex: 1,
-    marginBottom: Spacing.tiny,
     transform:
       Platform.OS === 'ios'
         ? [{ scaleX: 0.8 }, { scaleY: 0.8 }]

components/settings/customization/index.js

@@ -246,23 +246,21 @@ const Settings = () => {
         />
       </Segment>
       <Pressable onPress={sliderDisabledPrompt}>
-
         <Segment title={labels.fertilityTracking.title}>
           {isTemperatureTrackingCategoryEnabled &&
-           isMucusTrackingCategoryEnabled ||
-           isCervixTrackingCategoryEnabled ?
-           (
-              <>
-                <AppSwitch
-                  onToggle={fertilityTrackingToggle}
-                  text={fertilityTrackingText}
-                  value={isFertilityTrackingEnabled}
-                />
-              </>
-            ) :
-            (
+          (isMucusTrackingCategoryEnabled ||
+            isCervixTrackingCategoryEnabled) ? (
+            <>
+              <AppText>{labels.fertilityTracking.message}</AppText>
+              <AppSwitch
+                onToggle={fertilityTrackingToggle}
+                text={fertilityTrackingText}
+                value={isFertilityTrackingEnabled}
+              />
+            </>
+          ) : (
             <AppText>{labels.disabled.message}</AppText>
-            )}
+          )}
         </Segment>
       </Pressable>