From 77c7a57463e5bae70bcfec30e184f86de259c4ea Mon Sep 17 00:00:00 2001 From: BloodyMarie Date: Mon, 18 Apr 2022 19:16:13 +0200 Subject: [PATCH 1/5] Stats styling improvement --- components/common/table.js | 6 ++++-- components/stats.js | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/common/table.js b/components/common/table.js index bb84f27..65d3a10 100644 --- a/components/common/table.js +++ b/components/common/table.js @@ -57,10 +57,11 @@ const styles = StyleSheet.create({ accentOrange: { ...Typography.accentOrange, fontSize: Sizes.small, + margin: Sizes.tiny, }, accentPurpleBig: { ...Typography.accentPurpleBig, - marginRight: Spacing.small, + marginRight: Spacing.tiny }, cellLeft: { alignItems: 'flex-end', @@ -68,12 +69,13 @@ const styles = StyleSheet.create({ justifyContent: 'center', }, cellRight: { - flex: 6, + flex: 5, justifyContent: 'center', }, row: { flexDirection: 'row', marginBottom: Spacing.tiny, + marginLeft: Spacing.tiny } }) diff --git a/components/stats.js b/components/stats.js index 713367f..b3809b2 100644 --- a/components/stats.js +++ b/components/stats.js @@ -91,11 +91,11 @@ const styles = ScaledSheet.create({ }, columnLeft: { ...column, - flex: 4, + flex: 2, }, columnRight: { ...column, - flex: 5, + flex: 3, paddingTop: Spacing.small, }, image: { From 0cebe910c4b3b69828a164f68246aa7dead1c081 Mon Sep 17 00:00:00 2001 From: BloodyMarie Date: Mon, 18 Apr 2022 16:04:26 +0200 Subject: [PATCH 2/5] Remove idle code --- components/chart/cycle-day-label.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/components/chart/cycle-day-label.js b/components/chart/cycle-day-label.js index 1f8a82f..45e0f2a 100644 --- a/components/chart/cycle-day-label.js +++ b/components/chart/cycle-day-label.js @@ -7,7 +7,7 @@ import AppText from '../common/app-text' import cycleModule from '../../lib/cycle' import { getOrdinalSuffix } from '../helpers/home' -import { Containers, Typography, Sizes } from '../../styles' +import { Typography, Sizes } from '../../styles' const CycleDayLabel = ({ height, date }) => { const cycleDayNumber = cycleModule().getCycleDayNumber(date) @@ -24,11 +24,11 @@ const CycleDayLabel = ({ height, date }) => { {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth} - {!isFirstDayOfMonth && + {!isFirstDayOfMonth && ( {getOrdinalSuffix(dayOfMonth)} - } + )} ) @@ -45,15 +45,12 @@ const styles = StyleSheet.create({ justifyContent: 'flex-end', left: 4, }, - containerRow: { - ...Containers.rowContainer - }, text: { ...Typography.label, fontSize: Sizes.small, }, textBold: { - ...Typography.labelBold + ...Typography.labelBold, }, textLight: { ...Typography.labelLight, @@ -62,7 +59,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', - } + }, }) export default CycleDayLabel From 655f6b31d8dddafca3cbabd675adbdb7593f952d Mon Sep 17 00:00:00 2001 From: BloodyMarie Date: Mon, 18 Apr 2022 22:57:03 +0200 Subject: [PATCH 3/5] Cycle day styling: Remove new line for better display of mucus --- components/helpers/cycle-day.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/helpers/cycle-day.js b/components/helpers/cycle-day.js index 9e1248f..aa7ce3d 100644 --- a/components/helpers/cycle-day.js +++ b/components/helpers/cycle-day.js @@ -353,7 +353,7 @@ const label = { }) .join(', ') - if (isNumber(mucus.value)) label += `\n => ${labels.mucusNFP[mucus.value]}` + if (isNumber(mucus.value)) label += ` => ${labels.mucusNFP[mucus.value]}` if (mucus.exclude) label = `(${label})` return label From 8a29f08dca1f971c3990dff2180ad1a6b12e583b Mon Sep 17 00:00:00 2001 From: BloodyMarie Date: Mon, 18 Apr 2022 19:40:34 +0200 Subject: [PATCH 4/5] Cycle Day styling improvements --- components/cycle-day/symptom-box.js | 45 +++++++++++++---------------- 1 file changed, 20 insertions(+), 25 deletions(-) diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index bb20435..294a176 100644 --- a/components/cycle-day/symptom-box.js +++ b/components/cycle-day/symptom-box.js @@ -15,7 +15,6 @@ import { Colors, Sizes, Spacing } from '../../styles' import { headerTitles as symptomTitles } from '../../i18n/en/labels' class SymptomBox extends Component { - static propTypes = { date: PropTypes.string.isRequired, isSymptomEdited: PropTypes.bool, @@ -33,7 +32,7 @@ class SymptomBox extends Component { super(props) this.state = { - isSymptomEdited: props.isSymptomEdited + isSymptomEdited: props.isSymptomEdited, } } @@ -58,24 +57,24 @@ class SymptomBox extends Component { const iconName = `drip-icon-${symptom}` const symptomNameStyle = [ styles.symptomName, - (isSymptomDisabled && styles.symptomNameDisabled), - (isExcluded && styles.symptomNameExcluded) + isSymptomDisabled && styles.symptomNameDisabled, + isExcluded && styles.symptomNameExcluded, ] const textStyle = [ styles.text, - (isSymptomDisabled && styles.textDisabled), - (isExcluded && styles.textExcluded) + isSymptomDisabled && styles.textDisabled, + isExcluded && styles.textExcluded, ] return ( - {isSymptomEdited && + {isSymptomEdited && ( - } + )} {symptomTitles[symptom].toLowerCase()} - {symptomDataToDisplay && - + {symptomDataToDisplay && ( + {symptomDataToDisplay} - } + )} @@ -112,20 +111,20 @@ const styles = StyleSheet.create({ borderRadius: scale(10), elevation: 4, flexDirection: 'row', - height: scale(120), + height: scale(110), marginBottom: Spacing.base, paddingHorizontal: Spacing.small, paddingVertical: Spacing.base, - width: Spacing.symptomTileWidth + width: Spacing.symptomTileWidth, }, symptomName: { paddingTop: Sizes.tiny, color: Colors.purple, fontSize: Sizes.base, - lineHeight: Sizes.base + lineHeight: Sizes.base, }, symptomNameDisabled: { - color: Colors.grey + color: Colors.grey, }, symptomNameExcluded: { color: Colors.greyDark, @@ -134,28 +133,24 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'center', marginLeft: Spacing.tiny, - maxWidth: Spacing.textWidth + maxWidth: Spacing.textWidth, }, text: { fontSize: Sizes.small, fontStyle: 'italic', - lineHeight: Sizes.small }, textDisabled: { - color: Colors.greyLight + color: Colors.greyLight, }, textExcluded: { color: Colors.grey, - } + }, }) const mapStateToProps = (state) => { - return({ + return { date: getDate(state), - }) + } } -export default connect( - mapStateToProps, - null, -)(SymptomBox) +export default connect(mapStateToProps, null)(SymptomBox) From dea67c88f5c9f123726d16f5c2925d2fddca9c6a Mon Sep 17 00:00:00 2001 From: BloodyMarie Date: Tue, 19 Apr 2022 23:15:26 +0200 Subject: [PATCH 5/5] Chart styling adaption: Temporarily disbale temp scale settings --- components/settings/nfp-settings/index.js | 7 ++++--- i18n/en/cycle-day.js | 4 +++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js index 378e6f4..2140c14 100644 --- a/components/settings/nfp-settings/index.js +++ b/components/settings/nfp-settings/index.js @@ -5,7 +5,7 @@ import AppIcon from '../../common/app-icon' import AppPage from '../../common/app-page' import AppSwitch from '../../common/app-switch' import AppText from '../../common/app-text' -import TemperatureSlider from './temperature-slider' +// import TemperatureSlider from './temperature-slider' import Segment from '../../common/segment' import { useCervixObservable, saveUseCervix } from '../../../local-storage' @@ -40,10 +40,11 @@ export default class Settings extends Component { value={shouldUseCervix} /> - + {/* disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */} + {/* {labels.tempScale.segmentExplainer} - + */}