From 8a222c545e3e8dd556abbeb95f62917d60202511 Mon Sep 17 00:00:00 2001
From: Jeremy Dormitzer <jdormitzer@hubspot.com>
Date: Tue, 30 Jan 2018 23:31:40 -0700
Subject: [PATCH] Make back button a styled clickable button

---
 ext/css/sidebar.css           | 14 ++++++++++----
 src/looped_in/components.cljs | 14 ++++++++------
 src/looped_in/sidebar.cljs    | 17 +++++++++++++----
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/ext/css/sidebar.css b/ext/css/sidebar.css
index ee4e2aa..38497d5 100644
--- a/ext/css/sidebar.css
+++ b/ext/css/sidebar.css
@@ -254,10 +254,6 @@ html, body {
     flex: 1 0 auto;
 }
 
-.headerIcon {
-    margin-right: 4px;
-}
-
 .card {
     background-color: #f9f9fa;
     width: 284px;
@@ -380,6 +376,16 @@ html, body {
     background-color: #d7d7db;
 }
 
+.headerIcon {
+    margin-right: 4px;
+}
+
+.headerIcon.iconButton {
+    padding: 0;
+    width: 16px;
+    height: 20px;
+}
+
 .spinner {
     margin: 80px auto;
     width: 50px;
diff --git a/src/looped_in/components.cljs b/src/looped_in/components.cljs
index d11aeba..6374e81 100644
--- a/src/looped_in/components.cljs
+++ b/src/looped_in/components.cljs
@@ -108,13 +108,15 @@
          (for [i (range 1 6)]
            (dom/createDom "div" (str "rect" i)))))
 
-(defn sidebar-header [icon-src]
+(defn header-icon [src]
+  (dom/createDom "img"
+                 (clj->js {:src src
+                           :width "16px"
+                           :height "16px"})))
+
+(defn sidebar-header [icon-el]
   (dom/createDom "div" "sidebarHeader"
-                 (dom/createDom "img"
-                                (clj->js {:class "headerIcon"
-                                          :src icon-src
-                                          :width "16px"
-                                          :height "16px"}))
+                 icon-el
                  (dom/createDom "span" "body30 headerTitle" "Looped In")
                  (dom/createDom "button"
                                 (clj->js {:class "iconButton"
diff --git a/src/looped_in/sidebar.cljs b/src/looped_in/sidebar.cljs
index b85c350..ecf5460 100644
--- a/src/looped_in/sidebar.cljs
+++ b/src/looped_in/sidebar.cljs
@@ -76,10 +76,16 @@
   [dispatch-message state]
   (log/debug state)
   (cond
-    (:loading state) (list (components/sidebar-header "icons/icon48.png")
+    (:loading state) (list (components/sidebar-header (components/with-classes
+                                                        (components/header-icon "icons/icon48.png")
+                                                        "headerIcon"))
                            (components/sidebar-content (components/loader)))
     (:item state) (list
-                   (components/sidebar-header "icons/back-16.svg")
+                   (components/sidebar-header (dom/createDom
+                                               "button"
+                                               (clj->js {:class "headerIcon iconButton"
+                                                         :id "backButton"})
+                                               (components/header-icon "icons/back-16.svg")))
                    (apply
                     components/sidebar-content
                     (let [current-item (get-in-item
@@ -115,7 +121,8 @@
                                              (* (:created_at_i child) 1000))
                                             (components/item-link (:id child)))
                                            (components/comment-text (:text child))
-                                           (-> (components/replies-indicator (count (:children child)))
+                                           (-> (components/replies-indicator
+                                                (count (:children child)))
                                                ((fn [indicator]
                                                   (if (> (count (:children child)) 0)
                                                     (-> indicator
@@ -136,7 +143,9 @@
                                          (filter #(contains? % :text))
                                          (sort-by #(count (:children %)) #(compare %2 %1))))))))
     (:hits state) (list
-                   (components/sidebar-header "icons/icon48.png")
+                   (components/sidebar-header (components/with-classes
+                                                (components/header-icon "icons/icon48.png")
+                                                "headerIcon"))
                    (apply
                     components/sidebar-content
                     (map (fn [hit]