Visualize disabled action buttons

components/cycle-day/symptoms/action-button-footer.js

@@ -38,6 +38,11 @@ export default class ActionButtonFooter extends Component {
     return (
       <View style={styles.menu}>
         {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 (
             <TouchableOpacity
               onPress={action}
@@ -45,8 +50,8 @@ export default class ActionButtonFooter extends Component {
               disabled={disabledCondition}
               key={i.toString()}
             >
-              <Icon name={icon} {...iconStyles.menuIcon} />
+              <Icon name={icon} {...iconStyle} />
-              <Text style={styles.menuText}>
+              <Text style={textStyle}>
                 {title}
               </Text>
             </TouchableOpacity>

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