🐛 Fix opacity in frame containers (#5858)

* 🐛 Fix opacity in frame containers

* 📎 Improve readability of frame containers by using class names

frontend/src/app/main/ui/shapes/frame.cljs

@@ -94,33 +94,32 @@
     ;; We need to separate blur from shadows because the blur is applied to the strokes
     ;; while the shadows have to be placed *under* the stroke (for example, the inner shadows)
     ;; and the shadows needs to be applied only to the content (without the stroke)
-    [:g {:filter filter-str-blur}
-     [:defs
-      [:& filters/filters {:shape (dissoc shape :blur) :filter-id filter-id-shadows}]
-      [:& filters/filters {:shape (assoc shape :shadow []) :filter-id filter-id-blur}]]
+    [:g.frame-container-wrapper {:opacity opacity}
+     [:g.frame-container-blur {:filter filter-str-blur}
+      [:defs
+       [:& filters/filters {:shape (dissoc shape :blur) :filter-id filter-id-shadows}]
+       [:& filters/filters {:shape (assoc shape :shadow []) :filter-id filter-id-blur}]]
 
      ;; This need to be separated in two layers so the clip doesn't affect the shadow filters
      ;; otherwise the shadow will be clipped and not visible
-     [:g {:filter filter-str-shadows}
-      [:g {:clip-path (when-not ^boolean show-content? (frame-clip-url shape render-id))
-           ;; A frame sets back normal fill behavior (default
-           ;; transparent). It may have been changed to default black
-           ;; if a shape coming from an imported SVG file is
-           ;; rendered. See main.ui.shapes.attrs/add-style-attrs.
-           :fill "none"
-           :opacity opacity}
+      [:g.frame-container-shadows {:filter filter-str-shadows}
+       [:g {:clip-path (when-not ^boolean show-content? (frame-clip-url shape render-id))
+        ;; A frame sets back normal fill behavior (default
+        ;; transparent). It may have been changed to default black
+        ;; if a shape coming from an imported SVG file is
+        ;; rendered. See main.ui.shapes.attrs/add-style-attrs.
+            :fill "none"}
 
-       [:& shape-fills {:shape shape}
-        (if ^boolean path?
-          [:> :path props]
-          [:> :rect props])]
+        [:& shape-fills {:shape shape}
+         (if ^boolean path?
+           [:> :path props]
+           [:> :rect props])]
+        children]]
 
-       children]]
-
-     [:& shape-strokes {:shape shape}
-      (if ^boolean path?
-        [:> :path props]
-        [:> :rect props])]]))
+      [:& shape-strokes {:shape shape}
+       (if ^boolean path?
+         [:> :path props]
+         [:> :rect props])]]]))
 
 (mf/defc frame-thumbnail-image
   {::mf/wrap-props false}

frontend/src/app/main/ui/workspace/shapes/frame.cljs

@@ -185,7 +185,6 @@
             (d/close! task)))
 
         (fdm/use-dynamic-modifiers objects (mf/ref-val content-ref) modifiers)
-
         [:& shape-container {:shape shape}
          [:g.frame-container
           {:id (dm/str "frame-container-" frame-id)