From 3ead15cdd10bafec585bd769efd587d52f03e023 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Diot?= <tdiot@bunkerity.com>
Date: Mon, 28 Oct 2024 14:22:08 +0100
Subject: [PATCH] Refactor toast styling and add border to feedback toast

---
 src/ui/app/static/js/pages/instances.js    |  7 ++++---
 src/ui/app/static/js/pages/services.js     |  1 -
 src/ui/app/static/js/pages/setup.js        | 12 ++++++------
 src/ui/app/static/js/plugins-settings.js   |  2 --
 src/ui/app/templates/instances.html        |  6 +++---
 src/ui/app/templates/service_settings.html |  6 +++---
 src/ui/app/templates/services.html         |  6 +++---
 src/ui/app/templates/setup.html            |  6 +++---
 8 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/ui/app/static/js/pages/instances.js b/src/ui/app/static/js/pages/instances.js
index 9693c11bf..216fb571f 100644
--- a/src/ui/app/static/js/pages/instances.js
+++ b/src/ui/app/static/js/pages/instances.js
@@ -31,8 +31,8 @@ $(document).ready(function () {
         data.failed.forEach((instance) => {
           var feedbackToastFailed = $("#feedback-toast").clone(); // Clone the feedback toast
           feedbackToastFailed.attr("id", `feedback-toast-${toastNum++}`); // Corrected to set the ID for the failed toast
-          feedbackToastFailed.removeClass("bg-primary text-white");
-          feedbackToastFailed.addClass("bg-danger text-white");
+          feedbackToastFailed.addClass("border-danger");
+          feedbackToastFailed.find(".toast-header").addClass("text-danger");
           feedbackToastFailed.find("span").text("Ping failed");
           feedbackToastFailed.find("div.toast-body").text(instance.message);
           feedbackToastFailed.appendTo("#feedback-toast-container"); // Ensure the toast is appended to the container
@@ -42,7 +42,8 @@ $(document).ready(function () {
         if (data.succeed.length > 0) {
           var feedbackToastSucceed = $("#feedback-toast").clone(); // Clone the feedback toast
           feedbackToastSucceed.attr("id", `feedback-toast-${toastNum++}`);
-          feedbackToastSucceed.addClass("bg-primary text-white");
+          feedbackToastSucceed.addClass("border-primary");
+          feedbackToastSucceed.find(".toast-header").addClass("text-primary");
           feedbackToastSucceed.find("span").text("Ping successful");
           feedbackToastSucceed
             .find("div.toast-body")
diff --git a/src/ui/app/static/js/pages/services.js b/src/ui/app/static/js/pages/services.js
index 60537905b..8db44b9ac 100644
--- a/src/ui/app/static/js/pages/services.js
+++ b/src/ui/app/static/js/pages/services.js
@@ -274,7 +274,6 @@ $(function () {
         const feedbackToast = $("#feedback-toast")
           .clone()
           .attr("id", `feedback-toast-${toastNum++}`)
-          .addClass("bg-primary text-white")
           .removeClass("d-none");
         feedbackToast.find("span").text("Conversion failed");
         feedbackToast
diff --git a/src/ui/app/static/js/pages/setup.js b/src/ui/app/static/js/pages/setup.js
index 0821e290e..d1909c933 100644
--- a/src/ui/app/static/js/pages/setup.js
+++ b/src/ui/app/static/js/pages/setup.js
@@ -173,8 +173,8 @@ $(document).ready(() => {
     feedbackToast.attr("id", `feedback-toast-${toastNum++}`); // Corrected to set the ID for the toast
     if (!isValid) {
       $feedback.text("Server name is not unique.");
-      feedbackToast.removeClass("bg-primary");
-      feedbackToast.addClass("bg-danger");
+      feedbackToast.addClass("border-danger");
+      feedbackToast.find(".toast-header").addClass("text-danger");
       feedbackToast.find("span").text("Server name is not unique.");
       feedbackToast
         .find("div.toast-body")
@@ -189,8 +189,8 @@ $(document).ready(() => {
           .toggleClass("bx-x text-danger", true);
     } else {
       $feedback.text("");
-      feedbackToast.removeClass("bg-danger");
-      feedbackToast.addClass("bg-primary");
+      feedbackToast.addClass("border-primary");
+      feedbackToast.find(".toast-header").addClass("text-primary");
       feedbackToast.find("span").text("Server name is unique.");
       feedbackToast
         .find("div.toast-body")
@@ -581,8 +581,8 @@ $(document).ready(() => {
         setTimeout(() => {
           const feedbackToast = $("#feedback-toast").clone(); // Clone the feedback toast
           feedbackToast.attr("id", `feedback-toast-${toastNum++}`); // Corrected to set the ID for the failed toast
-          feedbackToast.removeClass("bg-primary");
-          feedbackToast.addClass("bg-danger");
+          feedbackToast.addClass("border-danger");
+          feedbackToast.find(".toast-header").addClass("text-danger");
           feedbackToast.find("span").text("Error");
           feedbackToast
             .find("div.toast-body")
diff --git a/src/ui/app/static/js/plugins-settings.js b/src/ui/app/static/js/plugins-settings.js
index aba691c56..288c5f41a 100644
--- a/src/ui/app/static/js/plugins-settings.js
+++ b/src/ui/app/static/js/plugins-settings.js
@@ -1052,8 +1052,6 @@ $(document).ready(() => {
     if ($serviceMethodInput.val() === "autoconf") {
       const feedbackToast = $("#feedback-toast").clone(); // Clone the feedback toast
       feedbackToast.attr("id", `feedback-toast-${toastNum++}`); // Corrected to set the ID for the failed toast
-      feedbackToast.removeClass("bg-primary text-white");
-      feedbackToast.addClass("bg-primary text-white");
       feedbackToast.find("span").text("The service method is autoconf.");
       feedbackToast
         .find("div.toast-body")
diff --git a/src/ui/app/templates/instances.html b/src/ui/app/templates/instances.html
index dc01246fa..b2cee92da 100644
--- a/src/ui/app/templates/instances.html
+++ b/src/ui/app/templates/instances.html
@@ -141,13 +141,13 @@
         </table>
     </div>
     <div id="feedback-toast"
-         class="bs-toast toast fade"
+         class="bs-toast toast fade bg-white border"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-bs-autohide="true">
-        <div class="toast-header">
-            <i class="d-block w-px-20 h-auto rounded me-2 tf-icons bx bx-bell"></i>
+        <div class="toast-header d-flex align-items-center">
+            <i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
             <span class="fw-medium me-auto">BunkerWeb Forever</span>
             <small class="text-body-secondary">just now</small>
             <button type="button"
diff --git a/src/ui/app/templates/service_settings.html b/src/ui/app/templates/service_settings.html
index b8858e7e9..d26834b83 100644
--- a/src/ui/app/templates/service_settings.html
+++ b/src/ui/app/templates/service_settings.html
@@ -43,13 +43,13 @@
              role="tabpanel">{% include "models/plugins_settings_raw.html" %}</div>
     </div>
     <div id="feedback-toast"
-         class="bs-toast toast fade"
+         class="bs-toast toast fade bg-white border border-warning"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-bs-autohide="true">
-        <div class="toast-header">
-            <i class="d-block w-px-20 h-auto rounded me-2 tf-icons bx bx-bell"></i>
+        <div class="toast-header d-flex align-items-center text-warning">
+              <i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
             <span class="fw-medium me-auto">BunkerWeb Forever</span>
             <small class="text-body-secondary">just now</small>
             <button type="button"
diff --git a/src/ui/app/templates/services.html b/src/ui/app/templates/services.html
index d7c941f87..e42cb51b9 100644
--- a/src/ui/app/templates/services.html
+++ b/src/ui/app/templates/services.html
@@ -127,13 +127,13 @@
         </table>
     </div>
     <div id="feedback-toast"
-         class="bs-toast toast fade"
+         class="bs-toast toast fade bg-white border border-warning"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-bs-autohide="true">
-        <div class="toast-header">
-            <i class="d-block w-px-20 h-auto rounded me-2 tf-icons bx bx-bell"></i>
+        <div class="toast-header d-flex align-items-center text-warning">
+            <i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
             <span class="fw-medium me-auto">BunkerWeb Forever</span>
             <small class="text-body-secondary">just now</small>
             <button type="button"
diff --git a/src/ui/app/templates/setup.html b/src/ui/app/templates/setup.html
index 98625c5d4..aebd75a91 100644
--- a/src/ui/app/templates/setup.html
+++ b/src/ui/app/templates/setup.html
@@ -721,14 +721,14 @@
             </div>
         </div>
         <div id="feedback-toast"
-             class="bs-toast toast fade"
+             class="bs-toast toast fade bg-white border"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-bs-autohide="true"
              data-bs-delay="10000">
-            <div class="toast-header">
-                <i class="d-block w-px-20 h-auto rounded me-2 tf-icons bx bx-bell"></i>
+            <div class="toast-header d-flex align-items-center">
+                <i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
                 <span class="fw-medium me-auto">BunkerWeb Forever</span>
                 <small class="text-body-secondary">just now</small>
                 <button type="button"