some filter and sort markup

src/cljs/commiteth/bounties.cljs

@@ -43,14 +43,28 @@
        [:img {:src avatar-url}]]]]))
 
 (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
+       [:a.open-bounties-filter-element {:href "javascript:;"} "Value"]
+       [: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"]]
        (into [:div.ui.items]
              (for [bounty open-bounties]
-             [bounty-item bounty])))])
+               [bounty-item bounty])))]))
 
 
 (defn bounties-page []

src/cljs/commiteth/db.cljs

@@ -10,4 +10,5 @@
    :open-bounties []
    :owner-bounties   {}
    :top-hunters []
-   :activity-feed []})
+   :activity-feed []
+   :bounties-order ::bounties-order|most-recent})

src/cljs/commiteth/subscriptions.cljs

@@ -80,3 +80,8 @@
     :user-dropdown-open?
   (fn [db _]
     (:user-dropdown-open? db)))
+
+(reg-sub
+  :bounties-order
+  (fn [db _]
+    (:bounties-order db)))

src/less/style.less

@@ -413,6 +413,53 @@
         font-weight: 500;
         color: #42505c;
     }
+
+    .open-bounties-filter-and-sort {
+        margin-top: 24px;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .open-bounties-filter {
+        display: flex;
+    }
+
+    .open-bounties-filter-element {
+        position: relative;
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 1.0;
+        color: #8d99a4;
+        padding: 8px 12px;
+        border-radius: 8px;
+        border: solid 1px rgba(151, 151, 151, 0.2);
+        margin-right: 10px;
+    }
+
+    .open-bounties-filter-element:focus {
+        background-color: #57a7ed;
+    }
+
+    .open-bounties-filter-tooltip {
+        position: absolute;
+    }
+
+    .open-bounties-sort {
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 1.0;
+        color: #8d99a4;
+        display: flex;
+        align-items: center;
+    }
+
+    .icon-forward-white-box {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
 }
 
 .open-bounty-item {