Prettier no data div

src/cljs/commiteth/activity.cljs

@@ -54,7 +54,8 @@
 (defn activity-list [activity-items]
   [:div.ui.container.activity-container
    (if (empty? activity-items)
-     [:div.ui.text "No data"]
+     [:div.view-no-data-container
+      [:p "No recent activity yet"]]
      (into [:div.ui.items]
            (for [item activity-items]
              ^{:key item} [activity-item item])))]  )

src/cljs/commiteth/bounties.cljs

@@ -42,7 +42,8 @@
   [:div.ui.container.open-bounties-container
    [:div.open-bounties-header "Bounties"]
    (if (empty? open-bounties)
-     [:div.ui.text "No data"]
+     [:div.view-no-data-container
+      [:p "No recent activity yet"]]
      (into [:div.ui.items]
            (for [bounty open-bounties]
              [bounty-item bounty])))])

src/cljs/commiteth/core.cljs

@@ -138,7 +138,8 @@
   (let [top-hunters (rf/subscribe [:top-hunters])]
     (fn []
       (if (empty? @top-hunters)
-        [:div.ui.text "No data"]
+        [:div.view-no-data-container
+         [:p "No recent activity yet"]]
         (into [:div.ui.items]
               (map-indexed (fn [idx hunter]
                              [:div.item

src/less/style.less

@@ -304,6 +304,23 @@
     }
 }
 
+.view-no-data-container {
+    padding: 64px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: auto;
+
+    p {
+        text-align: center;
+        font-family: "PostGrotesk-Book";
+        color: #8d99a4;
+        font-size: 15 px;
+
+    }
+}
+
+
 .view-loading-label {
     font-size: 18px !important;
 }