From ffe8fab822333c3ee6935495a0413ec25543540e Mon Sep 17 00:00:00 2001 From: bl00dymarie Date: Wed, 28 Feb 2024 12:27:59 +0100 Subject: [PATCH 1/3] Add colored tracking icons to customization toggles --- components/common/tracking-category-switch.js | 63 +++++++++++++++++++ components/settings/customization/index.js | 25 +++++--- styles/colors.js | 6 +- 3 files changed, 85 insertions(+), 9 deletions(-) create mode 100644 components/common/tracking-category-switch.js diff --git a/components/common/tracking-category-switch.js b/components/common/tracking-category-switch.js new file mode 100644 index 0000000..aef5824 --- /dev/null +++ b/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 ( + + + + + + {text} + + + + ) +} + +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 diff --git a/components/settings/customization/index.js b/components/settings/customization/index.js index 1d6cc3f..6b236a5 100644 --- a/components/settings/customization/index.js +++ b/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 ( - - { mucusTrackingCategoryToggle(enabled) }} text={t(SYMPTOMS[2])} value={isMucusTrackingCategoryEnabled} + symptom={SYMPTOMS[2]} /> - { cervixTrackingCategoryToggle(enabled) }} text={t(SYMPTOMS[3])} value={isCervixTrackingCategoryEnabled} + symptom={SYMPTOMS[3]} /> - - - - - diff --git a/styles/colors.js b/styles/colors.js index f091d02..7baf8cd 100644 --- a/styles/colors.js +++ b/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, From 610383a1035a31886bd72f15e12e5ccd5fee7d83 Mon Sep 17 00:00:00 2001 From: bl00dymarie Date: Wed, 28 Feb 2024 12:50:31 +0100 Subject: [PATCH 2/3] Unify the spelling of "sympto-thermal" --- CONTRIBUTING.md | 6 +++--- i18n/en/settings.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b03cccc..eedb19a 100644 --- a/CONTRIBUTING.md +++ b/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) diff --git a/i18n/en/settings.js b/i18n/en/settings.js index 6f4ae40..0e5f5a1 100644 --- a/i18n/en/settings.js +++ b/i18n/en/settings.js @@ -80,9 +80,9 @@ export default { secondarySymptom: { title: 'Secondary symptom', cervixModeOn: - 'Cervix values are being used for symptothermal fertility detection. You can switch here to use cervical mucus values for symptothermal fertility detection', + 'Cervix values are being used for sympto-thermal fertility detection. You can switch here to use cervical mucus values for sympto-thermal fertility detection', cervixModeOff: - 'By default, cervical mucus values are being used for symptothermal fertility detection. You can switch here to use cervix values for symptothermal fertility detection', + 'By default, cervical mucus values are being used for sympto-thermal fertility detection. You can switch here to use cervix values for sympto-thermal fertility detection', disabled: { title: 'Disabled', message: @@ -139,6 +139,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.`, }, } From 24df5cea31a78e1869c08437064f93b403cf51d9 Mon Sep 17 00:00:00 2001 From: bl00dymarie Date: Thu, 29 Feb 2024 10:35:22 +0000 Subject: [PATCH 3/3] Spell "science-based" --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index eedb19a..cc1e829 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -33,7 +33,7 @@ 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 sympto-thermal 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.