[FEAT] Moved buttons for more space

src/App.vue

@@ -7,46 +7,46 @@
             <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 />
+          <nav class="flex flex-wrap items-center justify-center gap-2">
+            <a
+              href="https://gitea.adhd.sh/root/spritesheet-generator"
+              target="_blank"
+              class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
+              data-rybbit-event="source-link"
+            >
+              <i class="fab fa-github"></i>
+              <span class="font-medium">Source</span>
+            </a>
+            <a
+              href="https://discord.gg/JTev3nzeDa"
+              target="_blank"
+              class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
+              data-rybbit-event="discord-link"
+            >
+              <i class="fab fa-discord"></i>
+              <span class="font-medium">Discord</span>
+            </a>
+            <a
+              href="#"
+              @click.prevent="openHelpModal"
+              class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
+              data-rybbit-event="help-link"
+            >
+              <i class="fas fa-question-circle"></i>
+              <span class="font-medium">Help</span>
+            </a>
+            <a
+              href="#"
+              @click.prevent="openFeedbackModal"
+              class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
+              data-rybbit-event="feedback-link"
+            >
+              <i class="fas fa-comment-dots"></i>
+              <span class="font-medium">Feedback</span>
+            </a>
+            <dark-mode-toggle />
+          </nav>
         </div>
-        <nav class="flex flex-wrap items-center justify-center sm:justify-start gap-2 sm:gap-3">
-          <a
-            href="https://gitea.adhd.sh/root/spritesheet-generator"
-            target="_blank"
-            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
-            data-rybbit-event="source-link"
-          >
-            <i class="fab fa-github"></i>
-            <span class="font-medium">Source</span>
-          </a>
-          <a
-            href="https://discord.gg/JTev3nzeDa"
-            target="_blank"
-            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
-            data-rybbit-event="discord-link"
-          >
-            <i class="fab fa-discord"></i>
-            <span class="font-medium">Discord</span>
-          </a>
-          <a
-            href="#"
-            @click.prevent="openHelpModal"
-            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
-            data-rybbit-event="help-link"
-          >
-            <i class="fas fa-question-circle"></i>
-            <span class="font-medium">Help</span>
-          </a>
-          <a
-            href="#"
-            @click.prevent="openFeedbackModal"
-            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
-            data-rybbit-event="feedback-link"
-          >
-            <i class="fas fa-comment-dots"></i>
-            <span class="font-medium">Feedback</span>
-          </a>
-        </nav>
       </header>
 
       <main class="flex flex-col flex-1 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 lg:overflow-hidden transition-all duration-300">

src/components/utilities/DarkModeToggle.vue

@@ -1,14 +1,11 @@
 <template>
   <button
     @click="settingsStore.toggleDarkMode()"
-    class="relative p-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl group"
+    class="inline-flex items-center gap-2 px-8 py-3 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
-    :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"
   >
-    <div class="relative w-6 h-6 flex items-center justify-center">
+    <i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
-      <i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'" class="text-xl transition-all duration-300 group-hover:scale-110"></i>
-    </div>
   </button>
 </template>