From 71ceb49d755dc115e96d4e6e902fb9c4ef742e72 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 12 Aug 2022 18:06:08 +0200
Subject: [PATCH] Replace legacy icons

---
 .../templates/notificationSettings.tpl        | 18 +++++++-----
 .../Controller/User/Notification/Settings.ts  | 10 +++----
 .../Controller/User/Notification/Settings.js  |  9 +++---
 .../files/style/font-awesome/000-woltlab.scss |  1 +
 .../install/files/style/ui/notification.scss  | 28 ++++++++++++++++---
 5 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/com.woltlab.wcf/templates/notificationSettings.tpl b/com.woltlab.wcf/templates/notificationSettings.tpl
index 433e344f00..30357d5aef 100644
--- a/com.woltlab.wcf/templates/notificationSettings.tpl
+++ b/com.woltlab.wcf/templates/notificationSettings.tpl
@@ -29,19 +29,23 @@
 						<div class="notificationSettingsState">
 							<label>
 								<input type="checkbox" id="settings_{@$event->eventID}" name="settings[{@$event->eventID}][enabled]" class="jsCheckboxNotificationSettingsState" value="1" data-object-id="{@$event->eventID}"{if !$settings[$event->eventID][enabled]|empty} checked{/if}>
-								<span class="icon icon24 fa-bell green pointer"></span>
-								<span class="icon icon24 fa-bell-slash red pointer"></span>
+								{icon size=24 name='bell'}
+								{icon size=24 name='bell-slash'}
 							</label>
 						</div>
 						<div class="notificationSettingsEmail">
 							{if $event->supportsEmailNotification()}
 								<input type="hidden" id="settings_{$event->eventID}_mailNotificationType" name="settings[{@$event->eventID}][mailNotificationType]" value="{$settings[$event->eventID][mailNotificationType]}">
 								<a href="#" class="notificationSettingsEmailType jsTooltip{if $settings[$event->eventID][enabled]|empty} disabled{/if}" role="button" title="{lang}wcf.user.notification.mailNotificationType.{@$settings[$event->eventID][mailNotificationType]}{/lang}" data-object-id="{@$event->eventID}">
-									{if $settings[$event->eventID][mailNotificationType] === 'none'}
-										<span class="icon icon24 fa-times red jsIconNotificationSettingsEmailType"></span>
-									{else}
-										<span class="icon icon24 {if $settings[$event->eventID][mailNotificationType] === 'instant'}fa-flash{else}fa-clock-o{/if} green jsIconNotificationSettingsEmailType"></span>
-									{/if}
+									<span class="jsIconNotificationSettingsEmailType">
+										{if $settings[$event->eventID][mailNotificationType] === 'none'}
+											{icon size=24 name='xmark' type='solid'}
+										{else if $settings[$event->eventID][mailNotificationType] === 'instant'}
+											{icon size=24 name='bolt' type='solid'}
+										{else}
+											{icon size=24 name='clock'}
+										{/if}
+									</span>
 									{icon size=16 name='caret-down' type='solid'}
 								</a>
 							{/if}
diff --git a/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts b/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts
index 0867f88643..cf3c4f08ef 100644
--- a/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts
+++ b/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts
@@ -97,20 +97,18 @@ function setEmailType(event: Event): void {
   ) as HTMLLIElement;
   button.title = Language.get(`wcf.user.notification.mailNotificationType.${value}`);
 
-  const icon = button.querySelector(".jsIconNotificationSettingsEmailType") as HTMLSpanElement;
-  icon.classList.remove("fa-clock-o", "fa-flash", "fa-times", "green", "red");
-
+  const icon = button.querySelector(".jsIconNotificationSettingsEmailType fa-icon") as FaIcon;
   switch (value) {
     case "daily":
-      icon.classList.add("fa-clock-o", "green");
+      icon.setIcon("clock", false);
       break;
 
     case "instant":
-      icon.classList.add("fa-flash", "green");
+      icon.setIcon("bolt", true);
       break;
 
     case "none":
-      icon.classList.add("fa-times", "red");
+      icon.setIcon("xmark", true);
       break;
   }
 
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js
index 3f349bbd3d..0696d6c609 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js
@@ -81,17 +81,16 @@ define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dropdow
         getCurrentEmailTypeInputElement().value = value;
         const button = document.querySelector(`.notificationSettingsEmailType[data-object-id="${_objectId}"]`);
         button.title = Language.get(`wcf.user.notification.mailNotificationType.${value}`);
-        const icon = button.querySelector(".jsIconNotificationSettingsEmailType");
-        icon.classList.remove("fa-clock-o", "fa-flash", "fa-times", "green", "red");
+        const icon = button.querySelector(".jsIconNotificationSettingsEmailType fa-icon");
         switch (value) {
             case "daily":
-                icon.classList.add("fa-clock-o", "green");
+                icon.setIcon("clock", false);
                 break;
             case "instant":
-                icon.classList.add("fa-flash", "green");
+                icon.setIcon("bolt", true);
                 break;
             case "none":
-                icon.classList.add("fa-times", "red");
+                icon.setIcon("xmark", true);
                 break;
         }
         _objectId = 0;
diff --git a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
index 901ca243de..6b2ed6b044 100644
--- a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
+++ b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
@@ -37,6 +37,7 @@ fa-icon {
   display: inline-flex;
   height: var(--icon-size);
   justify-content: center;
+  pointer-events: none;
   width: calc(var(--icon-size) * 1.25);
 
   &:not(:upgraded) {
diff --git a/wcfsetup/install/files/style/ui/notification.scss b/wcfsetup/install/files/style/ui/notification.scss
index 0a74af9677..a5c5a665b3 100644
--- a/wcfsetup/install/files/style/ui/notification.scss
+++ b/wcfsetup/install/files/style/ui/notification.scss
@@ -34,8 +34,7 @@
 
 .notificationSettingsEvent:hover + .notificationSettingsState,
 .notificationSettingsState > label:hover {
-	.fa-bell,
-	.fa-bell-slash {
+	fa-icon {
 		transform: scale(1.2);
 	}
 }
@@ -54,6 +53,10 @@
 		margin: 0 10px;
 	}
 
+	label {
+		cursor: pointer;
+	}
+
 	input[type="checkbox"] {
 		opacity: 0;
 		position: absolute;
@@ -63,14 +66,22 @@
 			transform: scale(1.2);
 		}
 
-		&:not(:checked) + .fa-bell {
+		&:not(:checked) + fa-icon[name="bell"] {
 			display: none;
 		}
 
-		&:checked ~ .fa-bell-slash {
+		&:checked ~ fa-icon[name="bell-slash"] {
 			display: none;
 		}
 	}
+
+	fa-icon[name="bell"] {
+		color: rgba(0, 153, 0, 1);
+	}
+
+	fa-icon[name="bell-slash"] {
+		color: rgba(204, 0, 0, 1);
+	}
 }
 
 .notificationSettingsEmail {
@@ -87,4 +98,13 @@
 		filter: grayscale(1);
 		opacity: 0.75;
 	}
+
+	fa-icon[name="xmark"] {
+		color: rgba(204, 0, 0, 1);
+	}
+
+	fa-icon[name="bolt"],
+	fa-icon[name="clock"] {
+		color: rgba(0, 153, 0, 1);
+	}
 }
-- 
2.20.1