diff --git a/src/day8/re_frame/trace/common_styles.cljs b/src/day8/re_frame/trace/common_styles.cljs index 45f984d..d58317d 100644 --- a/src/day8/re_frame/trace/common_styles.cljs +++ b/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 diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs index d065e29..3b05ee1 100644 --- a/src/day8/re_frame/trace/styles.cljs +++ b/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] diff --git a/src/day8/re_frame/trace/view/container.cljs b/src/day8/re_frame/trace/view/container.cljs index 711ff33..43447ae 100644 --- a/src/day8/re_frame/trace/view/container.cljs +++ b/src/day8/re_frame/trace/view/container.cljs @@ -43,13 +43,18 @@ :align :center :gap common/gs-12s :children - [[:span.arrow "◀"] - [:span.event-header "[:some-namespace/blah 34 \"Hello\""] - [:span.arrow "▶"]]] + (if showing-settings? + [[rc/label :class "bm-title-text" :label "Settings"]] + [[:span.arrow "◀"] + [:span.event-header "[:some-namespace/blah 34 \"Hello\""] + [: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) diff --git a/src/day8/re_frame/trace/view/settings.cljs b/src/day8/re_frame/trace/view/settings.cljs index 105e939..ce28806 100644 --- a/src/day8/re_frame/trace/view/settings.cljs +++ b/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"]