some more sort and filter markup and interface behaviour

src/cljs/commiteth/bounties.cljs

@@ -1,5 +1,6 @@
 (ns commiteth.bounties
-  (:require [re-frame.core :as rf]
+  (:require [reagent.core :as r]
+            [re-frame.core :as rf]
             [commiteth.common :refer [moment-timestamp
                                       issue-url]]))
 
@@ -42,23 +43,51 @@
       [:div.ui.tiny.circular.image
        [:img {:src avatar-url}]]]]))
 
+(defn bounties-filter [name]
+  (let [open? (r/atom false)]
+    (fn [name]
+      [:div.open-bounties-filter-element-container
+       {:tab-index 0
+        :on-blur   #(reset! open? false)}
+       [:div.open-bounties-filter-element
+        {:on-click #(swap! open? not)
+         :class    (when @open? "open-bounties-filter-element-active")}
+        name]
+       (when @open?
+         [:div.open-bounties-filter-element-tooltip
+          "TOOLTIP"])])))
+
+(defn bounties-filters []
+  [:div.open-bounties-filter
+   [bounties-filter "Value"]
+   [bounties-filter "Type"]
+   [bounties-filter "Language"]
+   [bounties-filter "Date"]
+   [bounties-filter "More"]])
+
+(defn bounties-sort []
+  (let [open? (r/atom false)]
+    (fn []
+      [:div.open-bounties-sort
+       {:tab-index 0
+        :on-blur   #(reset! open? false)}
+       [:div.open-bounties-sort-element
+        {:on-click #(swap! open? not)}
+        "Most Recent"
+        [:div.icon-forward-white-box
+         [:img
+          {:src "icon-forward-white.svg"}]]]
+       (when @open?
+         [:div.open-bounties-sort-element-tooltip
+          "TOOLTIP"])])))
+
 (defn bounties-list [open-bounties]
   (let [order (rf/subscribe [:bounties-order])]
     [:div.ui.container.open-bounties-container
      [:div.open-bounties-header "Bounties"]
      [:div.open-bounties-filter-and-sort
-      [:div.open-bounties-filter
+      [bounties-filters]
-       [:a.open-bounties-filter-element {:href "javascript:;"} "Value"]
+      [bounties-sort]]
-       [:div.open-bounties-filter-tooltip "Lalala"]
-       [:a.open-bounties-filter-element {:href "javascript:;"} "Type"]
-       [:a.open-bounties-filter-element {:href "javascript:;"} "Language"]
-       [:a.open-bounties-filter-element {:href "javascript:;"} "Date"]
-       [:a.open-bounties-filter-element {:href "javascript:;"} "More"]]
-      [:div.open-bounties-sort
-       "Most Recent"
-       [:div.icon-forward-white-box
-        [:img
-         {:src "icon-forward-white.svg"}]]]]
      (if (empty? open-bounties)
        [:div.view-no-data-container
         [:p "No recent activity yet"]]

src/less/style.less

@@ -425,7 +425,6 @@
     }
 
     .open-bounties-filter-element {
-        position: relative;
         font-size: 15px;
         font-weight: 500;
         line-height: 1.0;
@@ -434,25 +433,69 @@
         border-radius: 8px;
         border: solid 1px rgba(151, 151, 151, 0.2);
         margin-right: 10px;
+        position: relative;
     }
 
-    .open-bounties-filter-element:focus {
+    .open-bounties-filter-element:hover {
+        cursor: pointer;
+    }
+
+    .open-bounties-filter-element-active {
         background-color: #57a7ed;
+        color: #ffffff;
     }
 
-    .open-bounties-filter-tooltip {
+    .open-bounties-filter-element-container:focus {
+        outline: none;
+    }
+
+    .open-bounties-filter-element-tooltip {
         position: absolute;
+        margin-top: 12px;
+        padding: 16px 24px;
+        border-radius: 10px;
+        background-color: #ffffff;
+        box-shadow: 0 15px 12px 0 rgba(161, 174, 182, 0.53), 0 0 38px 0 rgba(0, 0, 0, 0.05);
     }
 
     .open-bounties-sort {
+        position: relative;
+    }
+
+    .open-bounties-sort:focus {
+        outline: none;
+    }
+
+    .open-bounties-sort-element {
+        display: flex;
         font-size: 15px;
         font-weight: 500;
         line-height: 1.0;
         color: #8d99a4;
+        padding: 8px 12px;
         display: flex;
         align-items: center;
     }
 
+    .open-bounties-sort-element:hover {
+        cursor: pointer;
+    }
+
+    .open-bounties-sort-element-tooltip {
+        position: absolute;
+        right: 0;
+        //margin-top: 12px;
+        padding: 16px 24px;
+        min-width: 200px;
+        border-radius: 8px;
+        background-color: #1e3751;
+        font-family: "PostGrotesk-Medium";
+        font-size: 15px;
+        line-height: 1.0;
+        text-align: left;
+        color: #ffffff;
+    }
+
     .icon-forward-white-box {
         width: 24px;
         height: 24px;