From ea24baea055cf888cd447aba16b6a2c57bdba7fb Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Aug 2022 11:56:30 +0200
Subject: [PATCH] refactor(gui-v2): add visual hint for dropzone and add
 padding to dropzone box

---
 .../[projectType]/[projectId]/index/index/index.vue    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
index ef697e207d..b389ec8142 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
@@ -92,13 +92,15 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
 </script>
 
 <template>
-  <div ref="dropZone" class="h-full w-full text-gray-400 flex items-center justify-center relative">
+  <div ref="dropZone" class="h-full w-full text-gray-600 flex items-center justify-center relative">
     <general-overlay
-      v-model="isOverDropZone"
+      :model-value="true"
+      :class="[isOverDropZone ? 'bg-gray-300/75 border-primary shadow' : 'bg-gray-100/25 border-gray-500 pointer-events-none']"
       inline
-      class="text-white text-3xl shadow-pink-500 shadow-inner bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+      style="top: 20%; left: 20%; right: 20%; bottom: 20%"
+      class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded"
     >
-      <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+      <template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here </template>
     </general-overlay>
 
     <div class="flex flex-col gap-6 items-center justify-center md:w-1/2 mx-auto text-center">