From ee44e225f541cab799bda5ae8f89450a08af12db Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Tue, 9 Jul 2019 14:58:55 -0400
Subject: [PATCH] Icon button styling

---
 src/components/icon-button/icon-button.css | 10 ++++++++++
 src/components/icon-button/icon-button.jsx | 10 ++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css
index f58ee6f8d..aa827a3e2 100644
--- a/src/components/icon-button/icon-button.css
+++ b/src/components/icon-button/icon-button.css
@@ -8,6 +8,7 @@
     font-size: 0.75rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: $motion-primary;
+    border-radius: 0.5rem;
 }
 
 .container + .container {
@@ -17,3 +18,12 @@
 .title {
     margin-top: 0.5rem;
 }
+
+.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.container:active {
+    background-color: $motion-transparent;
+}
diff --git a/src/components/icon-button/icon-button.jsx b/src/components/icon-button/icon-button.jsx
index 832e4a65b..c6549fdf9 100644
--- a/src/components/icon-button/icon-button.jsx
+++ b/src/components/icon-button/icon-button.jsx
@@ -5,14 +5,19 @@ import styles from './icon-button.css';
 
 const IconButton = ({
     img,
+    disabled,
     className,
     title,
     onClick
 }) => (
     <div
-        className={classNames(styles.container, className)}
+        className={classNames(
+            styles.container,
+            className,
+            disabled ? styles.disabled : null
+        )}
         role="button"
-        onClick={onClick}
+        onClick={disabled ? null : onClick}
     >
         <img
             className={styles.icon}
@@ -27,6 +32,7 @@ const IconButton = ({
 
 IconButton.propTypes = {
     className: PropTypes.string,
+    disabled: PropTypes.bool,
     img: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     title: PropTypes.node.isRequired