From 1da20da3ff214123328bf08a0fd7f6454a9a6ff5 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sat, 3 Aug 2019 13:32:17 -0700
Subject: [PATCH] Fixed: Season actions on mobile not indicating when they are
 disabled

---
 frontend/src/Components/Menu/MenuItem.css |  6 +++++-
 frontend/src/Components/Menu/MenuItem.js  | 14 +++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/Menu/MenuItem.css b/frontend/src/Components/Menu/MenuItem.css
index bae1a649c..2eb2817af 100644
--- a/frontend/src/Components/Menu/MenuItem.css
+++ b/frontend/src/Components/Menu/MenuItem.css
@@ -1,6 +1,5 @@
 .menuItem {
   @add-mixin truncate;
-
   display: block;
   flex-shrink: 0;
   padding: 10px 20px;
@@ -17,3 +16,8 @@
     text-decoration: none;
   }
 }
+
+.isDisabled {
+  color: $disabledColor;
+  pointer-events: none;
+}
diff --git a/frontend/src/Components/Menu/MenuItem.js b/frontend/src/Components/Menu/MenuItem.js
index ff083450b..9afe393d3 100644
--- a/frontend/src/Components/Menu/MenuItem.js
+++ b/frontend/src/Components/Menu/MenuItem.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import Link from 'Components/Link/Link';
 import styles from './MenuItem.css';
 
@@ -12,12 +13,17 @@ class MenuItem extends Component {
     const {
       className,
       children,
+      isDisabled,
       ...otherProps
     } = this.props;
 
     return (
       <Link
-        className={className}
+        className={classNames(
+          className,
+          isDisabled && styles.isDisabled
+        )}
+        isDisabled={isDisabled}
         {...otherProps}
       >
         {children}
@@ -28,11 +34,13 @@ class MenuItem extends Component {
 
 MenuItem.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  isDisabled: PropTypes.node.isRequired
 };
 
 MenuItem.defaultProps = {
-  className: styles.menuItem
+  className: styles.menuItem,
+  isDisabled: false
 };
 
 export default MenuItem;