Show Settings title and settings button when in settings panel

src/day8/re_frame/trace/common_styles.cljs

@@ -99,6 +99,9 @@
 (def strong-button-background-color blue-modern-color)
 (def strong-button-border-color "#589AB8")      ;; A darker version of the standard blue
 
+(def active-button-text-color "white")
+(def active-button-background-color "#F2994A")
+
 (def muted-button-text-color strong-button-background-color)
 (def muted-button-background-color "white")
 (def muted-button-border-color white-background-border-color)
@@ -112,6 +115,7 @@
 (def sidebar-item-selected-color "#3C3C45")      ;; Slightly lighter dark black
 (def sidebar-item-check-color strong-button-background-color)
 (def sidebar-text-color "white")
+(def navbar-text-color "white")
 
 (def wizard-panel-background-color "#636A6F")      ;; Very dark grey
 (def wizard-panel-text-color "white")
@@ -159,6 +163,9 @@
    [:.bm-strong-button {:color            strong-button-text-color
                         :background-color strong-button-background-color
                         :border           (str "1px solid " strong-button-border-color)}]
+   [:.bm-active-button {:color active-button-text-color
+                        :background-color active-button-background-color
+                        :border (str "1px solid " active-button-background-color)}]
    [:.bm-muted-button {:color            muted-button-text-color
                        :background-color muted-button-background-color
                        :border           (str "1px solid " strong-button-border-color)}]
@@ -190,7 +197,8 @@
    [:.raptor-editable-block {:color default-text-color}]
 
    ;; button components - to 26px high
-   [:button {:height "26px"}]
+   [:button {:height "26px"
+             :border-radius "3px"}]
    [:.btn {:padding "0px 12px"}]
 
    ;; input-text - set to 26px high

src/day8/re_frame/trace/styles.cljs

@@ -313,7 +313,16 @@
    [(s/& :.external-window) {:display "flex"
                              :height  (percent 100)
                              :flex    "1 1 auto"}]
-   [:.panel-content-top {}]
+   [:.panel-content-top {}
+    [:.bm-title-text {:color common/navbar-text-color}]
+    [:button {:width "81px"
+              :height "31px"
+              :font-weight 700
+              :font-size "14px"
+              :cursor "pointer"
+              :text-align "center"
+              :padding "0 5px"
+              :margin "0 5px"}]]
    [:.panel-content-tabs {:margin-left common/gs-19}]
    [:.panel-content-scrollable panel-mixin]
    [:.epoch-panel panel-mixin]

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

@@ -43,13 +43,18 @@
         :align :center
         :gap common/gs-12s
         :children
+        (if showing-settings?
+          [[rc/label :class "bm-title-text" :label "Settings"]]
           [[:span.arrow "◀"]
            [:span.event-header "[:some-namespace/blah 34 \"Hello\""]
-         [:span.arrow "▶"]]]
+           [:span.arrow "▶"]])]
        [rc/h-box
         :align :center
         :children
-        [[:img.nav-icon
+        [(when showing-settings?
+           [:button {:class "bm-active-button"
+                     :on-click #(rf/dispatch [:settings/toggle-settings])} "Done"])
+         [:img.nav-icon
           {:title    "Pause"
            :src      (str "data:image/svg+xml;utf8,"
                           pause-svg)

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

@@ -8,10 +8,6 @@
    :gap common/gs-19s
    :children
    [[rc/label
-     :label "Settings"
-     :class "bm-title-text"]
-
-    [rc/label
      :label "Limits"
      :class "bm-heading-text"]