From d2f77aaa3f048e0039cf45c45b01fcf2e51328b6 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Tue, 4 Mar 2025 12:21:30 +0800
Subject: [PATCH] Enhance UI components with dark mode and tooltip improvements

- Update FileInput component dark mode text color
- Modify OpenForm dragging state background for dark mode
- Refactor OpenFormField admin preview actions with tooltips and improved styling
- Add z-index and styling improvements for form field action buttons
---
 client/components/forms/FileInput.vue         |  2 +-
 client/components/open/forms/OpenForm.vue     |  2 +-
 .../components/open/forms/OpenFormField.vue   | 40 +++++++++++--------
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/client/components/forms/FileInput.vue b/client/components/forms/FileInput.vue
index 913eadbd..9677bb02 100644
--- a/client/components/forms/FileInput.vue
+++ b/client/components/forms/FileInput.vue
@@ -98,7 +98,7 @@
               <p class="mt-2 text-sm text-gray-500 font-medium select-none">
                 {{ $t('forms.fileInput.chooseFiles', { n: multiple ? 1 : 0 }) }}
               </p>
-              <p class="mt-1 text-xs text-gray-400 dark:text-gray-600 select-none">
+              <p class="mt-1 text-xs text-gray-400 dark:text-gray-400 select-none">
                 {{ $t('forms.fileInput.sizeLimit', mbLimit) }}
               </p>
             </template>
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index dc9233a3..bd41d1e2 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -52,7 +52,7 @@
           group="form-elements"
           item-key="id"
           class="grid grid-cols-12 relative transition-all w-full"
-          :class="{'rounded-md bg-blue-50':draggingNewBlock}"
+          :class="{'rounded-md bg-blue-50 dark:bg-gray-800':draggingNewBlock}"
           ghost-class="ghost-item"
           filter=".not-draggable"
           :animation="200"
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index c7db21cd..7fb356e9 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -19,40 +19,46 @@
     >
       <div
         v-if="adminPreview"
-        class="absolute translate-y-full lg:translate-y-0 -bottom-1 left-1/2 -translate-x-1/2 lg:-translate-x-full lg:-left-1 lg:top-1 lg:bottom-0 hidden group-hover/nffield:block"
+        class="absolute translate-y-full lg:translate-y-0 -bottom-1 left-1/2 -translate-x-1/2 lg:-translate-x-full lg:-left-1 lg:top-1 lg:bottom-0 hidden group-hover/nffield:block z-50"
       >
         <div
-          class="flex lg:flex-col bg-gray-100 dark:bg-gray-800 border rounded-md"
+          class="flex lg:flex-col bg-white !bg-white dark:!bg-white border rounded-md shadow-sm z-50 p-[1px] relative"
         >
           <div
-            class="p-1 lg:pt-0 -mb-2 hover:text-blue-500 cursor-pointer text-gray-400 dark:text-gray-500 dark:border-gray-500"
+            class="p-1 hover:!text-blue-500 dark:hover:!text-blue-500 hover:bg-blue-50 cursor-pointer !text-gray-500 dark:!text-gray-500 flex items-center justify-center rounded-md"
             role="button"
             @click.prevent="openAddFieldSidebar"
           >
-            <Icon
-              name="heroicons:plus-16-solid"
-              class="w-6 h-6"
-            />
+            <UTooltip text="Add new field" :popper="{ placement: 'right' }" class="z-[100]">
+              <Icon
+                name="i-heroicons-plus-circle-20-solid"
+                class="w-5 h-5 !text-gray-500 dark:!text-gray-500 hover:!text-blue-500 dark:hover:!text-blue-500"
+              />
+            </UTooltip>
           </div>
           <div
-            class="p-1 lg:pt-0 hover:text-blue-500 cursor-pointer flex items-center justify-center text-center text-gray-400 dark:text-gray-500 dark:border-gray-500"
+            class="p-1 hover:!text-blue-500 dark:hover:!text-blue-500 hover:bg-blue-50 cursor-pointer flex items-center justify-center text-center !text-gray-500 dark:!text-gray-500 rounded-md"
             role="button"
             @click.prevent="editFieldOptions"
           >
-            <Icon
-              name="heroicons:cog-8-tooth-20-solid"
-              class="w-5 h-5"
-            />
+            <UTooltip text="Edit field settings" :popper="{ placement: 'right' }" class="z-[100]">
+              <Icon
+                name="heroicons:cog-8-tooth-20-solid"
+                class="w-5 h-5 !text-gray-500 dark:!text-gray-500 hover:!text-blue-500 dark:hover:!text-blue-500"
+              />
+            </UTooltip>
           </div>
           <div
-            class="p-1 pt-0 hover:text-blue-500 mt-1 cursor-pointer flex items-center justify-center text-center text-gray-400 dark:text-gray-500 dark:border-gray-500"
+            class="p-1 hover:!text-red-600 dark:hover:!text-red-600 hover:bg-red-50 cursor-pointer flex items-center justify-center text-center !text-red-500 dark:!text-red-500 rounded-md"
             role="button"
             @click.prevent="removeField"
           >
-            <Icon
-              name="heroicons:trash-20-solid"
-              class="w-5 h-5"
-            />
+            <UTooltip text="Delete field" :popper="{ placement: 'right' }" class="z-[100]">
+              <Icon
+                name="heroicons:trash-20-solid"
+                class="w-5 h-5 !text-red-500 dark:!text-red-500 hover:!text-red-600 dark:hover:!text-red-600"
+              />
+            </UTooltip>
           </div>
         </div>
       </div>