From 927593d36004422bd1500f526680a2c15ee9554f Mon Sep 17 00:00:00 2001
From: Sam Ludford <sam@samuelludford.com>
Date: Fri, 17 May 2019 15:58:33 +0100
Subject: [PATCH] made narrative buttons in toolbar yellow on hover

---
 src/components/Toolbar/Layout.js | 2 +-
 src/scss/toolbar.scss            | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Toolbar/Layout.js b/src/components/Toolbar/Layout.js
index 1ba407b..9f4e1b8 100644
--- a/src/components/Toolbar/Layout.js
+++ b/src/components/Toolbar/Layout.js
@@ -61,7 +61,7 @@ class Toolbar extends React.Component {
         {this.props.narratives.map((narr) => {
           return (
             <div className='panel-action action'>
-              <button style={{ backgroundColor: '#000' }} onClick={() => { this.goToNarrative(narr) }}>
+              <button onClick={() => { this.goToNarrative(narr) }}>
                 <p>{narr.label}</p>
                 <p><small>{trimAndEllipse(narr.description, 120)}</small></p>
               </button>
diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss
index 29a81ef..713b3d6 100644
--- a/src/scss/toolbar.scss
+++ b/src/scss/toolbar.scss
@@ -28,6 +28,10 @@
     transition: 0.2s ease;
     z-index: $header;
 
+    button {
+      background: #222222;
+    }
+
     .toolbar-header {
       margin: 0 15px 10px 15px;
       padding: 10px 0 25px 0;
@@ -470,10 +474,13 @@
       margin-bottom: 10px;
       transition: 0.2s ease;
       letter-spacing: 0.1em;
+      background-color: #000;
 
       &:hover {
         transition: 0.2s ease;
         letter-spacing: 0.15em;
+        background-color: $yellow;
+        color: $black;
       }
 
       p {