enhance core template UX and UI

* add a missing line break for blacklist core template
* add style for send upload btn
* update utils Ping class to disabled action btn while fetching to avoid flood

src/common/core/blacklist/ui/template.html

@@ -28,7 +28,7 @@
   {% endif %}
 
   {% if pre_render.get("status", False) and pre_render.get("status", False) == "ok" and pre_render.get("data") and "error" not in pre_render.get("data", {})  %}
-
+  <div class="core-layout-separator"></div>
 
             {% for key, value in pre_render.get("data", {}).items() %}
 

src/ui/static/js/plugins/utils.js

@@ -1,11 +1,13 @@
 class Ping {
   constructor(
     url = `${location.origin}${location.pathname}`,
-    statusTextEl = null,
-    statusColorEl = null,
-    key_to_check = "ping",
+    btnEl = null, // disabled while fethching
+    statusTextEl = null, // update text with fetching result
+    statusColorEl = null, // update color with fetching result
+    key_to_check = "ping", // key to check in response data
   ) {
     this.url = url;
+    this.btnEl = btnEl;
     this.statusColorEl = statusColorEl;
     this.statusTextEl = statusTextEl;
     this.key_to_check = key_to_check;
@@ -165,8 +167,14 @@ class Ping {
 
     this.alertEl.classList.remove("hidden");
 
-    if (type !== "fetch")
+    if (type === "fetch") {
+      this.btnEl.setAttribute("disabled", "disabled");
+    }
+
+    if (type !== "fetch") {
+      this.btnEl.removeAttribute("disabled");
       setTimeout(() => this.alertEl.classList.add("hidden"), 5000);
+    }
   }
 
   getAlertType(type) {

src/ui/static/js/utils/settings.js

@@ -636,7 +636,7 @@ class FilterSettings {
       this.tabContainer.querySelector(
         "[data-tab-select-dropdown-btn] span",
       ).textContent = "No match";
-      // we want to close dropdown in case open previsouly
+      // we want to close dropdown in case open previously
       this.toggleDropdown(true, true, false);
       return;
     }

src/ui/styles.css

@@ -530,6 +530,10 @@
   @apply text-sm tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md disabled:cursor-not-allowed dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-700 dark:disabled:border-gray-700/0 disabled:hover:translate-y-0 disabled:hover:bg-gray-400 disabled:hover:border-gray-400/0 dark:disabled:hover:translate-y-0 dark:disabled:hover:bg-gray-700 dark:disabled:hover:border-gray-700/0;
 }
 
+.core-card-upload-btn {
+  @apply w-fit disabled:hover:translate-y-0 disabled:cursor-not-allowed disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 tracking-wide dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md;
+}
+
 .core-card-test-status-container {
   @apply mx-1 flex justify-center items-center;
 }

src/ui/tailwind.config.js

@@ -70,6 +70,7 @@ module.exports = {
     "text-yellow-500",
     "text-green-500",
     "text-red-500",
+    "text-sky-500",
   ],
 
   presets: [],