[FEAT] Enhanced UI

src/components/FileUploader.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="border-2 border-dashed rounded-xl p-4 sm:p-8 text-center transition-all duration-200"
+    class="relative border-3 border-dashed rounded-2xl p-8 sm:p-12 text-center transition-all duration-300 cursor-pointer group overflow-hidden"
     :class="{
-      'border-blue-300 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/30': isDragging,
-      'border-gray-200 hover:border-blue-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:border-blue-500 dark:hover:bg-gray-700/50': !isDragging,
+      'border-blue-400 bg-gradient-to-br from-blue-50 to-indigo-50 dark:border-blue-400 dark:from-blue-900/40 dark:to-indigo-900/40 scale-[1.02]': isDragging,
+      'border-gray-300 bg-gradient-to-br from-gray-50/50 to-slate-50/50 hover:border-blue-400 hover:from-blue-50/80 hover:to-indigo-50/80 dark:border-gray-600 dark:from-gray-800/30 dark:to-gray-700/30 dark:hover:border-blue-400 dark:hover:from-blue-900/30 dark:hover:to-indigo-900/30': !isDragging,
     }"
     @dragenter.prevent="isDragging = true"
     @dragleave.prevent="isDragging = false"
@@ -12,19 +12,38 @@
     @click="openFileDialog"
     data-rybbit-event="file-upload-area"
   >
+    <div class="absolute inset-0 bg-gradient-to-br from-blue-400/0 to-indigo-400/0 group-hover:from-blue-400/5 group-hover:to-indigo-400/5 transition-all duration-300"></div>
+
     <input ref="fileInput" type="file" multiple accept="image/*,.json" class="hidden" @change="handleFileChange" />
 
-    <div class="mb-4 sm:mb-6">
-      <img src="@/assets/images/file.svg" alt="File upload" class="w-16 h-16 sm:w-20 sm:h-20 mx-auto mb-2 sm:mb-4 opacity-75 dark:invert" />
+    <div class="relative z-10">
+      <div class="mb-6 transform transition-transform duration-300" :class="isDragging ? 'scale-110' : 'group-hover:scale-105'">
+        <div class="w-20 h-20 sm:w-24 sm:h-24 mx-auto mb-4 bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900/50 dark:to-indigo-900/50 rounded-2xl flex items-center justify-center shadow-lg">
+          <i class="fas fa-cloud-upload-alt text-4xl sm:text-5xl text-blue-600 dark:text-blue-400"></i>
+        </div>
+      </div>
+
+      <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3">
+        <span v-if="isDragging">Drop your files here</span>
+        <span v-else>Upload Your Sprites</span>
+      </h3>
+      <p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 mb-2">Drag and drop sprite images or JSON files</p>
+      <p class="text-sm text-gray-500 dark:text-gray-400 mb-8">Supports PNG, JPG, GIF, and JSON</p>
+
+      <div class="flex items-center justify-center gap-4 mb-6">
+        <div class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></div>
+        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">or</span>
+        <div class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></div>
+      </div>
+
+      <button
+        class="px-8 py-3.5 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 dark:from-blue-600 dark:to-indigo-700 dark:hover:from-blue-700 dark:hover:to-indigo-800 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:scale-105 flex items-center justify-center gap-3 mx-auto"
+        data-rybbit-event="select-files"
+      >
+        <i class="fas fa-folder-open text-lg"></i>
+        <span>Browse Files</span>
+      </button>
     </div>
-
-    <p class="text-lg sm:text-xl font-medium text-gray-700 dark:text-gray-200 mb-2">Drag and drop your sprite images or JSON file here</p>
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4 sm:mb-6">or</p>
-
-    <button class="w-full sm:w-auto px-6 py-3 sm:py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors flex sm:inline-flex items-center justify-center space-x-2 cursor-pointer" data-rybbit-event="select-files">
-      <i class="fas fa-folder-open"></i>
-      <span>Select files</span>
-    </button>
   </div>
 </template>