From 6b0c82a630cca868b905b77479f2fcb11f2b4532 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Sun, 23 Nov 2025 17:03:42 +0100
Subject: [PATCH] [FEAT] Updated colors

---
 src/App.vue | 62 ++++++++++++++++++++++++++---------------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1b63c3f..d75ec9e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
       <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 text-blue-600 dark:text-blue-400 tracking-tight mb-2">Spritesheet generator</h1>
+            <h1 class="text-3xl sm:text-5xl font-bold text-gray-900 dark:text-gray-100 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 />
@@ -66,7 +66,7 @@
                 <p class="text-gray-700 dark:text-gray-300 mb-6">This powerful online tool lets you upload individual sprite images and automatically arrange them into optimized sprite sheets with customizable layouts - perfect for indie developers, animators, and studios of any size.</p>
                 <div>
                   <h4 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
-                    <i class="fas fa-play-circle text-blue-600 dark:text-blue-400"></i>
+                    <i class="fas fa-play-circle text-gray-800 dark:text-gray-200"></i>
                     How it works
                   </h4>
                   <video controls playsinline class="w-full rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" title="Spritesheet generator tutorial" aria-label="Spritesheet generator tutorial">
@@ -87,16 +87,16 @@
               <section>
                 <div class="flex items-center justify-between mb-3">
                   <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 flex items-center gap-2">
-                    <i class="fas fa-upload text-blue-600 dark:text-blue-400 text-sm"></i>
+                    <i class="fas fa-upload text-gray-700 dark:text-gray-300 text-sm"></i>
                     Upload
                   </h3>
-                  <button @click="openJSONImportDialog" class="px-3 py-1.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 cursor-pointer" data-rybbit-event="import-json">
+                  <button @click="openJSONImportDialog" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 cursor-pointer" data-rybbit-event="import-json">
                     <i class="fas fa-file-import text-xs"></i>
                     <span>JSON</span>
                   </button>
                 </div>
-                <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-4 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-colors cursor-pointer" @click="openFileDialog">
-                  <i class="fas fa-plus-circle text-2xl text-blue-500 dark:text-blue-400 mb-2"></i>
+                <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-4 text-center hover:border-gray-500 dark:hover:border-gray-400 transition-colors cursor-pointer" @click="openFileDialog">
+                  <i class="fas fa-plus-circle text-2xl text-gray-700 dark:text-gray-300 mb-2"></i>
                   <p class="text-xs text-gray-600 dark:text-gray-400">Add sprites</p>
                 </div>
                 <input ref="uploadInput" type="file" multiple accept="image/*" class="hidden" @change="handleUploadChange" />
@@ -107,10 +107,10 @@
               <section>
                 <div class="flex items-center justify-between mb-3">
                   <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 flex items-center gap-2">
-                    <i class="fas fa-layer-group text-blue-600 dark:text-blue-400 text-sm"></i>
+                    <i class="fas fa-layer-group text-gray-700 dark:text-gray-300 text-sm"></i>
                     Layers
                   </h3>
-                  <button @click="addLayer()" class="px-3 py-1.5 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 cursor-pointer">
+                  <button @click="addLayer()" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 cursor-pointer">
                     <i class="fas fa-plus text-xs"></i>
                     <span>Add</span>
                   </button>
@@ -120,10 +120,10 @@
                     v-for="layer in layers"
                     :key="layer.id"
                     class="flex items-center gap-2 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border transition-all"
-                    :class="[layer.id === activeLayerId ? 'border-blue-500 ring-1 ring-blue-500' : 'border-gray-200 dark:border-gray-700', !layer.visible ? 'opacity-50' : '']"
+                    :class="[layer.id === activeLayerId ? 'border-gray-800 ring-1 ring-gray-800 dark:border-gray-400 dark:ring-gray-400' : 'border-gray-200 dark:border-gray-700', !layer.visible ? 'opacity-50' : '']"
                   >
                     <button @click.stop="layer.visible = !layer.visible" class="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors cursor-pointer" :title="layer.visible ? 'Hide layer' : 'Show layer'">
-                      <i :class="layer.visible ? 'fas fa-eye text-blue-600 dark:text-blue-400' : 'fas fa-eye-slash text-gray-400 dark:text-gray-500'" class="text-sm"></i>
+                      <i :class="layer.visible ? 'fas fa-eye text-gray-800 dark:text-gray-200' : 'fas fa-eye-slash text-gray-400 dark:text-gray-500'" class="text-sm"></i>
                     </button>
                     <input
                       v-if="editingLayerId === layer.id"
@@ -132,11 +132,11 @@
                       @blur="finishEditingLayer"
                       @keyup.enter="finishEditingLayer"
                       @keyup.esc="cancelEditingLayer"
-                      class="flex-1 px-2 py-1 border border-blue-500 dark:border-blue-400 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-blue-500 outline-none"
+                      class="flex-1 px-2 py-1 border border-gray-800 dark:border-gray-400 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-gray-800 dark:focus:ring-gray-400 outline-none"
                       ref="layerNameInput"
                       @click.stop
                     />
-                    <button v-else @click="activeLayerId = layer.id" class="flex-1 text-left px-2 py-1 rounded text-sm font-medium transition-all cursor-pointer" :class="layer.id === activeLayerId ? 'text-blue-600 dark:text-blue-400' : 'text-gray-700 dark:text-gray-300'">
+                    <button v-else @click="activeLayerId = layer.id" class="flex-1 text-left px-2 py-1 rounded text-sm font-medium transition-all cursor-pointer" :class="layer.id === activeLayerId ? 'text-gray-900 dark:text-gray-100' : 'text-gray-700 dark:text-gray-300'">
                       {{ layer.name }}
                       <span v-if="layer.sprites.length" class="text-xs opacity-60 ml-1">({{ layer.sprites.length }})</span>
                     </button>
@@ -159,13 +159,13 @@
               <!-- Grid Settings -->
               <section>
                 <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 mb-3 flex items-center gap-2">
-                  <i class="fas fa-th text-blue-600 dark:text-blue-400 text-sm"></i>
+                  <i class="fas fa-th text-gray-700 dark:text-gray-300 text-sm"></i>
                   Grid
                 </h3>
                 <div class="space-y-3">
                   <div class="flex items-center justify-between bg-white dark:bg-gray-800 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700">
                     <label for="columns" class="text-sm font-medium text-gray-700 dark:text-gray-200">Columns</label>
-                    <input id="columns" type="number" v-model.number="columns" min="1" max="10" class="w-16 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-blue-500 outline-none" />
+                    <input id="columns" type="number" v-model.number="columns" min="1" max="10" class="w-16 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-gray-500 outline-none" />
                   </div>
 
                   <div class="bg-white dark:bg-gray-800 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700">
@@ -179,7 +179,7 @@
                         v-model.number="settingsStore.manualCellWidth"
                         min="1"
                         max="2048"
-                        class="w-full min-w-0 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-blue-500 outline-none"
+                        class="w-full min-w-0 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-gray-500 outline-none"
                         placeholder="W"
                       />
                       <span class="text-gray-500 dark:text-gray-400 flex-shrink-0">×</span>
@@ -188,7 +188,7 @@
                         v-model.number="settingsStore.manualCellHeight"
                         min="1"
                         max="2048"
-                        class="w-full min-w-0 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-blue-500 outline-none"
+                        class="w-full min-w-0 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-gray-500 outline-none"
                         placeholder="H"
                       />
                     </div>
@@ -200,26 +200,26 @@
               <!-- Alignment -->
               <section>
                 <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 mb-3 flex items-center gap-2">
-                  <i class="fas fa-align-center text-blue-600 dark:text-blue-400 text-sm"></i>
+                  <i class="fas fa-align-center text-gray-700 dark:text-gray-300 text-sm"></i>
                   Align
                 </h3>
                 <div class="grid grid-cols-3 gap-2">
-                  <button @click="alignSprites('left')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Left">
+                  <button @click="alignSprites('left')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Left">
                     <i class="fas fa-arrow-left"></i>
                   </button>
-                  <button @click="alignSprites('center')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Center">
+                  <button @click="alignSprites('center')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Center">
                     <i class="fas fa-arrows-left-right"></i>
                   </button>
-                  <button @click="alignSprites('right')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Right">
+                  <button @click="alignSprites('right')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Right">
                     <i class="fas fa-arrow-right"></i>
                   </button>
-                  <button @click="alignSprites('top')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Top">
+                  <button @click="alignSprites('top')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Top">
                     <i class="fas fa-arrow-up"></i>
                   </button>
-                  <button @click="alignSprites('middle')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Middle">
+                  <button @click="alignSprites('middle')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Middle">
                     <i class="fas fa-arrows-up-down"></i>
                   </button>
-                  <button @click="alignSprites('bottom')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Bottom">
+                  <button @click="alignSprites('bottom')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Bottom">
                     <i class="fas fa-arrow-down"></i>
                   </button>
                 </div>
@@ -228,23 +228,23 @@
               <!-- Export -->
               <section>
                 <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 mb-3 flex items-center gap-2">
-                  <i class="fas fa-download text-blue-600 dark:text-blue-400 text-sm"></i>
+                  <i class="fas fa-download text-gray-700 dark:text-gray-300 text-sm"></i>
                   Export
                 </h3>
                 <div class="grid grid-cols-2 gap-2">
-                  <button @click="downloadSpritesheet" class="px-3 py-2 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="download-spritesheet">
+                  <button @click="downloadSpritesheet" class="px-3 py-2 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="download-spritesheet">
                     <i class="fas fa-image"></i>
                     <span>PNG</span>
                   </button>
-                  <button @click="exportSpritesheetJSON" class="px-3 py-2 bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="export-json">
+                  <button @click="exportSpritesheetJSON" class="px-3 py-2 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="export-json">
                     <i class="fas fa-file-code"></i>
                     <span>JSON</span>
                   </button>
-                  <button @click="openGifFpsModal" class="px-3 py-2 bg-amber-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-amber-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="download-gif">
+                  <button @click="openGifFpsModal" class="px-3 py-2 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="download-gif">
                     <i class="fas fa-film"></i>
                     <span>GIF</span>
                   </button>
-                  <button @click="downloadAsZip" class="px-3 py-2 bg-teal-500 hover:bg-teal-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="download-zip">
+                  <button @click="downloadAsZip" class="px-3 py-2 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="download-zip">
                     <i class="fas fa-file-archive"></i>
                     <span>ZIP</span>
                   </button>
@@ -260,14 +260,14 @@
               <div class="flex gap-1 p-2">
                 <button
                   @click="activeTab = 'canvas'"
-                  :class="['flex items-center gap-2 px-4 py-2 rounded-lg transition-all text-sm font-medium', activeTab === 'canvas' ? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50']"
+                  :class="['flex items-center gap-2 px-4 py-2 rounded-lg transition-all text-sm font-medium', activeTab === 'canvas' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50']"
                 >
                   <i class="fas fa-th"></i>
                   <span>Canvas</span>
                 </button>
                 <button
                   @click="activeTab = 'preview'"
-                  :class="['flex items-center gap-2 px-4 py-2 rounded-lg transition-all text-sm font-medium', activeTab === 'preview' ? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50']"
+                  :class="['flex items-center gap-2 px-4 py-2 rounded-lg transition-all text-sm font-medium', activeTab === 'preview' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50']"
                   data-rybbit-event="preview-animation"
                 >
                   <i class="fas fa-play"></i>
@@ -304,7 +304,7 @@
           <p class="text-gray-600 dark:text-gray-300 mb-6">We'd love to hear your thoughts about the Spritesheet generator. Would you like to share your feedback?</p>
           <div class="flex gap-3 justify-center">
             <button @click="handleFeedbackPopupResponse(false)" class="px-4 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors cursor-pointer">Maybe later</button>
-            <button @click="handleFeedbackPopupResponse(true)" class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors cursor-pointer">Share feedback</button>
+            <button @click="handleFeedbackPopupResponse(true)" class="px-6 py-2 bg-gray-700 hover:bg-gray-800 text-white font-medium rounded-lg transition-colors cursor-pointer">Share feedback</button>
           </div>
         </div>
       </div>