diff --git a/components/cycle-day/labels/labels.js b/components/cycle-day/labels/labels.js
index 05473c12849eb8b06cebc7af633bbd859eb55668..5566f73609f2c5f70571f21c40a17e5895c202ec 100644
--- a/components/cycle-day/labels/labels.js
+++ b/components/cycle-day/labels/labels.js
@@ -73,7 +73,14 @@ export const fertilityStatus = {
export const temperature = {
outOfRangeWarning: 'This temperature value is out of the current range for the temperature chart. You can change the range in the settings.',
outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.',
- saveAnyway: 'Save anyway'
+ saveAnyway: 'Save anyway',
+ temperature: {
+ explainer: 'Take your temperature right after waking up, before getting out of bed'
+ },
+ note: {
+ explainer: 'Is there anything that could have influenced this value, such as bad sleep or alcohol consumption?'
+ },
+ excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
}
export const noteExplainer = "Anything you want to add for the day?"
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 25e697cb9a1cf98fe96c472ce270e64887ccc094..76985f455d8bdd1e7f442a905fe986b7864c2761 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -49,7 +49,7 @@ export default class Bleeding extends Component {
<SymptomSection
header="Exclude"
explainer="You can exclude this value if it's not menstrual bleeding"
- inlineExplainer={true}
+ inline={true}
>
<Switch
onValueChange={(val) => {
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index 4b792be1be2aa00cbfa19bb7f0e1b3b2cea051e6..7d2ce6ccbb1582caa49e537f3a313adafcf698b0 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -81,7 +81,7 @@ export default class Cervix extends Component {
<SymptomSection
header="Exclude"
explainer="You can exclude this value if you don't want to use it for fertility detection"
- inlineExplainer={true}
+ inline={true}
>
<Switch
onValueChange={(val) => {
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index 6e80ffc29967bad7e950c19299af06551c00edae..ef730f73ecb372c0b4f3e99c9e7649cb8ba6f7d7 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -70,7 +70,7 @@ export default class Mucus extends Component {
<SymptomSection
header="Exclude"
explainer={labels.excludeExplainer}
- inlineExplainer={true}
+ inline={true}
>
<Switch
onValueChange={(val) => {
diff --git a/components/cycle-day/symptoms/symptom-section.js b/components/cycle-day/symptoms/symptom-section.js
index c1af4d77001b12acc6d265fba3cd3564a92fd9d3..8d0603b77b1a825e53b1d5b5a62fdc7eaec6f87a 100644
--- a/components/cycle-day/symptoms/symptom-section.js
+++ b/components/cycle-day/symptoms/symptom-section.js
@@ -4,14 +4,25 @@ import { SymptomSectionHeader, AppText } from '../../app-text'
export default class SymptomSection extends Component {
render() {
+ const p = this.props
+ let placeHeadingInline
+ if (!p.explainer && p.inline) {
+ placeHeadingInline = {
+ flexDirection: 'row',
+ alignItems: "center"
+ }
+ }
return (
- <View>
- <SymptomSectionHeader>{this.props.header}</SymptomSectionHeader>
- <View flexDirection={this.props.inlineExplainer ? 'row' : 'column'}>
+ <View style={placeHeadingInline}>
+ <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+ <View
+ flexDirection={p.inline ? 'row' : 'column'}
+ flex={1}
+ >
<View flex={1}>
- <AppText>{this.props.explainer}</AppText>
+ <AppText>{p.explainer}</AppText>
</View>
- {this.props.children}
+ {p.children}
</View>
</View>
)
diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js
index 336fa431c016cc8ad32f0e06dcf2d425e29f3a33..6be711157c63d30e24420fd03a847cb9fde306d6 100644
--- a/components/cycle-day/symptoms/temperature.js
+++ b/components/cycle-day/symptoms/temperature.js
@@ -12,12 +12,13 @@ import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
import { getPreviousTemperature, saveSymptom } from '../../../db'
import styles from '../../../styles'
import { LocalTime, ChronoUnit } from 'js-joda'
-import { temperature as tempLabels } from '../labels/labels'
+import { temperature as labels } from '../labels/labels'
import { scaleObservable } from '../../../local-storage'
import { shared } from '../../labels'
import ActionButtonFooter from './action-button-footer'
import config from '../../../config'
import { SymptomSectionHeader } from '../../app-text'
+import SymptomSection from './symptom-section'
const minutes = ChronoUnit.MINUTES
@@ -72,9 +73,9 @@ export default class Temp extends Component {
const scale = scaleObservable.value
let warningMsg
if (value < absolute.min || value > absolute.max) {
- warningMsg = tempLabels.outOfAbsoluteRangeWarning
+ warningMsg = labels.outOfAbsoluteRangeWarning
} else if (value < scale.min || value > scale.max) {
- warningMsg = tempLabels.outOfRangeWarning
+ warningMsg = labels.outOfRangeWarning
}
if (warningMsg) {
@@ -98,16 +99,21 @@ export default class Temp extends Component {
<View style={{ flex: 1 }}>
<ScrollView style={styles.page}>
<View>
- <View style={styles.symptomViewRowInline}>
- <SymptomSectionHeader>Temperature (°C)</SymptomSectionHeader>
+ <SymptomSection
+ header="Temperature (°C)"
+ explainer={labels.temperature.explainer}
+ inline={true}
+ >
<TempInput
value={this.state.temperature}
setState={(val) => this.setState(val)}
isSuggestion={this.state.isSuggestion}
/>
- </View>
- <View style={styles.symptomViewRowInline}>
- <SymptomSectionHeader>Time</SymptomSectionHeader>
+ </SymptomSection>
+ <SymptomSection
+ header="Time"
+ inline={true}
+ >
<TextInput
style={styles.temperatureTextInput}
onFocus={() => {
@@ -116,40 +122,44 @@ export default class Temp extends Component {
}}
value={this.state.time}
/>
- </View>
- <DateTimePicker
- mode="time"
- isVisible={this.state.isTimePickerVisible}
- onConfirm={jsDate => {
- this.setState({
- time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
- isTimePickerVisible: false
- })
- }}
- onCancel={() => this.setState({ isTimePickerVisible: false })}
- />
- <SymptomSectionHeader>Note</SymptomSectionHeader>
- <View>
+ <DateTimePicker
+ mode="time"
+ isVisible={this.state.isTimePickerVisible}
+ onConfirm={jsDate => {
+ this.setState({
+ time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+ isTimePickerVisible: false
+ })
+ }}
+ onCancel={() => this.setState({ isTimePickerVisible: false })}
+ />
+ </SymptomSection>
+ <SymptomSection
+ header="Note"
+ explainer={labels.note.explainer}
+ >
<TextInput
- style={styles.temperatureTextInput}
multiline={true}
autoFocus={this.state.focusTextArea}
- placeholder="enter"
+ placeholder="Enter"
value={this.state.note}
onChangeText={(val) => {
this.setState({ note: val })
}}
/>
- </View>
- <View style={styles.symptomViewRowInline}>
- <SymptomSectionHeader>Exlude</SymptomSectionHeader>
+ </SymptomSection>
+ <SymptomSection
+ header="Exclude"
+ explainer={labels.excludeExplainer}
+ inline={true}
+ >
<Switch
onValueChange={(val) => {
this.setState({ exclude: val })
}}
value={this.state.exclude}
/>
- </View>
+ </SymptomSection>
</View>
</ScrollView>
<ActionButtonFooter