From 13b2463a81ded6a7c7a86e4439609b377178dcc9 Mon Sep 17 00:00:00 2001
From: Martin R <167065719+Martin-Raby@users.noreply.github.com>
Date: Wed, 11 Jun 2025 16:59:09 +0200
Subject: [PATCH] Fixes #2360 - Change in the jGrowl popup notification visual

* Change in the jGrow popup notification visual

- New CSS to change the style
- New JS to add the icon
---
 admin/themes/default/template/updates_ext.tpl | 28 +++++++
 admin/themes/default/theme.css                | 75 ++++++++++++++++++-
 2 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/admin/themes/default/template/updates_ext.tpl b/admin/themes/default/template/updates_ext.tpl
index 5c1b8dc32..a89aa0241 100644
--- a/admin/themes/default/template/updates_ext.tpl
+++ b/admin/themes/default/template/updates_ext.tpl
@@ -103,6 +103,34 @@ function updateExtension(type, id, revision) {
   });
 };
 
+const targetNode = document.getElementById("theAdminPage");
+
+const config = { attributes: false, childList: true, subtree: true };
+
+const callback = (mutationList, observer) => {
+  for (const mutation of mutationList) {
+    if (mutation.type === "childList") {
+      let popup = jQuery("#jGrowl").children();
+      for (let i = 0; i < popup.length; i++){
+        if ((jQuery(popup[i])).hasClass("success")){
+          if (! ((jQuery(popup[i]).children(":first")).hasClass("jGrowl-popup-icon icon-ok"))){
+            jQuery(popup[i]).prepend('<div class="jGrowl-popup-icon icon-ok"></div>')
+          }
+        };
+
+        if ((jQuery(popup[i])).hasClass("error")){
+          if (! ((jQuery(popup[i]).children(":first")).hasClass("jGrowl-popup-icon icon-cancel"))){
+            jQuery(popup[i]).prepend('<div class="jGrowl-popup-icon icon-cancel"></div>')
+          }
+        }
+      };
+    }
+  }
+};
+
+const observer = new MutationObserver(callback);
+observer.observe(targetNode, config);
+
 function ignoreExtension(type, id) {
   queuedManager.add({
     type: 'GET',
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index ef8a45fec..60fdb9198 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -2317,10 +2317,79 @@ h2:lang(en) { text-transform:capitalize; }
   border-left:4px solid #00529b;
 }
 
+.jGrowl-popup-icon{
+  position: absolute;
+  font-size: 4em;
+  left: -25px;
+}
+
 .success {
-  color: #6DCE5E;
-  background-color:#D6FFCF;
-  border-left:4px solid #6DCE5E;
+  color: #3C3C3C;
+}
+div.jGrowl div.jGrowl-notification.success{
+  background: none;
+  background-color: #D6FFCF;
+  opacity: 1;
+  text-align: left;
+  font-family: 'Open Sans'; 
+  box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.1);
+  margin-bottom: 1em;
+}
+div.success .jGrowl-popup-icon{
+  color: #4CA530;
+}
+
+.error{
+  color: #3C3C3C;
+}
+div.jGrowl div.jGrowl-notification.error{
+  background: none;
+  background-color: #FFC8C8;
+  opacity: 1;
+  text-align: left;
+  font-family: 'Open Sans';
+  box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.1);
+  margin-bottom: 1em;
+}
+div.error .jGrowl-popup-icon{
+  color: #BE4949;
+}
+
+div.jGrowl div.jGrowl-notification div.jGrowl-message {
+  font-size: 1.2em !important;
+  margin: 0% 0% 0% 28%;
+}
+div.jGrowl div.jGrowl-notification div.jGrowl-header {
+  font-size: 1.2em !important;
+	font-weight: 800 !important;
+  margin: 5% 0% 2% 28%;
+}
+div.success div.jGrowl-close, div.error div.jGrowl-close {
+	font-size: 2em !important;
+  font-weight: 1000 !important;
+  position: relative;
+  top: -7px;
+  right: 1px;
+}
+
+div.jGrowl div.jGrowl-closer {
+	visibility: hidden;
+}
+
+div.jGrowl div.jGrowl-notification{
+	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); 
+	zoom: 1;
+	width: 21vw;
+  height: 100%;
+	padding: 18%;
+	margin-top: 5px;
+	margin-bottom: 5px;
+	font-size: 1em;
+	
+	display: none;
+  border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
 }
 
 .metasync-success {