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 },