Add WIP for customization section

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 (
     <View style={styles.container}>
       <View style={styles.textContainer}>
         <AppText>{text}</AppText>
       </View>
-      <Switch onValueChange={onToggle} style={styles.switch} value={value} />
+      <Switch
+        onValueChange={onToggle}
+        style={styles.switch}
+        value={value}
+        trackColor={trackColor}
+      />
     </View>
   )
 }
@@ -21,6 +26,7 @@ AppSwitch.propTypes = {
   onToggle: PropTypes.func.isRequired,
   text: PropTypes.string,
   value: PropTypes.bool,
+  trackColor: PropTypes.string,
 }
 
 const styles = StyleSheet.create({

components/settings/customization/index.js

@@ -1,7 +1,5 @@
 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'
@@ -9,7 +7,7 @@ import TemperatureSlider from './temperature-slider'
 import Segment from '../../common/segment'
 
 import { useCervixObservable, saveUseCervix } from '../../../local-storage'
-import { Colors, Spacing, Typography } from '../../../styles'
+import { Colors } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 
 const Settings = () => {
@@ -17,6 +15,9 @@ const Settings = () => {
     useCervixObservable.value
   )
 
+  const [isEnabled, setIsEnabled] = useState(false)
+  const toggleSwitch = () => setIsEnabled((previousState) => !previousState)
+
   const onCervixToggle = (value) => {
     setShouldUseCervix(value)
     saveUseCervix(value)
@@ -27,47 +28,93 @@ const Settings = () => {
     : labels.useCervix.cervixModeOff
 
   return (
-    <AppPage>
+    <AppPage title={'Customization'}>
+      <Segment title={'Tracking categories'}>
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'temperature'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'cervical mucus'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'cervix'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'sex'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'desire'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'pain'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'mood'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'note'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+      </Segment>
+
+      <Segment title={'Fertility feature'}>
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'If turned on ...'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+      </Segment>
+
+      <Segment title={labels.tempScale.segmentTitle}>
+        <AppText>{labels.tempScale.segmentExplainer}</AppText>
+        <TemperatureSlider />
+      </Segment>
+
       <Segment title={labels.useCervix.title}>
         <AppSwitch
           onToggle={onCervixToggle}
           text={cervixText}
           value={shouldUseCervix}
+          trackColor={{ true: Colors.turquoiseDark }}
         />
       </Segment>
-      {/* for iOS disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */}
+
-      {Platform.OS !== 'ios' && (
+      <Segment title={'Period prediction'}>
-        <Segment title={labels.tempScale.segmentTitle}>
+        <AppSwitch
-          <AppText>{labels.tempScale.segmentExplainer}</AppText>
+          onToggle={toggleSwitch}
-          <TemperatureSlider />
+          text={
-        </Segment>
+            'If turned on drip will predict your next menstrual bleeding, after you have tracked 3 complete menstrual cycles.'
-      )}
+          }
-      <Segment last>
+          value={isEnabled}
-        <View style={styles.line}>
+          trackColor={{ true: Colors.turquoiseDark }}
-          <AppIcon
-            color={Colors.purple}
-            name="info-with-circle"
-            style={styles.icon}
         />
-          <AppText style={styles.title}>{labels.preOvu.title}</AppText>
-        </View>
-        <AppText>{labels.preOvu.note}</AppText>
       </Segment>
     </AppPage>
   )
 }
 
 export default Settings
-
-const styles = StyleSheet.create({
-  icon: {
-    marginRight: Spacing.base,
-  },
-  line: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  title: {
-    ...Typography.subtitle,
-  },
-})