From de11ff034fe4bc270ddf9550d6d12e3b3a1ba6c2 Mon Sep 17 00:00:00 2001
From: Jake Dexheimer <jakedex@gmail.com>
Date: Tue, 3 Oct 2017 00:30:53 -0700
Subject: [PATCH] Add hover styles

---
 components/Button.js   | 4 ++++
 components/Dropdown.js | 8 ++++++++
 components/Settings.js | 4 ++++
 lib/constants.js       | 3 ++-
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/components/Button.js b/components/Button.js
index b27026a..be4dcb0 100644
--- a/components/Button.js
+++ b/components/Button.js
@@ -24,6 +24,10 @@ export default props => (
         user-select: none;
       }
 
+      button:hover {
+        background: ${COLORS.HOVER} !important;
+      }
+
       button > span {
         font-size: 14px;
         line-height: 1;
diff --git a/components/Dropdown.js b/components/Dropdown.js
index d1dc05e..8cb52fd 100644
--- a/components/Dropdown.js
+++ b/components/Dropdown.js
@@ -46,6 +46,10 @@ class Dropdown extends React.Component {
             border-bottom: 0.5px solid ${COLORS.SECONDARY};
           }
 
+          .dropdown-list-item:hover {
+            background: ${COLORS.HOVER};
+          }
+
           .dropdown-list-item:last-of-type {
             border-bottom: none;
             border-radius: 0px 0px 2px 2px;
@@ -107,6 +111,10 @@ class Dropdown extends React.Component {
             z-index: 1;
           }
 
+          .dropdown-display:hover {
+            background: ${COLORS.HOVER};
+          }
+
           .is-visible + .dropdown-list {
             display: block;
           }
diff --git a/components/Settings.js b/components/Settings.js
index 71f8aab..5bbefe4 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -84,6 +84,10 @@ class Settings extends React.Component {
             cursor: pointer;
           }
 
+          .settings-display:hover {
+            background: ${COLORS.HOVER};
+          }
+
           .is-visible + .settings-settings {
             display: block;
           }
diff --git a/lib/constants.js b/lib/constants.js
index 75cce52..f1e1dde 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -324,7 +324,8 @@ export const COLORS = {
   BLACK: '#121212',
   PRIMARY: '#F8E81C',
   SECONDARY: '#fff',
-  GRAY: '#858585'
+  GRAY: '#858585',
+  HOVER: '#1F1F1F'
 }
 
 export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)