Factor out tag component

src/day8/re_frame/trace/common_styles.cljs

@@ -45,6 +45,10 @@
 (def gs-131s "131px")
 
 
+(def sub-create-color "#9b51e0")
+(def sub-destroy-color "#f2994a")
+(def sub-re-run-color "#219653")
+(def sub-not-run-color "#bdbdbd")
 
 
 ;; The colors defined below are (of course) available to your app without further ado

src/day8/re_frame/trace/styles.cljs

@@ -251,6 +251,29 @@
      ["&:first-child" {:padding-left "7px"}]
      ["&:last-child" {:padding-right "7px"}]]]
 
+   [:.rft-tag
+    {:background-color common/white-background-color
+     :color            common/text-color
+     :width            "48px"                               ;common/gs-50s
+     :height           "17px"                               ;common/gs-19s
+     :font-size        "10px"
+     :font-weight      "bold"
+     :border           "1px solid #bdbdbd"
+     :border-radius    "3px"}]
+
+   [".rft-tag__subscription_created"
+    {:background-color common/sub-create-color
+     :color "white"}]
+   [".rft-tag__subscription_re_run"
+    {:background-color common/sub-re-run-color
+     :color "white"}]
+   [".rft-tag__subscription_destroyed"
+    {:background-color common/sub-destroy-color
+     :color "white"}]
+   [".rft-tag__subscription_not_run"
+    {:background-color common/sub-not-run-color
+     :color "white"}]
+
    [:.button {:padding       "5px 5px 3px"
               :margin        "5px"
               :border-radius "2px"

src/day8/re_frame/trace/view/components.cljs

@@ -226,3 +226,8 @@
                    (boolean? data)
                    (nil? data))) [:div {:style {:margin "10px 0"}} (prn-str data)]
           @expanded? (jsonml->hiccup (cljs-devtools-header data) (conj [] 0)))]])))
+
+(defn tag [class label]
+  [rc/box
+   :class (str "rft-tag noselect " class)
+   :child [:span {:style {:margin "auto"}} label]])

src/day8/re_frame/trace/view/subs.cljs

@@ -18,12 +18,13 @@
 
 (def copy (macros/slurp-macro "day8/re_frame/trace/images/copy.svg"))
 
-(defn tag-color [type]
-  (let [types {:created   "#9b51e0"
-               :destroyed "#f2994a"
-               :re-run    "#219653"
-               :not-run   "#bdbdbd"}]
-    (get types type "black")))
+(defn sub-tag-class [type]
+  (case type
+    :created "rft-tag__subscription_created"
+    :destroyed "rft-tag__subscription_destroyed"
+    :re-run "rft-tag__subscription_re_run"
+    :not-run "rft-tag__subscription_not_run"
+    ""))
 
 (def tag-types {:created   {:long "CREATED" :short "CREATED"}
                 :destroyed {:long "DESTROYED" :short "DESTROY"}
@@ -36,18 +37,8 @@
 (defn short-tag-desc [type]
   (get-in tag-types [type :short] "???"))
 
-(defn tag [type label]
-  [rc/box
-   :class "noselect"
-   :style {:color            "white"
-           :background-color (tag-color type)
-           :width            "48px" ;common/gs-50s
-           :height           "17px" ;common/gs-19s
-           :font-size        "10px"
-           :font-weight      "bold"
-           :border           "1px solid #bdbdbd"
-           :border-radius    "3px"}
-   :child  [:span {:style {:margin "auto"}} label]])
+(defn sub-tag [type label]
+  [components/tag (sub-tag-class type) label])
 
 (defn title-tag [type title label]
   [rc/v-box
@@ -55,7 +46,7 @@
    :align    :center
    :gap      "2px"
    :children [[:span {:style {:font-size "9px"}} title]
-              [tag type label]]])
+              [components/tag (sub-tag-class type) label]]])
 
 (defn panel-header []
   (let [created-count (rf/subscribe [:subs/created-count])
@@ -115,7 +106,7 @@
                         :child  [:span.arrow (if open? "▼" "▶")]]]
               [rc/box
                :width "64px" ;; (100-36)px from box above
-               :child [tag type (short-tag-desc type)]]
+               :child [sub-tag type (short-tag-desc type)]]
               (when run-times
                 [:span "Warning: run " run-times " times"])
               [rc/h-box

src/day8/re_frame/trace/view/timing.cljs

@@ -4,7 +4,8 @@
             [devtools.formatters.core]
             [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
             [day8.re-frame.trace.utils.re-com :as rc]
-            [day8.re-frame.trace.common-styles :as common])
+            [day8.re-frame.trace.common-styles :as common]
+            [day8.re-frame.trace.view.components :as components])
   (:require-macros [day8.re-frame.trace.utils.macros :as macros]))
 
 (def timing-styles
@@ -32,9 +33,9 @@
                   [rc/h-box
                    :children
                    [[rc/label :label "Total"]
-                    [rc/label :label (str @(rf/subscribe [:timing/total-epoch-time]) "ms")]
+                    [components/tag "grey" (str @(rf/subscribe [:timing/total-epoch-time]) "ms")]
                     [rc/label :label "Event"]
-                    [rc/label :label (str @(rf/subscribe [:timing/event-processing-time]) "ms")]
+                    [components/tag "grey" (str @(rf/subscribe [:timing/event-processing-time]) "ms")]
                     ]]
                   (for [frame (range 1 (inc @(rf/subscribe [:timing/animation-frame-count])))]
                     (list