From e2c4fd442146b57ae8539e7a02b5013269f6d191 Mon Sep 17 00:00:00 2001
From: Luke Childs <lukechilds123@gmail.com>
Date: Sat, 24 Sep 2016 14:47:27 +0100
Subject: [PATCH] Swap hamburger menu icon for heart

---
 public/assets/enhancements.js | 43 +++++++++++++++++------------------
 public/assets/style.css       | 20 ++++++----------
 2 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/public/assets/enhancements.js b/public/assets/enhancements.js
index c929114..b08d47d 100644
--- a/public/assets/enhancements.js
+++ b/public/assets/enhancements.js
@@ -182,35 +182,34 @@
 
         // Then inject into DOM when it's ready
         DOMReady(function() {
+          var headerHeight = find('.title').offsetHeight;
+          var headerBoxShadow = 3;
+
+          // Heart
           var titleEl = find('h2.node-title');
           if(titleEl) {
             titleEl.insertBefore(heartEl, titleEl.firstChild);
           }
-        });
-      });
-
-      // Inject elems into DOM
-      DOMReady(function() {
-        var headerHeight = find('.title').offsetHeight;
-        var headerBoxShadow = 3;
 
-        // Menu button
-        var menuButton = create('div');
-        menuButton.classList.add('menu-button');
-        menuButton.style.height = headerHeight + 'px';
-        menuButton.addEventListener('click', function() {
+          // Menu button
+          var menuButton = create('div');
+          menuButton.classList.add('menu-button');
+          menuButton.style.height = headerHeight + 'px';
+          menuButton.innerHTML = heartEl.outerHTML;
+          menuButton.addEventListener('click', function() {
+            favouriteNodes.updateHeartedNodesList();
+            find('.menu').classList.toggle('active');
+          });
+          find('header .wrapper').appendChild(menuButton);
+
+          // Menu
+          var menu = create('div');
+          menu.classList.add('menu');
+          menu.style.top = (headerHeight + headerBoxShadow) + 'px';
+          menu.style.height = 'calc(100% - ' + (headerHeight + headerBoxShadow) + 'px)';
+          document.body.appendChild(menu);
           favouriteNodes.updateHeartedNodesList();
-          find('.menu').classList.toggle('active');
         });
-        find('header .wrapper').appendChild(menuButton);
-
-        // Menu
-        var menu = create('div');
-        menu.classList.add('menu');
-        menu.style.top = (headerHeight + headerBoxShadow) + 'px';
-        menu.style.height = 'calc(100% - ' + (headerHeight + headerBoxShadow) + 'px)';
-        document.body.appendChild(menu);
-        favouriteNodes.updateHeartedNodesList();
       });
 
       // If current node is hearted
diff --git a/public/assets/style.css b/public/assets/style.css
index 03389f6..24d41a9 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -114,22 +114,16 @@ h1 {
   position: relative;
   width: 4rem;
   font-size: 3em;
+  text-align: center;
   border-right: 1px solid #eee;
   cursor: pointer;
 }
-.menu-button:before {
-  content: "";
-  position: absolute;
-  top: 0.3em;
-  left: 0.25em;
-  width: 0.8em;
-  height: 0.125em;
-  border-top: 0.375em double #b24592;
-  border-bottom: 0.125em solid #b24592;
-  transition: border-color 0.2s ease;
-}
-.menu-button:hover:before {
-  border-color: #f15f79;
+.menu-button .heart {
+  fill: #b24592;
+  transition: fill 0.2s ease;
+}
+.menu-button:hover .heart {
+  fill: #f15f79;
 }
 
 /* Main */