diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js index be0cd6a..a153496 100644 --- a/components/cycle-day/symptoms/action-button-footer.js +++ b/components/cycle-day/symptoms/action-button-footer.js @@ -38,6 +38,11 @@ export default class ActionButtonFooter extends Component { return ( {buttons.map(({ title, action, disabledCondition, icon }, i) => { + const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText + const iconStyle = disabledCondition ? + Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) : + iconStyles.menuIcon + return ( - - + + {title} diff --git a/styles/index.js b/styles/index.js index b1476b0..c5605a1 100644 --- a/styles/index.js +++ b/styles/index.js @@ -119,6 +119,9 @@ export default StyleSheet.create({ menuText: { color: fontOnPrimaryColor }, + menuTextInActive: { + color: 'lightgrey' + }, headerCycleDay: { flexDirection: 'row', justifyContent: 'space-between' @@ -177,5 +180,8 @@ export const iconStyles = { menuIcon: { size: 20, color: fontOnPrimaryColor + }, + menuIconInactive: { + color: 'lightgrey' } } \ No newline at end of file