adjust border

app/javascript/elements/dashboard_dropzone.js

@@ -168,10 +168,10 @@ export default targetable(class extends HTMLElement {
 
       if (this.classList.contains('before:border-base-300')) {
         this.classList.remove('before:border-base-300')
-        this.classList.add('before:border-base-content/50')
+        this.classList.add('before:border-base-content/30')
       } else if (this.classList.contains('border-base-300')) {
         this.classList.remove('border-base-300')
-        this.classList.add('border-base-content/50')
+        this.classList.add('border-base-content/30')
       }
     }
   }
@@ -179,11 +179,11 @@ export default targetable(class extends HTMLElement {
   onDragleave () {
     this.style.backgroundColor = null
 
-    if (this.classList.contains('before:border-base-content/50')) {
+    if (this.classList.contains('before:border-base-content/30')) {
-      this.classList.remove('before:border-base-content/50')
+      this.classList.remove('before:border-base-content/30')
       this.classList.add('before:border-base-300')
-    } else if (this.classList.contains('border-base-content/50')) {
+    } else if (this.classList.contains('border-base-content/30')) {
-      this.classList.remove('border-base-content/50')
+      this.classList.remove('border-base-content/30')
       this.classList.add('border-base-300')
     }
   }

app/javascript/elements/file_dropzone.js

@@ -28,13 +28,13 @@ export default actionable(targetable(class extends HTMLElement {
     if (e.dataTransfer?.types?.includes('Files')) {
       this.style.backgroundColor = '#F7F3F0'
       this.classList.remove('border-base-300', 'hover:bg-base-200/30')
-      this.classList.add('border-base-content/50')
+      this.classList.add('border-base-content/30')
     }
   }
 
   onDragleave () {
     this.style.backgroundColor = null
-    this.classList.remove('border-base-content/50')
+    this.classList.remove('border-base-content/30')
     this.classList.add('border-base-300', 'hover:bg-base-200/30')
   }
 

app/javascript/template_builder/dropzone.vue

@@ -10,7 +10,7 @@
       id="document_dropzone"
       class="w-full relative rounded-md border-2 border-base-content/10 border-dashed"
       :for="inputId"
-      :class="{ 'opacity-50': isLoading, 'hover:bg-base-200/50': !isDragEntering, 'bg-base-200/50 border-base-content/50': isDragEntering }"
+      :class="{ 'opacity-50': isLoading, 'hover:bg-base-200/50': withHoverClass && !isDragEntering, 'bg-base-200/50 border-base-content/30': isDragEntering }"
     >
       <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center pointer-events-none">
         <div class="flex flex-col items-center">
@@ -79,6 +79,11 @@ export default {
       type: [Number, String],
       required: true
     },
+    withHoverClass: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     icon: {
       type: String,
       required: false,

app/javascript/template_builder/hover_dropzone.vue

@@ -9,6 +9,7 @@
         icon="IconFilePlus"
         :template-id="templateId"
         :accept-file-types="acceptFileTypes"
+        :with-hover-class="false"
         :with-description="false"
         :title="t('add_a_new_document')"
         type="add_files"
@@ -22,6 +23,7 @@
           icon="IconFileSymlink"
           :template-id="templateId"
           :accept-file-types="acceptFileTypes"
+          :with-hover-class="false"
           :with-description="false"
           :title="t('replace_existing_document')"
           @loading="isLoading = $event"
@@ -34,6 +36,7 @@
           icon="IconFiles"
           :template-id="templateId"
           :accept-file-types="acceptFileTypes"
+          :with-hover-class="false"
           :with-description="false"
           :clone-template-on-upload="true"
           :title="t('clone_and_replace_documents')"

app/views/shared/_classes.html.erb

@@ -1 +1 @@
-<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/50 before:border-base-content/50' %>
+<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/30 before:border-base-content/30' %>

app/views/templates/_dropzone.html.erb

@@ -3,7 +3,7 @@
   <button type="submit" class="hidden"></button>
   <file-dropzone data-submit-on-upload="true" class="w-full">
     <label for="file_dropzone_input" class="w-full block h-52 relative hover:bg-base-200/30 rounded-xl border-2 border-base-300 border-dashed" data-target="file-dropzone.area">
-      <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center p-2">
+      <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center p-2 pointer-events-none">
         <div class="flex flex-col items-center text-center">
           <span data-target="file-dropzone.icon" class="flex flex-col items-center">
             <span>