Calculate CSS values rather than hard-coding strings for setting

src/day8/re_frame/trace/common_styles.cljs

@@ -1,5 +1,6 @@
 (ns day8.re-frame.trace.common-styles
-  (:require [garden.units :refer [px em]]))
+  (:require [garden.units :refer [px em]]
+            [garden.compiler :refer [render-css]]))
 
 ;; TODO: Switch these to BM (or just use BM defs if available)
 
@@ -34,15 +35,14 @@
 (def gs-81 (px 81))
 (def gs-131 (px 131))
 
-;; TODO: figure out how to cast gs-* into strings, rather than manually making them here.
-(def gs-5s "5px")
-(def gs-7s "7px")
-(def gs-12s "12px")
-(def gs-19s "19px")
-(def gs-31s "31px")
-(def gs-50s "50px")
-(def gs-81s "81px")
-(def gs-131s "131px")
+(def gs-5s (render-css gs-5))
+(def gs-7s (render-css gs-7))
+(def gs-12s (render-css gs-12))
+(def gs-19s (render-css gs-19))
+(def gs-31s (render-css gs-31))
+(def gs-50s (render-css gs-50))
+(def gs-81s (render-css gs-81))
+(def gs-131s (render-css gs-131))
 
 
 (def sub-create-color "#9b51e0")

src/day8/re_frame/trace/events.cljs

@@ -126,8 +126,6 @@
 
 (rf/reg-event-db
   :settings/set-number-of-retained-epochs
-  [rf/debug]
-
   (fn [db [_ num-str]]
     (let [num (js/parseInt num-str)]
       (if-not (js/isNaN num)

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

@@ -1,16 +1,19 @@
 (ns day8.re-frame.trace.view.settings
   (:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
-            [day8.re-frame.trace.utils.re-com :as rc :refer [css-join]]
             [mranderson047.reagent.v0v6v0.reagent.core :as r]
-            [day8.re-frame.trace.common-styles :as common]))
+            [day8.re-frame.trace.utils.re-com :as rc :refer [css-join]]
+            [day8.re-frame.trace.common-styles :as common]
+            [garden.units :as units]
+            [garden.compiler :refer [render-css]]))
 
 (def comp-section-width "400px")
 (def instruction--section-width "190px")
 (def horizontal-gap common/gs-7s)
 (def vertical-gap common/gs-12s)
-(def settings-box-vertical-padding common/gs-7s)
-(def settings-box-81 "67px")    ;; common/gs-81s - 2 * settings-box-vertical-padding
-(def settings-box-131 "117px")  ;; common/gs-313s - 2 * settings-box-vertical-padding
+(def settings-box-vertical-padding common/gs-7)
+(def settings-box-padding (css-join "7px" "0"))
+(def settings-box-81 (render-css (units/px- common/gs-81 (units/px* 2 settings-box-vertical-padding))))
+(def settings-box-131 (render-css (units/px- common/gs-131 (units/px* 2 settings-box-vertical-padding))))
 
 ;; TODO: START ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
 
@@ -77,7 +80,7 @@
   [rc/h-box
    :gap        common/gs-19s
    :min-height min-height
-   :padding    (css-join settings-box-vertical-padding "0px")
+   :padding    settings-box-padding
    :align      :center
    :children   [[rc/v-box
                  :width      comp-section-width