[FEAT] Remove gradients

src/App.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="min-h-screen p-4 sm:p-8 bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 transition-colors duration-300">
+  <div class="min-h-screen p-4 sm:p-8 bg-slate-50 dark:bg-gray-950 transition-colors duration-300">
     <div class="max-w-[1600px] mx-auto">
       <header class="mb-8 sm:mb-12">
         <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-6">
           <div class="text-center sm:text-left">
-            <h1 class="text-3xl sm:text-5xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent tracking-tight mb-2">Spritesheet generator</h1>
+            <h1 class="text-3xl sm:text-5xl font-bold text-blue-600 dark:text-blue-400 tracking-tight mb-2">Spritesheet generator</h1>
             <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Create professional spritesheets for your game development projects</p>
           </div>
           <dark-mode-toggle />
@@ -53,7 +53,7 @@
         <!-- Welcome state -->
         <div v-if="!visibleLayers.some(l => l.sprites.length)" class="p-6 sm:p-10">
           <div class="mb-8">
-            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Upload Sprites</h2>
+            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Upload sprites</h2>
             <p class="text-sm text-gray-600 dark:text-gray-400">Drag and drop images or import from JSON</p>
           </div>
           <file-uploader @upload-sprites="handleSpritesUpload" />

src/components/FileUploader.vue

@@ -2,8 +2,8 @@
   <div
     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-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-blue-400 bg-blue-50 dark:border-blue-400 dark:bg-blue-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,
+      'border-gray-300 bg-gray-50/50 hover:border-blue-400 hover:bg-blue-50/80 dark:border-gray-600 dark:bg-gray-800/30 dark:hover:border-blue-400 dark:hover:bg-blue-900/30': !isDragging,
     }"
     @dragenter.prevent="isDragging = true"
     @dragleave.prevent="isDragging = false"
@@ -12,13 +12,13 @@
     @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>
+    <div class="absolute inset-0 bg-blue-400/0 group-hover:bg-blue-400/5 transition-all duration-300"></div>
 
     <input ref="fileInput" type="file" multiple accept="image/*,.json" class="hidden" @change="handleFileChange" />
 
     <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">
+        <div class="w-20 h-20 sm:w-24 sm:h-24 mx-auto mb-4 bg-blue-100 dark:bg-blue-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>
@@ -36,10 +36,7 @@
         <div class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></div>
       </div>
 
-      <button
+      <button class="px-8 py-3.5 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 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">
-        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>

src/components/SpriteCanvas.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-6">
-    <div class="bg-gradient-to-r from-cyan-500 to-blue-500 dark:from-cyan-600 dark:to-blue-600 rounded-xl p-4 shadow-lg border border-cyan-400/50 dark:border-cyan-500/50">
+    <div class="bg-cyan-500 dark:bg-cyan-600 rounded-xl p-4 shadow-lg border border-cyan-400/50 dark:border-cyan-500/50">
       <div class="flex items-start gap-3">
         <i class="fas fa-lightbulb text-yellow-300 text-xl mt-0.5"></i>
         <div>

src/components/utilities/DarkModeToggle.vue

@@ -2,7 +2,7 @@
   <button
     @click="settingsStore.toggleDarkMode()"
     class="relative p-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl group"
-    :class="settingsStore.darkMode ? 'bg-gradient-to-br from-indigo-600 to-purple-700 text-yellow-300' : 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white'"
+    :class="settingsStore.darkMode ? 'bg-indigo-600 text-yellow-300' : 'bg-blue-500 text-white'"
     aria-label="Toggle dark mode"
     data-rybbit-event="toggle-dark-mode"
   >