Merge branch '676-feature-customisation-not-display-mucus-cervix' into 'chore/refactor-customization'

# Conflicts:
#   i18n/en/settings.js

CONTRIBUTING.md

@@ -33,9 +33,10 @@ We are an open source project and we highly appreciate contributions. At the sam
   - 🔮 open source
   - 🩸 feminist and gender inclusive
   - 🔒 secure: data entered stays with that person/on their device
-  - 🔬 science based: we implemented the symptothermal method
-  
+  - 🔬 science-based: we implemented the sympto-thermal method
+
 This means that we will never implement anything that contradicts these core values. Some examples: We will never build a cloud integration, we will never make an ovulation prediction.
+
 - If you would like to make a sustainable contribution to the project, we would be happy to join the game.
 
 ### Reporting Bugs or Making Suggestions
@@ -48,7 +49,6 @@ If you found a bug or have suggestions, please :one: first review the [list of e
 - If you want to open a merge request, yeah :tada: exciting! We are using a template for merge requests to make sure we explain what we have done and why.
 - Keep in mind that people who will review your merge request are more motivated to do so when the merge request is well explained and ideally not too big.
 
-
 ### Thank you
 
 ![](https://media.giphy.com/media/kPA88elN9kYco/giphy.gif)

components/common/tracking-category-switch.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Platform, StyleSheet, Switch, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from './app-text'
+
+import DripIcon from '../../assets/drip-icons'
+import { Colors, Containers, Sizes, Spacing } from '../../styles'
+
+const TrackingCategorySwitch = ({ onToggle, symptom, text, value }) => {
+  const trackColor = { true: Colors.turquoiseDark }
+  const iconColor = value ? Colors.iconColors[symptom].color : Colors.grey
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.iconContainer}>
+        <DripIcon
+          color={iconColor}
+          name={`drip-icon-${symptom}`}
+          size={Sizes.title}
+        />
+      </View>
+      <View style={styles.textContainer}>
+        <AppText>{text}</AppText>
+      </View>
+      <Switch
+        onValueChange={onToggle}
+        style={styles.appSwitch}
+        value={value}
+        trackColor={trackColor}
+      />
+    </View>
+  )
+}
+
+TrackingCategorySwitch.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  symptom: PropTypes.string,
+  text: PropTypes.string,
+  value: PropTypes.bool,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer,
+    marginVertical: Spacing.tiny,
+  },
+  iconContainer: {
+    marginRight: Spacing.tiny,
+    flex: 1,
+  },
+  textContainer: {
+    flex: 5,
+  },
+  appSwitch: {
+    flex: 2,
+    transform:
+      Platform.OS === 'ios'
+        ? [{ scaleX: 0.8 }, { scaleY: 0.8 }]
+        : [{ scaleX: 1 }, { scaleY: 1 }],
+  },
+})
+export default TrackingCategorySwitch

components/settings/customization/index.js

@@ -7,6 +7,7 @@ import AppSwitch from '../../common/app-switch'
 import AppText from '../../common/app-text'
 import TemperatureSlider from './temperature-slider'
 import Segment from '../../common/segment'
+import TrackingCategorySwitch from '../../common/tracking-category-switch'
 import SelectTabGroup from '../../cycle-day/select-tab-group'
 
 import {
@@ -220,49 +221,57 @@ const Settings = () => {
   return (
     <AppPage title={labels.customization.title}>
       <Segment title={labels.customization.trackingCategories}>
-        <AppSwitch
+        <TrackingCategorySwitch
           onToggle={temperatureTrackingCategoryToggle}
           text={t(SYMPTOMS[1])}
           value={isTemperatureTrackingCategoryEnabled}
+          symptom={SYMPTOMS[1]}
         />
-        <AppSwitch
+        <TrackingCategorySwitch
           onToggle={(enabled) => {
             mucusTrackingCategoryToggle(enabled)
           }}
           text={t(SYMPTOMS[2])}
           value={isMucusTrackingCategoryEnabled}
+          symptom={SYMPTOMS[2]}
         />
-        <AppSwitch
+        <TrackingCategorySwitch
           onToggle={(enabled) => {
             cervixTrackingCategoryToggle(enabled)
           }}
           text={t(SYMPTOMS[3])}
           value={isCervixTrackingCategoryEnabled}
+          symptom={SYMPTOMS[3]}
         />
-        <AppSwitch
+        <TrackingCategorySwitch
           onToggle={sexTrackingCategoryToggle}
           text={t(SYMPTOMS[4])}
           value={isSexTrackingCategoryEnabled}
+          symptom={SYMPTOMS[4]}
         />
-        <AppSwitch
+        <TrackingCategorySwitch
           onToggle={desireTrackingCategoryToggle}
           text={t(SYMPTOMS[5])}
           value={isDesireTrackingCategoryEnabled}
+          symptom={SYMPTOMS[5]}
         />
-        <AppSwitch
+        <TrackingCategorySwitch
           onToggle={painTrackingCategoryToggle}
           text={t(SYMPTOMS[6])}
           value={isPainTrackingCategoryEnabled}
+          symptom={SYMPTOMS[6]}
         />
-        <AppSwitch
+        <TrackingCategorySwitch
           onToggle={moodTrackingCategoryToggle}
           text={t(SYMPTOMS[7])}
           value={isMoodTrackingCategoryEnabled}
+          symptom={SYMPTOMS[7]}
         />
-        <AppSwitch
+        <TrackingCategorySwitch
           onToggle={noteTrackingCategoryToggle}
           text={t(SYMPTOMS[8])}
           value={isNoteTrackingCategoryEnabled}
+          symptom={SYMPTOMS[8]}
         />
       </Segment>
       <Pressable onPress={fertilityDisabledPrompt}>

i18n/en/settings.js

@@ -141,6 +141,6 @@ Making any changes to your password setting will keep your data as it was before
   },
   preOvu: {
     title: 'Infertile days at cycle start',
-    note: `drip. applies the sympto-thermal method for calculating infertile days at the start of the cycle (see ${links.wiki.url} for more info). However, drip. does not currently apply the so called 20-day-rule, which determines infertile days at the cycle start from past cycle lengths in case no past symptothermal info is available.`,
+    note: `drip. applies the sympto-thermal method for calculating infertile days at the start of the cycle (see ${links.wiki.url} for more info). However, drip. does not currently apply the so called 20-day-rule, which determines infertile days at the cycle start from past cycle lengths in case no past sympto-thermal info is available.`,
   },
 }

styles/colors.js

@@ -18,6 +18,7 @@ const shadesOfPink = ['#c485a6', '#b15c89', pinkColor] // light to dark
 const lightGreenColor = '#bccd67'
 const orangeColor = '#bc6642'
 const mintColor = '#6ca299'
+const turquoiseDark = '#69CBC1'
 
 export default {
   greyDark: '#555',
@@ -27,7 +28,7 @@ export default {
   orange: '#F38337',
   purple: '#3A2671',
   purpleLight: '#938EB2',
-  turquoiseDark: '#69CBC1',
+  turquoiseDark: turquoiseDark,
   turquoise: '#CFECEA',
   turquoiseLight: '#E9F2ED',
   iconColors: {
@@ -35,6 +36,9 @@ export default {
       color: redColor,
       shades: shadesOfRed,
     },
+    temperature: {
+      color: turquoiseDark,
+    },
     mucus: {
       color: violetColor,
       shades: shadesOfViolet,