From d9318c04f8e69a7741437c67f5d5a018a3968699 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Tue, 23 Apr 2024 01:57:45 +0300
Subject: [PATCH] fix builder bg color

---
 app/javascript/template_builder/field.vue     | 24 ++++++++++++-------
 .../template_builder/field_submitter.vue      |  9 ++++++-
 .../template_builder/field_type.vue           |  6 +++++
 app/javascript/template_builder/fields.vue    |  9 +++----
 .../template_builder/mobile_draw_field.vue    |  3 ++-
 5 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 52d71b93..5355a041 100644
--- a/app/javascript/template_builder/field.vue
+++ b/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
diff --git a/app/javascript/template_builder/field_submitter.vue b/app/javascript/template_builder/field_submitter.vue
index e4446c6c..e236ecef 100644
--- a/app/javascript/template_builder/field_submitter.vue
+++ b/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'],
diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue
index 58edd755..17e8ae44 100644
--- a/app/javascript/template_builder/field_type.vue
+++ b/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,
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index aabe8a23..26832f22 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/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
diff --git a/app/javascript/template_builder/mobile_draw_field.vue b/app/javascript/template_builder/mobile_draw_field.vue
index 84c56b0d..556d2209 100644
--- a/app/javascript/template_builder/mobile_draw_field.vue
+++ b/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,