Added centred arrow under the blue tab underlines

resources/day8/re_frame/trace/images/triangle-down.svg

@@ -0,0 +1,12 @@
+<svg width="12" height="7" viewBox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>Polygon</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-2344 -40)">
+<g id="Polygon">
+<use xlink:href="#path0_fill" transform="matrix(-1 9.54098e-18 -9.54098e-18 -1 2356 47)" fill="#6EC0E6"/>
+</g>
+</g>
+<defs>
+<path id="path0_fill" d="M 6.05481 0L 12 7L 0 7L 6.05481 0Z"/>
+</defs>
+</svg>

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

@@ -16,10 +16,16 @@
             [day8.re-frame.trace.utils.re-com :as rc]
             [day8.re-frame.trace.common-styles :as common]))
 
+(def triangle-down (macros/slurp-macro "day8/re_frame/trace/images/triangle-down.svg"))
 (defn tab-button [panel-id title]
   (let [selected-tab @(rf/subscribe [:settings/selected-tab])]
-    [:button {:class    (str "tab button bm-heading-text " (when (= selected-tab panel-id) "active"))
-              :on-click #(rf/dispatch [:settings/selected-tab panel-id])} title]))
+    [rc/v-box
+     :style    {:margin-bottom "-8px"
+                :z-index       1}
+     :children [[:button {:class    (str "tab button bm-heading-text " (when (= selected-tab panel-id) "active"))
+                          :on-click #(rf/dispatch [:settings/selected-tab panel-id])} title]
+                [:img {:src   (str "data:image/svg+xml;utf8," triangle-down)
+                       :style {:opacity (if (= selected-tab panel-id) "1" "0")}}]]]))
 
 (def open-external (macros/slurp-macro "day8/re_frame/trace/images/logout.svg"))
 (def settings-svg (macros/slurp-macro "day8/re_frame/trace/images/wrench.svg"))
@@ -122,7 +128,8 @@
         :justify  :between
         :children [[rc/h-box
                     :gap      "7px"
-                    :align    :center
+                    :align    :end
+                    :height   "50px"
                     :children [(tab-button :event "Event")
                                (tab-button :app-db "app-db")
                                (tab-button :subs "Subs")