diff --git a/components/app-text.js b/components/app-text.js
index 6e996da..72419ea 100644
--- a/components/app-text.js
+++ b/components/app-text.js
@@ -21,6 +21,19 @@ export function AppTextLight(props) {
)
}
+export function ActionHint(props) {
+ if(props.isVisible) {
+ return (
+
+ {props.children}
+
+ )
+ } else {
+ return null
+ }
+}
+
export function SymptomSectionHeader(props) {
return (
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index 5b2bddd..d0e3e07 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -10,6 +10,7 @@ import { cervix as labels } from '../../../i18n/en/cycle-day'
import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section'
+import { ActionHint } from '../../app-text'
export default class Cervix extends Component {
constructor(props) {
@@ -35,6 +36,7 @@ export default class Cervix extends Component {
{ label: labels.position.categories[1], value: 1 },
{ label: labels.position.categories[2], value: 2 }
]
+ const mandatoryNotCompletedYet = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
return (
@@ -81,6 +83,7 @@ export default class Cervix extends Component {
/>
+ {labels.actionHint}
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index 7de9896..6e2d2ce 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -11,7 +11,7 @@ import computeNfpValue from '../../../lib/nfp-mucus'
import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section'
-
+import { ActionHint } from '../../app-text'
export default class Mucus extends Component {
constructor(props) {
@@ -34,6 +34,7 @@ export default class Mucus extends Component {
{ label: labels.texture.categories[1], value: 1 },
{ label: labels.texture.categories[2], value: 2 }
]
+ const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
return (
@@ -70,6 +71,7 @@ export default class Mucus extends Component {
/>
+ {labels.actionHint}
diff --git a/i18n/en/cycle-day.js b/i18n/en/cycle-day.js
index 972f626..1a990f3 100644
--- a/i18n/en/cycle-day.js
+++ b/i18n/en/cycle-day.js
@@ -25,7 +25,8 @@ export const cervix = {
position: {
categories: ['low', 'medium', 'high'],
explainer: 'How high up in the vagina is the cervix?'
- }
+ },
+ actionHint: 'Choose values for at least "Opening" and "Firmness" to save.'
}
export const mucus = {
@@ -37,7 +38,8 @@ export const mucus = {
categories: ['nothing', 'creamy', 'egg white'],
explainer: "Looking at and touching your cervical mucus, which describes it best?"
},
- excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
+ excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection",
+ actionHint: 'Choose values for both "Feeling" and "Texture" to save.'
}
export const desire = {
diff --git a/styles/index.js b/styles/index.js
index 93b00c5..badc68f 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -17,6 +17,7 @@ const fontRegular = 'Prompt-Light'
const fontLight = 'Prompt-Thin'
const regularSize = 16
+const hintSize = 14
const defaultBottomMargin = 5
const defaultIndentation = 10
@@ -34,6 +35,12 @@ export default StyleSheet.create({
fontFamily: fontLight,
fontSize: regularSize
},
+ actionHint: {
+ color: secondaryColor,
+ fontFamily: fontRegular,
+ fontSize: hintSize,
+ margin: defaultIndentation
+ },
paragraph: {
marginBottom: defaultBottomMargin
},