🐛 Wrong component background color

frontend/src/app/main/data/dashboard.cljs

@@ -366,14 +366,14 @@
 (defn hide-file-menu
   []
   (ptk/reify ::hide-file-menu
-     ptk/UpdateEvent
-     (update [_ state]
-       (update state :dashboard-local
-               assoc :menu-open false))))
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :dashboard-local
+              assoc :menu-open false))))
 
 (defn start-edit-file-name
   [file-id]
-  (ptk/reify ::start-edit-file-name
+  (ptk/reify ::start-edit-file-menu
     ptk/UpdateEvent
     (update [_ state]
       (update state :dashboard-local

frontend/src/app/main/render.cljs

@@ -44,6 +44,7 @@
    [app.main.ui.shapes.svg-raw :as svg-raw]
    [app.main.ui.shapes.text :as text]
    [app.main.ui.shapes.text.fontfaces :as ff]
+   [app.util.dom :as dom]
    [app.util.http :as http]
    [app.util.strings :as ust]
    [app.util.thumbnails :as th]
@@ -626,7 +627,7 @@
            bounds         (gsb/get-object-bounds objects shape)
 
            background     (when (str/ends-with? object-id "component")
-                            (or (:background options) "#aab5ba"))
+                            (or (:background options) (dom/get-css-variable "--assets-component-background-color") "#fff"))
 
            x              (dm/get-prop bounds :x)
            y              (dm/get-prop bounds :y)

frontend/src/app/main/ui/dashboard.scss

@@ -11,7 +11,7 @@
   display: grid;
   grid-template-columns: $s-40 $s-256 1fr;
   grid-template-rows: $s-52 1fr;
-  height: 100.0vh;
+  height: 100vh;
 
   :global(svg#loader-pencil) {
     fill: $df-secondary;

frontend/src/app/util/dom.cljs

@@ -433,6 +433,12 @@
   [o prop]
   (.getPropertyValue ^js o prop))
 
+(defn get-css-variable
+  ([variable element]
+   (.getPropertyValue (.getComputedStyle js/window element) variable))
+  ([variable]
+   (.getPropertyValue (.getComputedStyle js/window (.-documentElement js/document)) variable)))
+
 (defn focus!
   [^js node]
   (when (some? node)