add document remove button

app/javascript/submission_form/area.vue

@@ -30,7 +30,7 @@
     :class="{ 'cursor-default ': !submittable, 'z-0 ': isActive && submittable, 'bg-opacity-100 ': (isActive || isValueSet) && submittable }"
   >
     <span
-      style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; font-size: 1.4rem"
+      style="--tw-bg-opacity: 1; --tw-border-opacity: 0.2; font-size: 1.4rem"
       class="!text-2xl w-full h-full"
       v-text="showLocalText"
     />
@@ -44,7 +44,7 @@
     :class="{ 'cursor-default ': !submittable, 'z-0 ': isActive && submittable, 'bg-opacity-100 ': (isActive || isValueSet) && submittable }"
   >
     <span
-      style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; font-size: 1.4rem"
+      style="--tw-bg-opacity: 1; --tw-border-opacity: 0.2; font-size: 1.4rem"
       class="flex items-center px-0.5 w-full h-full"
     >
       {{ getFormattedDate }}
@@ -82,7 +82,7 @@
     :class="{'cursor-default ': !submittable}"
   >
     <span
-      style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; font-size: 1.4rem"
+      style="--tw-bg-opacity: 1; --tw-border-opacity: 0.2; font-size: 1.4rem"
       class="w-full h-full"
     >
       <component

app/javascript/template_builder/field_submitter.vue

@@ -122,7 +122,7 @@
         />
       </div>
       <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 flex justify-center items-center rounded">
-        <IconPlus
+        <IconChevronDown
           width="18"
           height="18"
         />
@@ -185,7 +185,7 @@
 </template>
 
 <script>
-import { IconUserPlus, IconTrashX, IconPlus, IconChevronUp } from '@tabler/icons-vue'
+import { IconUserPlus, IconTrashX, IconChevronDown, IconChevronUp } from '@tabler/icons-vue'
 import Contenteditable from './contenteditable'
 import { v4 } from 'uuid'
 
@@ -194,9 +194,9 @@ export default {
   components: {
     IconUserPlus,
     Contenteditable,
-    IconPlus,
     IconTrashX,
-    IconChevronUp
+    IconChevronUp,
+    IconChevronDown
   },
   props: {
     showNewFields: {

app/javascript/template_builder/preview.vue

@@ -8,9 +8,6 @@
         class="rounded border"
         loading="lazy"
       >
-      <div class="absolute bottom-0 left-0 bg-white text-gray-700 p-1">
-        {{ index + 1 }}
-      </div>
       <div
         class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
         @click="$emit('scroll-to', item, previewImage)"
@@ -45,15 +42,6 @@
           <div
             class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
           >
-            <div>
-              <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-red-500 hover:border-base-content w-full transition-colors"
-                style="width: 24px; height: 24px"
-                @click.stop="$emit('remove', item)"
-              >
-                &times;
-              </button>
-            </div>
             <div
               v-if="withArrows"
               class="flex flex-col space-y-1"
@@ -111,10 +99,22 @@
         width="22"
         class="animate-spin"
       />
-      <span v-if="isLoading"> Add blank page </span>
+      <span v-if="isLoading"> Adding blank page </span>
       <span v-else>Add blank page</span>
     </button>
 
+    <label
+      class="btn btn-outline w-full mt-2"
+      @click.stop="$emit('remove', item)"
+    >
+      <span class="flex items-center">
+        <IconFileOff
+          width="22"
+        />
+        &nbsp;
+        del document </span>
+    </label>
+
     <div class="flex pb-2 pt-1.5">
       <Contenteditable
         :model-value="item.name"
@@ -131,14 +131,15 @@
 import Contenteditable from './contenteditable'
 import Upload from './upload'
 import ReplaceButton from './replace'
-import { IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconInnerShadowTop, IconFileOff } from '@tabler/icons-vue'
 
 export default {
   name: 'DocumentPreview',
   components: {
     Contenteditable,
     ReplaceButton,
-    IconInnerShadowTop
+    IconInnerShadowTop,
+    IconFileOff
   },
   props: {
     item: {