fix builder field button bg color

app/javascript/application.js

@@ -74,6 +74,7 @@ window.customElements.define('template-builder', class extends HTMLElement {
 
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template)),
+      backgroundColor: '#faf7f5',
       isDirectUpload: this.dataset.isDirectUpload === 'true'
     })
 

app/javascript/submission_form/form.vue

@@ -24,6 +24,7 @@
     v-show="isFormVisible"
     id="form_container"
     class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border-base-200 border p-4 rounded"
+    :style="{ backgroundColor: backgroundColor }"
   >
     <button
       v-if="!isCompleted"
@@ -378,6 +379,11 @@ export default {
       required: false,
       default: ''
     },
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
     isDirectUpload: {
       type: Boolean,
       required: false,

app/javascript/template_builder/builder.vue

@@ -84,7 +84,10 @@
           @down="moveDocument(item, 1)"
           @change="save"
         />
-        <div class="sticky bottom-0 bg-base-100 py-2">
+        <div
+          class="sticky bottom-0 py-2"
+          :class="{ 'bg-base-100': withStickySubmitters }"
+        >
           <Upload
             v-if="sortedDocuments.length"
             :template-id="template.id"
@@ -233,6 +236,7 @@ export default {
       template: this.template,
       save: this.save,
       baseFetch: this.baseFetch,
+      backgroundColor: this.backgroundColor,
       selectedAreaRef: computed(() => this.selectedAreaRef)
     }
   },
@@ -246,6 +250,11 @@ export default {
       required: false,
       default: false
     },
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
     baseUrl: {
       type: String,
       required: false,

app/javascript/template_builder/fields.vue

@@ -30,6 +30,7 @@
       :key="type"
       draggable="true"
       class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
+      :style="{ backgroundColor: backgroundColor }"
       @dragstart="onDragstart(type)"
       @dragend="$emit('drag-end')"
       @click="addField(type)"
@@ -101,7 +102,7 @@ export default {
     Field,
     FieldSubmitter
   },
-  inject: ['save'],
+  inject: ['save', 'backgroundColor'],
   props: {
     fields: {
       type: Array,