Add disabled button states

web/components/demo/index.js

@@ -6,13 +6,19 @@ const ButtonCallback = e => console.log(`${e.currentTarget.textContent} button c
 
 const FrontEndComponents = () => (
   <div>
-    <p>Front end components!</p>
+    <p>Buttons</p>
     <br />
     <div>
       <PrimaryButton text="Primary" onClick={ButtonCallback} />
       &nbsp;
       <SecondaryButton text="Secondary" onClick={ButtonCallback} />
     </div>
+    <br />
+    <div>
+      <PrimaryButton text="Primary" onClick={ButtonCallback} disabled />
+      &nbsp;
+      <SecondaryButton text="Secondary" onClick={ButtonCallback} disabled />
+    </div>
   </div>
 );
 

web/components/input/buttons/PrimaryButton/PrimaryButton.sass

@@ -7,4 +7,6 @@ button.primary
     background: $gradient-primary-highlight
 
   &.disabled
-
+    pointer-events: none
+    background: $gradient-primary-subdued
+    opacity: 0.4

web/components/input/buttons/PrimaryButton/index.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const PrimaryButton = ({ text, onClick }) => (
-  <button onClick={onClick} type="button" className="primary">
+const PrimaryButton = ({ text, onClick, disabled }) => (
+  <button
+    onClick={onClick}
+    type="button"
+    className={`primary ${disabled ? 'disabled' : ''}`}>
     { text }
   </button>
 );
 
 PrimaryButton.propTypes = {
   text: PropTypes.string.isRequired,
   onClick: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default PrimaryButton;

web/components/input/buttons/SecondaryButton/SecondaryButton.sass

@@ -11,3 +11,7 @@ button.secondary
     /* Link text/Hover */
     border: 1px solid $secondary-highlight
     color: $secondary-highlight
+
+  &.disabled
+    pointer-events: none
+    opacity: 0.4

web/components/input/buttons/SecondaryButton/index.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const SecondaryButton = ({ text, onClick }) => (
-  <button onClick={onClick} type="button" className="secondary">
+const SecondaryButton = ({ text, onClick, disabled }) => (
+  <button
+    onClick={onClick}
+    type="button"
+    className={`secondary ${disabled ? 'disabled' : ''}`}>
     { text }
   </button>
 );
 
 SecondaryButton.propTypes = {
   text: PropTypes.string.isRequired,
   onClick: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default SecondaryButton;

web/styles/colors.sass

@@ -5,15 +5,16 @@ $grey-light: #BDBDBD
 $grey-slate: #9195A5
 
 /* classes */
-$error: #EB5757                // figma "red"
-$primary: #21258A              // figma "body text"
-$secondary: #00BCBC            // figma "link text"
+$error:               #EB5757  // figma "red"
+$primary:             #21258A  // figma "body text"
+$secondary:           #00BCBC  // figma "link text"
 $secondary-highlight: #00D5D5  // figma "link text/hover"
 
 /* gradients */
-$gradient-primary: linear-gradient(180deg, #4DE8C2 0%, #19CBCB 100%, #18CDCD 100%)
-$gradient-primary-highlight:  linear-gradient(180deg, #92F1DA 0%, #43DEDE 100%)
-$gradient-secondary: linear-gradient(180deg, #FFFFFF 0%, #EDFFFC 100%)
+$gradient-primary:           linear-gradient(180deg, #4DE8C2 0%, #19CBCB 100%, #18CDCD 100%)
+$gradient-primary-highlight: linear-gradient(180deg, #92F1DA 0%, #43DEDE 100%)
+$gradient-primary-subdued:   linear-gradient(180deg, #4DE8C2 0%, #18CDCD 100%, #19CBCB 100%);
+$gradient-secondary:         linear-gradient(180deg, #FFFFFF 0%, #EDFFFC 100%)
 
 /* misc */
 $shadow: rgba(0, 82, 174, 0.15)