adjust style

app/javascript/template_builder/contenteditable.vue

@@ -8,7 +8,7 @@
       dir="auto"
       :contenteditable="editable"
       style="min-width: 2px"
-      :class="iconInline ? 'inline' : 'block'"
+      :class="[iconInline ? 'inline' : 'block', hideIcon ? 'focus:block' : '']"
       class="peer outline-none"
       @paste.prevent="onPaste"
       @keydown.enter.prevent="blurContenteditable"
@@ -18,22 +18,19 @@
       {{ value }}
     </span>
     <span
-      v-if="withRequired"
-      title="Required"
-      class="text-red-500 peer-focus:hidden"
-      @click="focusContenteditable"
+      class="relative inline"
+      :class="{ 'peer-focus:hidden': hideIcon, 'peer-focus:invisible': !hideIcon }"
     >
-      *
+      <IconPencil
+        class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle pl-1"
+        :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
+        :title="t('edit')"
+        :class="{ invisible: !editable, 'absolute top-1/2 -translate-y-1/2': !iconInline || floatIcon, 'inline align-bottom': iconInline, 'left-0': floatIcon }"
+        :width="iconWidth + 4"
+        :stroke-width="iconStrokeWidth"
+        @click="[focusContenteditable(), selectOnEditClick && selectContent()]"
+      />
     </span>
-    <IconPencil
-      class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle"
-      :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
-      :title="t('edit')"
-      :class="{ invisible: !editable, 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline, 'peer-focus:hidden': hideIcon, 'peer-focus:invisible': !hideIcon }"
-      :width="iconWidth"
-      :stroke-width="iconStrokeWidth"
-      @click="[focusContenteditable(), selectOnEditClick && selectContent()]"
-    />
   </div>
 </template>
 
@@ -67,7 +64,7 @@ export default {
       required: false,
       default: true
     },
-    withRequired: {
+    floatIcon: {
       type: Boolean,
       required: false,
       default: false

app/javascript/template_builder/field_submitter.vue

@@ -52,7 +52,7 @@
             >
               <span class="py-1 flex items-center">
                 <span
-                  class="rounded-full w-3 h-3 ml-1 mr-3"
+                  class="rounded-full w-3 h-3 ml-1 mr-3 flex-shrink-0"
                   :class="colors[index % colors.length]"
                 />
                 <span>
@@ -100,7 +100,7 @@
       class="cursor-pointer text-base-100 flex h-full items-center justify-center"
     >
       <button
-        class="mx-1 w-3 h-3 rounded-full"
+        class="mx-1 w-3 h-3 rounded-full flex-shrink-0"
         :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
       />
     </label>
@@ -108,11 +108,11 @@
       v-else
       ref="label"
       tabindex="0"
-      class="group cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 hover:border-content w-full flex justify-between"
+      class="group cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 hover:border-content w-full flex justify-between items-center"
     >
       <div class="flex items-center space-x-2">
         <span
-          class="w-3 h-3 rounded-full"
+          class="w-3 h-3 rounded-full flex-shrink-0"
           :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
         />
         <Contenteditable
@@ -125,7 +125,7 @@
           @update:model-value="$emit('name-change', selectedSubmitter)"
         />
       </div>
-      <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 justify-center rounded">
+      <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 justify-center rounded flex-shrink-0">
         <component
           :is="editable ? 'IconPlus' : 'IconChevronDown'"
           width="18"
@@ -153,7 +153,7 @@
         >
           <span class="py-1 flex items-center">
             <span
-              class="rounded-full w-3 h-3 ml-1 mr-3"
+              class="rounded-full w-3 h-3 ml-1 mr-3 flex-shrink-0"
               :class="colors[index % colors.length]"
             />
             <span>
@@ -164,7 +164,7 @@
             v-if="!compact && submitters.length > 1 && editable"
             class="flex"
           >
-            <div class="flex-col pr-1 hidden group-hover:flex -mt-1 h-0">
+            <div class="flex-col pr-1 flex invisible group-hover:visible -mt-1 h-0">
               <button
                 :title="t('up')"
                 class="relative w-2"
@@ -184,7 +184,7 @@
             </div>
             <button
               v-if="!compact && submitters.length > 1 && editable"
-              class="hidden group-hover:block px-2"
+              class="invisible group-hover:visible px-2"
               @click.prevent.stop="remove(submitter)"
             >
               <IconTrashX :width="18" />

app/javascript/template_builder/google_drive_document_settings.vue

@@ -4,7 +4,10 @@
     :class="{ 'dropdown-open': isLoading }"
   >
     <label tabindex="0">
-      <IconBrandGoogleDrive class="w-5 h-5 inline-block mr-1 cursor-pointer" />
+      <IconBrandGoogleDrive
+        width="19"
+        class="inline-block mr-1 cursor-pointer"
+      />
     </label>
     <ul
       tabindex="0"

app/javascript/template_builder/mobile_draw_field.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute text-center w-full bottom-0 pr-3 mb-4">
+  <div class="absolute w-full bottom-0 pr-3 mb-4">
     <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 draw-field-container-mobile">
       <div class="flex items-center space-x-2">
         <component

app/javascript/template_builder/preview.vue

@@ -9,7 +9,7 @@
         loading="lazy"
       >
       <div
-        class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1 hover:bg-black/10 transition-colors"
+        class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1 hover:bg-black/10 transition-colors rounded"
         @click="$emit('scroll-to', item)"
       >
         <div
@@ -23,7 +23,7 @@
           >
             <div>
               <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
+                class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
                 @click.stop="isShowConditionsModal = true"
               >
                 <IconRouteAltLeft
@@ -48,7 +48,7 @@
           >
             <div>
               <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                 style="width: 24px; height: 24px"
                 @click.stop="$emit('remove', item)"
               >
@@ -63,7 +63,7 @@
                 class="tooltip tooltip-left before:text-xs"
               >
                 <button
-                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
+                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
                   @click.stop="$emit('reorder', item)"
                 >
                   <IconSortDescending2
@@ -75,14 +75,14 @@
               </span>
               <template v-if="withArrows">
                 <button
-                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                   style="width: 24px; height: 24px"
                   @click.stop="$emit('up', item)"
                 >
                   &uarr;
                 </button>
                 <button
-                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                   style="width: 24px; height: 24px"
                   @click.stop="$emit('down', item)"
                 >
@@ -105,7 +105,8 @@
         :model-value="item.name"
         :icon-width="16"
         :icon-inline="true"
-        :hide-icon="false"
+        :float-icon="!item.google_drive_file_id"
+        :hide-icon="!item.google_drive_file_id"
         :editable="editable"
         class="mx-auto"
         @update:model-value="onUpdateName"