Add colored tracking icons to customization toggles

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 {
@@ -199,49 +200,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={sliderDisabledPrompt}>

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,