Update: changed JS to new theme system + Darkmode system

src/main/resources/static/js/darkmode.js

@@ -8,7 +8,6 @@ var elements = {
   darkModeIcon: null,
   searchBar: null,
   formControls: null,
-  navbar: null,
   navIcons: null,
   navDropdownMenus: null,
 };
@@ -20,8 +19,6 @@ function getElements() {
   elements.darkModeIcon = document.getElementById("dark-mode-icon");
   elements.searchBar = document.getElementById("searchBar");
   elements.formControls = document.querySelectorAll(".form-control");
-  elements.navbar = document.querySelectorAll("nav.navbar");
-  elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon");
   elements.navDropdownMenus = document.querySelectorAll(".dropdown-menu");
 }
 function setMode(mode) {
@@ -42,64 +39,20 @@ function setMode(mode) {
 
   if (mode === "on") {
     if (elements && elements.darkModeIcon) {
-      elements.darkModeIcon.src = "moon.svg";
+      elements.darkModeIcon.textContent = "dark_mode";
-    }
-    if (elements && elements.searchBar) {
-      elements.searchBar.classList.add("dark-mode-search");
-    }
-    if (elements && elements.formControls) {
-      elements.formControls.forEach((input) => input.classList.add("bg-dark", "text-white"));
-    }
-    if (elements && elements.navbar) {
-      elements.navbar.forEach((navElement) => {
-        navElement.classList.remove("navbar-light", "bg-light");
-        navElement.classList.add("navbar-dark", "bg-dark");
-      });
-    }
-    if (elements && elements.navDropdownMenus) {
-      elements.navDropdownMenus.forEach((menu) => menu.classList.add("dropdown-menu-dark"));
-    }
-    if (elements && elements.navIcons) {
-      elements.navIcons.forEach((icon) => (icon.style.filter = "invert(1)"));
     }
     var tables = document.querySelectorAll(".table");
     tables.forEach((table) => {
       table.classList.add("table-dark");
     });
-    if (jumbotron) {
-      jumbotron.classList.add("bg-dark");
-      jumbotron.classList.remove("bg-light");
-    }
   } else if (mode === "off") {
     if (elements && elements.darkModeIcon) {
-      elements.darkModeIcon.src = "sun.svg";
+      elements.darkModeIcon.textContent = "light_mode";
-    }
-    if (elements && elements.searchBar) {
-      elements.searchBar.classList.remove("dark-mode-search");
-    }
-    if (elements && elements.formControls) {
-      elements.formControls.forEach((input) => input.classList.remove("bg-dark", "text-white"));
-    }
-    if (elements && elements.navbar) {
-      elements.navbar.forEach((navElement) => {
-        navElement.classList.remove("navbar-dark", "bg-dark");
-        navElement.classList.add("navbar-light", "bg-light");
-      });
-    }
-    if (elements && elements.navDropdownMenus) {
-      elements.navDropdownMenus.forEach((menu) => menu.classList.remove("dropdown-menu-dark"));
-    }
-    if (elements && elements.navIcons) {
-      elements.navIcons.forEach((icon) => (icon.style.filter = "none"));
     }
     var tables = document.querySelectorAll(".table-dark");
     tables.forEach((table) => {
       table.classList.remove("table-dark");
     });
-    if (jumbotron) {
-      jumbotron.classList.remove("bg-dark");
-      jumbotron.classList.add("bg-light");
-    }
   } else if (mode === "rainbow") {
     if (elements && elements.darkModeIcon) {
       elements.darkModeIcon.src = "rainbow.svg";

src/main/resources/static/js/homecard.js

@@ -23,15 +23,17 @@ function filterCards() {
 }
 
 function toggleFavorite(element) {
-  var img = element.querySelector("img");
+  var span = element.querySelector("span.material-symbols-rounded");
   var card = element.closest(".feature-card");
   var cardId = card.id;
-  if (img.src.endsWith("star.svg")) {
+  if (span.classList.contains("no-fill")) {
-    img.src = "images/star-fill.svg";
+    span.classList.remove("no-fill");
+    span.classList.add("fill");
     card.classList.add("favorite");
     localStorage.setItem(cardId, "favorite");
   } else {
-    img.src = "images/star.svg";
+    span.classList.remove("fill");
+    span.classList.add("no-fill");
     card.classList.remove("favorite");
     localStorage.removeItem(cardId);
   }
@@ -40,6 +42,7 @@ function toggleFavorite(element) {
   filterCards();
 }
 
+
 function reorderCards() {
   var container = document.querySelector(".features-container");
   var cards = Array.from(container.getElementsByClassName("feature-card"));
@@ -58,13 +61,15 @@ function reorderCards() {
     container.appendChild(card);
   });
 }
+
 function initializeCards() {
   var cards = document.querySelectorAll(".feature-card");
   cards.forEach(function (card) {
     var cardId = card.id;
-    var img = card.querySelector(".favorite-icon img");
+    var span = card.querySelector(".favorite-icon span.material-symbols-rounded");
     if (localStorage.getItem(cardId) === "favorite") {
-      img.src = "images/star-fill.svg";
+      span.classList.remove("no-fill");
+      span.classList.add("fill");
       card.classList.add("favorite");
     }
   });

src/main/resources/static/js/multitool/PdfActionsManager.js

@@ -92,44 +92,35 @@ class PdfActionsManager {
     const rightDirection = this.pageDirection === "rtl" ? "left" : "right";
     const buttonContainer = document.createElement("div");
 
-    buttonContainer.classList.add("pdf-actions_button-container", "hide-on-drag");
+    buttonContainer.classList.add("btn-group", "pdf-actions_button-container", "hide-on-drag");
 
     const moveUp = document.createElement("button");
     moveUp.classList.add("pdf-actions_move-left-button", "btn", "btn-secondary");
-    moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
+    moveUp.innerHTML = `<span class="material-symbols-rounded">arrow_${leftDirection}_alt</span>`;
     moveUp.onclick = this.moveUpButtonCallback;
     buttonContainer.appendChild(moveUp);
 
     const moveDown = document.createElement("button");
     moveDown.classList.add("pdf-actions_move-right-button", "btn", "btn-secondary");
-    moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
+    moveDown.innerHTML = `<span class="material-symbols-rounded">arrow_${rightDirection}_alt</span>`;
     moveDown.onclick = this.moveDownButtonCallback;
     buttonContainer.appendChild(moveDown);
 
     const rotateCCW = document.createElement("button");
     rotateCCW.classList.add("btn", "btn-secondary");
-    rotateCCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+    rotateCCW.innerHTML = `<span class="material-symbols-rounded">rotate_left</span>`;
-                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
-                            <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
-                        </svg>`;
     rotateCCW.onclick = this.rotateCCWButtonCallback;
     buttonContainer.appendChild(rotateCCW);
 
     const rotateCW = document.createElement("button");
     rotateCW.classList.add("btn", "btn-secondary");
-    rotateCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+    rotateCW.innerHTML = `<span class="material-symbols-rounded">rotate_right</span>`;
-                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
-                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
-                        </svg>`;
     rotateCW.onclick = this.rotateCWButtonCallback;
     buttonContainer.appendChild(rotateCW);
 
     const deletePage = document.createElement("button");
     deletePage.classList.add("btn", "btn-danger");
-    deletePage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+    deletePage.innerHTML = `<span class="material-symbols-rounded">delete</span>`;
-                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
-                            <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
-                        </svg>`;
     deletePage.onclick = this.deletePageButtonCallback;
     buttonContainer.appendChild(deletePage);
 
@@ -145,10 +136,7 @@ class PdfActionsManager {
 
     const insertFileButton = document.createElement("button");
     insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
-    insertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
+    insertFileButton.innerHTML = `<span class="material-symbols-rounded">add</span>`;
-                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
-                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                            </svg>`;
     insertFileButton.onclick = this.insertFileButtonCallback;
     insertFileButtonContainer.appendChild(insertFileButton);
 
@@ -164,10 +152,7 @@ class PdfActionsManager {
 
     const insertFileButtonRight = document.createElement("button");
     insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
-    insertFileButtonRight.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
+    insertFileButtonRight.innerHTML = `<span class="material-symbols-rounded">add</span>`;
-                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
-                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                                insertFileButtonRight</svg>`;
     insertFileButtonRight.onclick = () => addPdfs();
     insertFileButtonRightContainer.appendChild(insertFileButtonRight);
 

src/main/resources/static/js/pipeline.js

@@ -251,14 +251,14 @@ document.getElementById("addOperationBtn").addEventListener("click", function ()
       <div class="d-flex justify-content-between align-items-center w-100">
           <div class="operationName">${selectedOperation}</div>
           <div class="arrows d-flex">
-              <button class="btn btn-secondary move-up ms-1"><span>&uarr;</span></button>
+              <button class="btn btn-secondary move-up ms-1"><span class="material-symbols-rounded">arrow_upward</span></button>
-              <button class="btn btn-secondary move-down ms-1"><span>&darr;</span></button>
+              <button class="btn btn-secondary move-down ms-1"><span class="material-symbols-rounded">arrow_downward</span></button>
               <button class="btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1" ${
                 hasSettings ? "" : "disabled"
               }>
-              <span style="color: ${hasSettings ? "white" : "grey"};">⚙️</span>
+              <span class="material-symbols-rounded">settings</span>
           </button>
-              <button class="btn btn-danger remove ms-1"><span>X</span></button>
+              <button class="btn btn-danger remove ms-1"><span class="material-symbols-rounded">close</span></button>
           </div>
       </div>
   `;