fix builder bg color

app/javascript/template_builder/field.vue

@@ -16,6 +16,8 @@
             v-model="field.type"
             :editable="editable && !defaultField"
             :button-width="20"
+            :menu-classes="'mt-1.5'"
+            :menu-style="{ backgroundColor: dropdownBgColor }"
             @update:model-value="[maybeUpdateOptions(), save()]"
             @click="scrollToFirstArea"
           />
@@ -110,7 +112,8 @@
             <ul
               v-if="renderDropdown"
               tabindex="0"
-              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
+              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
+              :style="{ backgroundColor: dropdownBgColor }"
               draggable="true"
               @dragstart.prevent.stop
               @click="closeDropdown"
@@ -121,7 +124,7 @@
                 @click.stop
               >
                 <select
-                  class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal"
+                  class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
                   @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, save()]"
                 >
                   <option
@@ -134,7 +137,7 @@
                   </option>
                 </select>
                 <label
-                  :style="{ backgroundColor: backgroundColor }"
+                  :style="{ backgroundColor: dropdownBgColor }"
                   class="absolute -top-1 left-2.5 px-1 h-4"
                   style="font-size: 8px"
                 >
@@ -151,12 +154,12 @@
                   :placeholder="t('default_value')"
                   dir="auto"
                   :type="field.type"
-                  class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+                  class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
                   @blur="save"
                 >
                 <label
                   v-if="field.default_value"
-                  :style="{ backgroundColor: backgroundColor }"
+                  :style="{ backgroundColor: dropdownBgColor }"
                   class="absolute -top-1 left-2.5 px-1 h-4"
                   style="font-size: 8px"
                 >
@@ -171,7 +174,7 @@
                 <select
                   v-model="field.preferences.format"
                   :placeholder="t('format')"
-                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
+                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
                   @change="save"
                 >
                   <option
@@ -183,7 +186,7 @@
                   </option>
                 </select>
                 <label
-                  :style="{ backgroundColor: backgroundColor }"
+                  :style="{ backgroundColor: dropdownBgColor }"
                   class="absolute -top-1 left-2.5 px-1 h-4"
                   style="font-size: 8px"
                 >
@@ -197,7 +200,7 @@
               >
                 <select
                   :placeholder="t('format')"
-                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
+                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
                   @change="[field.preferences.format = $event.target.value, save()]"
                 >
                   <option
@@ -220,7 +223,7 @@
                   </option>
                 </select>
                 <label
-                  :style="{ backgroundColor: backgroundColor }"
+                  :style="{ backgroundColor: dropdownBgColor }"
                   class="absolute -top-1 left-2.5 px-1 h-4"
                   style="font-size: 8px"
                 >
@@ -569,6 +572,9 @@ export default {
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
+    dropdownBgColor () {
+      return ['', null, 'transparent'].includes(this.backgroundColor) ? 'white' : this.backgroundColor
+    },
     schemaAttachmentsIndexes () {
       return (this.template.schema || []).reduce((acc, item, index) => {
         acc[item.attachment_uuid] = index

app/javascript/template_builder/field_submitter.vue

@@ -37,6 +37,7 @@
           tabindex="0"
           class="rounded-md min-w-max mb-2"
           :class="menuClasses"
+          :style="menuStyle"
           @click="closeDropdown"
         >
           <li
@@ -136,6 +137,7 @@
       v-if="(editable || !compact) && renderDropdown"
       tabindex="0"
       :class="menuClasses"
+      :style="menuStyle"
       @click="closeDropdown"
     >
       <li
@@ -253,10 +255,15 @@ export default {
       type: String,
       required: true
     },
+    menuStyle: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     menuClasses: {
       type: String,
       required: false,
-      default: 'dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full z-10'
+      default: 'dropdown-content menu p-2 shadow rounded-box w-full z-10'
     }
   },
   emits: ['update:model-value', 'remove', 'new-submitter', 'name-change'],

app/javascript/template_builder/field_type.vue

@@ -22,6 +22,7 @@
       v-if="editable && renderDropdown"
       tabindex="0"
       class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
+      :style="menuStyle"
       :class="menuClasses"
       @click="closeDropdown"
     >
@@ -65,6 +66,11 @@ export default {
       required: false,
       default: 'mt-1.5 bg-base-100'
     },
+    menuStyle: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     buttonClasses: {
       type: String,
       required: false,

app/javascript/template_builder/fields.vue

@@ -3,8 +3,9 @@
     <FieldSubmitter
       :model-value="selectedSubmitter.uuid"
       class="roles-dropdown w-full rounded-lg"
-      :class="{ 'bg-base-100': withStickySubmitters }"
+      :style="withStickySubmitters ? { backgroundColor } : {}"
       :submitters="submitters"
+      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
       :editable="editable && !defaultSubmitters.length"
       @new-submitter="save"
       @remove="removeSubmitter"
@@ -71,7 +72,7 @@
         :key="field.name"
       >
         <div
-          :style="{ backgroundColor: backgroundColor }"
+          :style="{ backgroundColor }"
           draggable="true"
           class="default-field border border-base-300 rounded rounded-tr-none relative group mb-2"
           @dragstart="onDragstart({ type: 'text', ...field })"
@@ -113,7 +114,7 @@
         v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')"
         draggable="true"
         class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative"
-        :style="{ backgroundColor: backgroundColor }"
+        :style="{ backgroundColor }"
         :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
         @dragstart="onDragstart({ type: type })"
         @dragend="$emit('drag-end')"
@@ -142,7 +143,7 @@
           href="https://www.docuseal.co/pricing"
           target="_blank"
           class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
-          :style="{ backgroundColor: backgroundColor }"
+          :style="{ backgroundColor }"
         >
           <div class="w-0 absolute left-0">
             <IconLock

app/javascript/template_builder/mobile_draw_field.vue

@@ -24,6 +24,7 @@
       :submitters="submitters"
       :editable="editable"
       :mobile-view="true"
+      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
       @new-submitter="save"
       @remove="removeSubmitter"
       @name-change="save"
@@ -43,7 +44,7 @@ export default {
     Field,
     FieldSubmitter
   },
-  inject: ['save', 't'],
+  inject: ['save', 't', 'backgroundColor'],
   props: {
     drawField: {
       type: Object,