From e937b9ddde6b474137855c82319bb5d8cb47d1ea Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 15 Aug 2022 20:17:20 +0200
Subject: [PATCH] Replace legacy icons

---
 .../Field/Devtools/Project/AbstractPackageList.ts    |  4 ++--
 .../Builder/Field/Devtools/Project/Instructions.ts   | 12 ++++++++----
 .../Core/Acp/Ui/Maintenance/RebuildData.ts           |  2 +-
 ts/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.ts  |  2 +-
 ts/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.ts         |  6 +++---
 .../Field/Devtools/Project/AbstractPackageList.js    |  4 ++--
 .../Builder/Field/Devtools/Project/Instructions.js   |  8 ++++++--
 .../Core/Acp/Ui/Maintenance/RebuildData.js           |  2 +-
 .../WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.js |  2 +-
 .../js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js     |  4 +++-
 10 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/AbstractPackageList.ts b/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/AbstractPackageList.ts
index d068933962..4fe85a897b 100644
--- a/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/AbstractPackageList.ts
+++ b/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/AbstractPackageList.ts
@@ -90,8 +90,8 @@ abstract class AbstractPackageList<TPackageData extends PackageData = PackageDat
     this.populateListItem(listItem, packageData);
 
     // add delete button
-    const deleteButton = document.createElement("span");
-    deleteButton.className = "icon icon16 fa-times pointer jsTooltip";
+    const deleteButton = document.createElement("button");
+    deleteButton.innerHTML = '<fa-icon size="16" name="xmark" solid></fa-icon>';
     deleteButton.title = Language.get("wcf.global.button.delete");
     deleteButton.addEventListener("click", (ev) => this.removePackage(ev));
     listItem.insertAdjacentElement("afterbegin", deleteButton);
diff --git a/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts b/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts
index 6d110b89ce..7118493fa7 100644
--- a/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts
+++ b/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts
@@ -204,12 +204,16 @@ class Instructions {
     content += `
         </div>
         <span class="statusDisplay sortableButtonContainer">
-          <span class="icon icon16 fa-pencil pointer jsTooltip" id="${
+          <button class="jsTooltip" id="${
             this.formFieldId
-          }_instruction${instructionId}_editButton" title="${Language.get("wcf.global.button.edit")}"></span>
-          <span class="icon icon16 fa-times pointer jsTooltip" id="${
+          }_instruction${instructionId}_editButton" title="${Language.get("wcf.global.button.edit")}">
+            <fa-icon size="16" name="pencil" solid></fa-icon>
+          </button>
+          <button class="jsTooltip" id="${
             this.formFieldId
-          }_instruction${instructionId}_deleteButton" title="${Language.get("wcf.global.button.delete")}"></span>
+          }_instruction${instructionId}_deleteButton" title="${Language.get("wcf.global.button.delete")}">
+            <fa-icon size="16" name="xmark" solid></fa-icon>
+          </span>
         </span>
       </div>
     `;
diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Maintenance/RebuildData.ts b/ts/WoltLabSuite/Core/Acp/Ui/Maintenance/RebuildData.ts
index 9137cfc45d..4b082284f9 100644
--- a/ts/WoltLabSuite/Core/Acp/Ui/Maintenance/RebuildData.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Maintenance/RebuildData.ts
@@ -60,7 +60,7 @@ async function runWorker(
         }
 
         span = document.createElement("span");
-        span.innerHTML = `<span class="icon icon16 fa-check green"></span> ${Language.get("wcf.acp.worker.success")}`;
+        span.innerHTML = `<fa-icon size="16" name="check" solid></fa-icon> ${Language.get("wcf.acp.worker.success")}`;
         button.parentNode!.insertBefore(span, button.nextElementSibling);
         resolve();
       },
diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.ts b/ts/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.ts
index 9031e3861c..22e30c5d1b 100644
--- a/ts/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.ts
@@ -123,7 +123,7 @@ class EmailSmtpTest implements AjaxCallbackObject {
     this.buttonRunTest.classList.remove("disabled");
 
     if (success) {
-      this.buttonRunTest.innerHTML = `<span class="icon icon16 fa-check green"></span> ${Language.get(
+      this.buttonRunTest.innerHTML = `<fa-icon size="16" name="check" solid></fa-icon> ${Language.get(
         "wcf.acp.email.smtp.test.run.success",
       )}`;
     } else {
diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.ts b/ts/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.ts
index b2378c3010..d53e6055e4 100644
--- a/ts/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.ts
@@ -43,9 +43,9 @@ class AcpUiPageBoxOrder {
 
         let icon = "";
         if (box.isDisabled) {
-          icon = ` <span class="icon icon16 fa-exclamation-triangle red jsTooltip" title="${Language.get(
-            "wcf.acp.box.isDisabled",
-          )}"></span>`;
+          icon = ` <span class="jsTooltip" title="${Language.get("wcf.acp.box.isDisabled")}">
+            <fa-icon size="16" name="triangle-exclamation" solid></fa-icon>
+          </span>`;
         }
 
         item.innerHTML = box.name + icon;
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/AbstractPackageList.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/AbstractPackageList.js
index 05a7136136..ecc44778ed 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/AbstractPackageList.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/AbstractPackageList.js
@@ -63,8 +63,8 @@ define(["require", "exports", "tslib", "../../../../../../Core", "../../../../..
             const listItem = document.createElement("li");
             this.populateListItem(listItem, packageData);
             // add delete button
-            const deleteButton = document.createElement("span");
-            deleteButton.className = "icon icon16 fa-times pointer jsTooltip";
+            const deleteButton = document.createElement("button");
+            deleteButton.innerHTML = '<fa-icon size="16" name="xmark" solid></fa-icon>';
             deleteButton.title = Language.get("wcf.global.button.delete");
             deleteButton.addEventListener("click", (ev) => this.removePackage(ev));
             listItem.insertAdjacentElement("afterbegin", deleteButton);
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.js
index 3353a79d19..392ccd3bf8 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.js
@@ -122,8 +122,12 @@ define(["require", "exports", "tslib", "../../../../../../Core", "../../../../..
             content += `
         </div>
         <span class="statusDisplay sortableButtonContainer">
-          <span class="icon icon16 fa-pencil pointer jsTooltip" id="${this.formFieldId}_instruction${instructionId}_editButton" title="${Language.get("wcf.global.button.edit")}"></span>
-          <span class="icon icon16 fa-times pointer jsTooltip" id="${this.formFieldId}_instruction${instructionId}_deleteButton" title="${Language.get("wcf.global.button.delete")}"></span>
+          <button class="jsTooltip" id="${this.formFieldId}_instruction${instructionId}_editButton" title="${Language.get("wcf.global.button.edit")}">
+            <fa-icon size="16" name="pencil" solid></fa-icon>
+          </button>
+          <button class="jsTooltip" id="${this.formFieldId}_instruction${instructionId}_deleteButton" title="${Language.get("wcf.global.button.delete")}">
+            <fa-icon size="16" name="xmark" solid></fa-icon>
+          </span>
         </span>
       </div>
     `;
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Maintenance/RebuildData.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Maintenance/RebuildData.js
index 2a8e46b497..bc59f03d71 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Maintenance/RebuildData.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Maintenance/RebuildData.js
@@ -52,7 +52,7 @@ define(["require", "exports", "tslib", "../Worker", "../../../Language"], functi
                         span.remove();
                     }
                     span = document.createElement("span");
-                    span.innerHTML = `<span class="icon icon16 fa-check green"></span> ${Language.get("wcf.acp.worker.success")}`;
+                    span.innerHTML = `<fa-icon size="16" name="check" solid></fa-icon> ${Language.get("wcf.acp.worker.success")}`;
                     button.parentNode.insertBefore(span, button.nextElementSibling);
                     resolve();
                 },
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.js
index 07e165ad11..9f8654b2be 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.js
@@ -96,7 +96,7 @@ define(["require", "exports", "tslib", "../../../Ajax", "../../../Dom/Util", "..
         resetButton(success, errorMessage) {
             this.buttonRunTest.classList.remove("disabled");
             if (success) {
-                this.buttonRunTest.innerHTML = `<span class="icon icon16 fa-check green"></span> ${Language.get("wcf.acp.email.smtp.test.run.success")}`;
+                this.buttonRunTest.innerHTML = `<fa-icon size="16" name="check" solid></fa-icon> ${Language.get("wcf.acp.email.smtp.test.run.success")}`;
             }
             else {
                 this.buttonRunTest.innerHTML = Language.get("wcf.acp.email.smtp.test.run");
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js
index 235cc55574..ac423ff1b8 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js
@@ -29,7 +29,9 @@ define(["require", "exports", "tslib", "../../../Ajax", "../../../Dom/Change/Lis
                     item.dataset.boxId = box.boxId.toString();
                     let icon = "";
                     if (box.isDisabled) {
-                        icon = ` <span class="icon icon16 fa-exclamation-triangle red jsTooltip" title="${Language.get("wcf.acp.box.isDisabled")}"></span>`;
+                        icon = ` <span class="jsTooltip" title="${Language.get("wcf.acp.box.isDisabled")}">
+            <fa-icon size="16" name="triangle-exclamation" solid></fa-icon>
+          </span>`;
                     }
                     item.innerHTML = box.name + icon;
                     container.appendChild(item);
-- 
2.20.1