import fix

settings/index.css

@@ -248,8 +248,6 @@ h2 {
 
 .custom-themes-section {
   margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid var(--border-border, var(--text-teritary));
 }
 
 .custom-themes-header {
@@ -262,7 +260,13 @@ h2 {
   color: var(--text-primary);
 }
 
-.add-theme-btn {
+.custom-themes-buttons {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.theme-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -276,7 +280,7 @@ h2 {
   transition: all 0.2s ease;
 }
 
-.add-theme-btn:hover {
+.theme-btn:hover {
   background: var(--accent-accent);
   color: var(--button-secondaryFill);
 }

settings/index.html

@@ -55,9 +55,14 @@
           <div class="custom-themes-section">
             <div class="custom-themes-header">
               <span data-i18n="settings.custom_themes.title">Egyéni témák</span>
-              <button class="add-theme-btn" id="addCustomTheme">
-                <span class="material-icons-round">add</span>
-              </button>
+              <div class="custom-themes-buttons">
+                <button class="theme-btn" id="addCustomTheme" title="Új téma">
+                  <span class="material-icons-round">add</span>
+                </button>
+                <button class="theme-btn" id="importCustomTheme" title="Téma importálása">
+                  <span class="material-icons-round">download</span>
+                </button>
+              </div>
             </div>
             <div class="theme-grid custom-themes-grid" id="customThemesGrid">
             </div>
@@ -225,7 +230,7 @@
       </div>
       <div class="modal-body">
         <p data-i18n="settings.custom_themes.import_description">Illeszd be a téma kódot:</p>
-        <textarea id="importCode" placeholder="Illessze be a téma kódot ide..."></textarea>
+        <textarea id="importCode" placeholder="Illeszd be a téma kódját ide..."></textarea>
         <p class="error-message" id="importError"></p>
       </div>
       <div class="modal-footer">

settings/index.js

@@ -503,6 +503,10 @@ document.addEventListener("DOMContentLoaded", async () => {
   document.getElementById("cancelThemeEditor")?.addEventListener("click", closeThemeEditor);
   document.getElementById("saveTheme")?.addEventListener("click", saveThemeFromEditor);
   
+  document.getElementById("importCustomTheme")?.addEventListener("click", () => {
+    document.getElementById("importThemeModal").classList.add("active");
+  });
+  
   document.querySelectorAll(".mode-option").forEach(btn => {
     btn.addEventListener("click", () => {
       document.querySelectorAll(".mode-option").forEach(b => b.classList.remove("active"));
@@ -550,16 +554,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   document.getElementById("closeShareModalBtn")?.addEventListener("click", closeShareModal);
   document.getElementById("copyShareCode")?.addEventListener("click", copyShareCode);
 
-  let pressTimer;
-  const addBtn = document.getElementById("addCustomTheme");
-  addBtn?.addEventListener("mousedown", () => {
-    pressTimer = setTimeout(() => {
-      document.getElementById("importThemeModal").classList.add("active");
-    }, 500);
-  });
-  addBtn?.addEventListener("mouseup", () => clearTimeout(pressTimer));
-  addBtn?.addEventListener("mouseleave", () => clearTimeout(pressTimer));
-
   document.getElementById("closeImportModal")?.addEventListener("click", closeImportModal);
   document.getElementById("cancelImport")?.addEventListener("click", closeImportModal);
   document.getElementById("confirmImport")?.addEventListener("click", importTheme);

tools/createTemplate.js

@@ -41,7 +41,6 @@ const createTemplate = {
     const userAvatarSvg = `<svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`;
 
     const element = `
-      <!-- Desktop Header -->
       <header class="kreta-header">
         <div class="school-info">
           <p class="logo-text">
@@ -86,7 +85,6 @@ const createTemplate = {
         </div>
       </header>
 
-      <!-- Mobile Header (Top) -->
       <header class="mobile-header">
         <div class="school-info">
           <p class="logo-text">
@@ -99,7 +97,6 @@ const createTemplate = {
         </div>
       </header>
 
-      <!-- Mobile Bottom Navigation -->
       <nav class="mobile-bottom-nav">
         ${mobileNavItems}
         <button class="mobile-user-btn" id="mobileUserBtn">
@@ -110,7 +107,6 @@ const createTemplate = {
         </button>
       </nav>
 
-      <!-- Mobile User Dropdown -->
       <div class="mobile-user-dropdown" id="mobileUserDropdown">
         <div class="mobile-dropdown-header">
           <span class="user-name">${data.userData.name}</span>