UX: better composer preview

UX: better composer preview

diff --git a/assets/stylesheets/common/survey.scss b/assets/stylesheets/common/survey.scss
index a360efc..97352d3 100644
--- a/assets/stylesheets/common/survey.scss
+++ b/assets/stylesheets/common/survey.scss
@@ -159,10 +159,25 @@
   }
 }
 
-// temp styles for composer preview
+// composer preview
+.d-editor-preview div[data-survey-wrapper] {
+  padding-top: 5px;
+}
+
 .d-editor-preview .survey {
   border: 1px solid var(--primary-low-mid);
   border-radius: var(--border-radius);
   font-size: 0;
   height: 150px;
+  &:before {
+    opacity: 0.6;
+    content: svg-uri(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="96px" height="96px" viewBox="0 0 448 512"><path fill="black" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM160 368c0 8.84-7.16 16-16 16h-32c-8.84 0-16-7.16-16-16V240c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v128zm96 0c0 8.84-7.16 16-16 16h-32c-8.84 0-16-7.16-16-16V144c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v224zm96 0c0 8.84-7.16 16-16 16h-32c-8.84 0-16-7.16-16-16v-64c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v64z" class=""></path></svg>'
+    );
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }

GitHub sha: ab7ae994