From 51c7a2fc689ecd788787250872ef88cc81594f1b Mon Sep 17 00:00:00 2001
From: enzo <7831008+enzok@users.noreply.github.com>
Date: Mon, 2 Feb 2026 11:25:35 -0500
Subject: [PATCH] Proerly fix behavior buttons (#2890)

---
 web/static/css/style.css                      | 265 ++++++++----------
 .../analysis/behavior/_processes.html         |  30 +-
 2 files changed, 135 insertions(+), 160 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index 4205728e557..e4919d45ace 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -21,8 +21,7 @@ body {
 }
 
 a {
-    color: #5ebcf3;
-    text-decoration: none;
+    color: white
 }
 
 .navbar-collapse.in {
@@ -51,71 +50,7 @@ element.style {
 }
 
 a:hover {
-    color: #EE1B2F;
-    text-decoration: underline;
-}
-
-.btn-primary {
-    background-color: #325d88 !important;
-    border-color: #325d88 !important;
-    color: #fff !important;
-}
-
-.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
-    background-color: #264768 !important;
-    border-color: #264768 !important;
-}
-
-.btn-info {
-    background-color: #29aba1 !important;
-    border-color: #29aba1 !important;
-    color: #fff !important;
-}
-
-.btn-info:hover, .btn-info:focus, .btn-info:active {
-    background-color: #1f8179 !important;
-    border-color: #1f8179 !important;
-}
-
-.btn-outline-info {
-    color: #29aba1 !important;
-    border-color: #29aba1 !important;
-}
-
-.btn-outline-info:hover {
-    background-color: #29aba1 !important;
-    border-color: #29aba1 !important;
-    color: #fff !important;
-}
-
-.text-info {
-    color: #4dd0e1 !important;
-}
-
-.bg-primary {
-    background-color: #325d88 !important;
-}
-
-.text-primary {
-    color: #5ebcf3 !important;
-}
-
-.bg-info {
-    background-color: #29aba1 !important;
-}
-
-.badge.bg-primary, .badge.bg-danger, .badge.bg-success {
-    color: #fff !important;
-}
-
-.badge.bg-warning, .badge.bg-info {
-    color: #000 !important;
-}
-
-a.badge:hover, .badge a:hover {
-    color: inherit !important;
-    text-decoration: none;
-    opacity: 0.8;
+    color: #EE1B2F
 }
 
 .btn-link {
@@ -300,11 +235,6 @@ pre {
     cursor: pointer;
 }
 
-.form-control {
-    background-color: darkgray;
-    color:black;
-}
-
 /* Windows API categories */
 .filesystem {
     background-color: #ffe3c5;
@@ -405,39 +335,98 @@ pre {
     color: black;
 }
 
-.btn-cat-filesystem { background-color: #ffe3c5 !important; color: black; border-color: #ffe3c5; }
-.btn-cat-filesystem:hover { color: black; }
-.btn-cat-registry { background-color: #ffc5c5 !important; color: black; border-color: #ffc5c5; }
-.btn-cat-registry:hover { color: black; }
-.btn-cat-process { background-color: #c5e0ff !important; color: black; border-color: #c5e0ff; }
-.btn-cat-process:hover { color: black; }
-.btn-cat-threading { background-color: #d3e0ff !important; color: black; border-color: #d3e0ff; }
-.btn-cat-threading:hover { color: black; }
-.btn-cat-services { background-color: #ccc5ff !important; color: black; border-color: #ccc5ff; }
-.btn-cat-services:hover { color: black; }
-.btn-cat-device { background-color: #d3c5cc !important; color: black; border-color: #d3c5cc; }
-.btn-cat-device:hover { color: black; }
-.btn-cat-network { background-color: #d3ffc5 !important; color: black; border-color: #d3ffc5; }
-.btn-cat-network:hover { color: black; }
-.btn-cat-socket { background-color: #d3ffc5 !important; color: black; border-color: #d3ffc5; }
-.btn-cat-socket:hover { color: black; }
-.btn-cat-synchronization { background-color: #f9c5ff !important; color: black; border-color: #f9c5ff; }
-.btn-cat-synchronization:hover { color: black; }
-.btn-cat-browser { background-color: #dfffdf !important; color: black; border-color: #dfffdf; }
-.btn-cat-browser:hover { color: black; }
-.btn-cat-crypto { background-color: #f0f2c5 !important; color: black; border-color: #f0f2c5; }
-.btn-cat-crypto:hover { color: black; }
-
-/* Remove default underline, add on hover (exclude buttons if needed) */
-a:not(.btn, [class*="btn"]) {
-    text-decoration: none !important;
-}
-a:not(.btn, [class*="btn"]):hover {
-    text-decoration: underline !important;
-}
-
-.bg-dark::placeholder {
-  color: rgba(255, 255, 255, 0.7);
+/* Category buttons (base colors) */
+.btn-cat-default            { background-color: #696969; color: #000; border-color: #696969; }
+.btn-cat-filesystem         { background-color: #ffe3c5; color: #000; border-color: #ffe3c5; }
+.btn-cat-registry           { background-color: #ffc5c5; color: #000; border-color: #ffc5c5; }
+.btn-cat-process            { background-color: #c5e0ff; color: #000; border-color: #c5e0ff; }
+.btn-cat-threading          { background-color: #d3e0ff; color: #000; border-color: #d3e0ff; }
+.btn-cat-services           { background-color: #ccc5ff; color: #000; border-color: #ccc5ff; }
+.btn-cat-device             { background-color: #d3c5cc; color: #000; border-color: #d3c5cc; }
+.btn-cat-network            { background-color: #d3ffc5; color: #000; border-color: #d3ffc5; }
+.btn-cat-socket             { background-color: #d3ffc5; color: #000; border-color: #d3ffc5; }
+.btn-cat-synchronization    { background-color: #f9c5ff; color: #000; border-color: #f9c5ff; }
+.btn-cat-browser            { background-color: #dfffdf; color: #000; border-color: #dfffdf; }
+.btn-cat-crypto             { background-color: #f0f2c5; color: #000; border-color: #f0f2c5; }
+.btn-cat-all                { background-color: #198754; color: #000; border-color: #198754; }
+
+/* Hover + selected */
+.btn-cat-default.active,
+.btn-cat-default:active,
+.show > .btn-cat-default.dropdown-toggle {
+    border-color: #696969;
+}
+
+.btn-cat-filesystem.active,
+.btn-cat-filesystem:active,
+.show > .btn-cat-filesystem.dropdown-toggle {
+    border-color: #ffe3c5;
+}
+
+.btn-cat-registry.active,
+.btn-cat-registry:active,
+.show > .btn-cat-registry.dropdown-toggle {
+    border-color: #ffc5c5;
+}
+
+.btn-cat-process.active,
+.btn-cat-process:active,
+.show > .btn-cat-process.dropdown-toggle {
+    border-color: #c5e0ff;
+}
+
+.btn-cat-threading.active,
+.btn-cat-threading:active,
+.show > .btn-cat-threading.dropdown-toggle {
+    border-color: #d3e0ff;
+}
+
+.btn-cat-services.active,
+.btn-cat-services:active,
+.show > .btn-cat-services.dropdown-toggle {
+    border-color: #ccc5ff;
+}
+
+.btn-cat-device.active,
+.btn-cat-device:active,
+.show > .btn-cat-device.dropdown-toggle {
+    border-color: #dcd1d6;
+}
+
+.btn-cat-network.active,
+.btn-cat-network:active,
+.show > .btn-cat-network.dropdown-toggle {
+    border-color: #dcffd1;
+}
+
+.btn-cat-socket.active,
+.btn-cat-socket:active,
+.show > .btn-cat-socket.dropdown-toggle {
+    border-color: #dcffd1;
+}
+
+.btn-cat-synchronization.active,
+.btn-cat-synchronization:active,
+.show > .btn-cat-synchronization.dropdown-toggle {
+    border-color: #fad1ff;
+}
+
+.btn-cat-browser.active,
+.btn-cat-browser:active,
+.show > .btn-cat-browser.dropdown-toggle {
+    border-color: #e5ffe5;
+}
+
+.btn-cat-crypto.active,
+.btn-cat-crypto:active,
+.show > .btn-cat-crypto.dropdown-toggle {
+    border-color: #f3f5d1;
+}
+
+.btn-cat-all.active,
+.btn-cat-all:active,
+.show > .btn-cat-all.dropdown-toggle {
+    border-color: #479f76;
 }
 
 /* Make category background apply to table cells in BS5 */
@@ -489,64 +478,34 @@ a:not(.btn, [class*="btn"]):hover {
   color: inherit;            /* inherit the TR text color */
 }
 
-/* Dark-theme file input (Bootstrap 5) */
-.form-control[type="file"]{
-  background-color: #212529;                 /* bg-dark */
-  color: rgba(255,255,255,.85);              /* readable on dark */
-  border: 1px solid #6c757d;                 /* border-secondary */
-}
-
-/* Placeholder-ish text (some browsers show filename text differently) */
-.form-control[type="file"]::placeholder{
-  color: rgba(255,255,255,.6);
-}
-
-/* The “Browse” button part */
-.form-control[type="file"]::file-selector-button{
-  background-color: #343a40;                 /* dark button */
-  color: rgba(255,255,255,.9);
-  border: 0;
-  border-right: 1px solid #6c757d;           /* border-secondary */
-  padding: .375rem .75rem;
-  margin-right: .75rem;                      /* spacing before filename */
-}
-
 /* Hover/focus states */
 .form-control[type="file"]::file-selector-button:hover{
   background-color: #3f474e;
 }
 
-.form-control[type="file"]:focus{
-  border-color: #adb5bd;                     /* slightly brighter */
-  box-shadow: 0 0 0 .25rem rgba(108,117,125,.25);
+/* Mid-gray form controls for Darkly */
+:root {
+  --form-bg: #5c5c5c;                 /* ← adjust here (try #4f4f4f to #5c5c5c) */
+  --form-border: #666;
+  --form-text: #fff;
+  --form-placeholder: rgba(255,255,255,.55);
 }
 
-/* Fix green highlight on search box focus */
-.form-control:focus {
-    border-color: #5ebcf3;
-    box-shadow: 0 0 0 0.2rem rgba(94, 188, 243, 0.25);
+.form-control,
+.form-select {
+  background-color: var(--form-bg) !important;
+  color: var(--form-text) !important;
+  border-color: var(--form-border) !important;
 }
 
-/* Disabled */
-.form-control[type="file"]:disabled{
-  background-color: #1c1f23;
-  color: rgba(255,255,255,.5);
-}
-.form-control[type="file"]:disabled::file-selector-button{
-  background-color: #2b3035;
-  color: rgba(255,255,255,.5);
-}
-
-.bg-dark .form-check-label {
-  color: #fff;
+.form-control::placeholder {
+  color: var(--form-placeholder) !important;
 }
 
-.bg-dark .form-check-input {
-  background-color: #212529;
-  border-color: #6c757d;
+.form-control:focus,
+.form-select:focus {
+  background-color: var(--form-bg) !important;
+  border-color: #007ABCFF !important;        /* Darkly success color */
+  box-shadow: 0 0 0 .25rem rgba(0, 38, 60, 0.25);
 }
 
-.bg-dark .form-check-input:checked {
-  background-color: #0d6efd;
-  border-color: #0d6efd;
-}
diff --git a/web/templates/analysis/behavior/_processes.html b/web/templates/analysis/behavior/_processes.html
index e4133b77e38..68bb55a460f 100644
--- a/web/templates/analysis/behavior/_processes.html
+++ b/web/templates/analysis/behavior/_processes.html
@@ -24,7 +24,7 @@
             out += "<li class=\"page-item" + alert_current_page(pages, page) + "><a class=\"page-link bg-dark border-secondary text-white\" href=\"#\">" + pages + "</a></li>";
         return out;
     }
-    // ... existing js functions ...
+
     function load_chunk(pid, pagenum, callback) {
         $("#process_" + pid + " div.calltable").load("/analysis/chunk/{{id}}/" + pid + "/" + pagenum + "/", function (data, status, xhr) {
             if (status == "error") {
@@ -42,8 +42,8 @@
 
         $("#top_pagination").removeClass("d-none");
         $("#bottom_pagination").removeClass("d-none");
-        $(".badge-filter").removeClass("badge-light text-dark").addClass("badge-dark");
-        $("#badge_default_" + pid).removeClass("badge-dark").addClass("badge-light text-dark");
+        $(".badge-filter").removeClass("active");
+        $("#badge_default_" + pid).addClass("active");
     }
 
     function show_tab(id, callback) {
@@ -91,9 +91,18 @@
 
         $("#top_pagination").addClass("d-none");
         $("#bottom_pagination").addClass("d-none");
-        $(".badge-filter").removeClass("badge-light text-dark").addClass("badge-dark");
-        $("#badge_" + category + "_" + pid).removeClass("badge-dark").addClass("badge-light text-dark");
+        $(".badge-filter").removeClass("active");
+        $("#badge_" + category + "_" + pid).addClass("active");
     }
+
+    $(function () {
+    var $default = $(".badge-filter[id^='badge_default_']").first();
+    if (!$default.length) return;
+    var m = $default.attr("id").match(/^badge_default_(\d+)$/);
+    if (!m) return;
+    var pid = m[1];
+    load_chunk(pid, 1);
+    });
 </script>
 
 <div class="card bg-dark border-secondary">
@@ -137,7 +146,7 @@ <h5 class="alert-heading fw-bold">{{process.process_name}}</h5>
                 <div class="row mb-4 align-items-center justify-content-center">
                     <div class="col-12 text-center">
                         <div class="btn-group flex-wrap mb-3" role="group">
-                            <button id="badge_default_{{process.process_id}}" type="button" class="btn btn-outline-light badge-filter active">Default</button>
+                            <button id="badge_default_{{process.process_id}}" type="button" class="btn btn-cat-default badge-filter">Default</button>
                             <button id="badge_registry_{{process.process_id}}" type="button" class="btn btn-cat-registry badge-filter">Registry</button>
                             <button id="badge_filesystem_{{process.process_id}}" type="button" class="btn btn-cat-filesystem badge-filter">Filesystem</button>
                             <button id="badge_network_{{process.process_id}}" type="button" class="btn btn-cat-network badge-filter">Network</button>
@@ -148,7 +157,7 @@ <h5 class="alert-heading fw-bold">{{process.process_name}}</h5>
                             <button id="badge_crypto_{{process.process_id}}" type="button" class="btn btn-cat-crypto badge-filter">Crypto</button>
                             <button id="badge_browser_{{process.process_id}}" type="button" class="btn btn-cat-browser badge-filter">Browser</button>
                             <button id="badge_device_{{process.process_id}}" type="button" class="btn btn-cat-device badge-filter">Device</button>
-                            <button id="badge_all_{{process.process_id}}" type="button" class="btn btn-success badge-filter">All</button>
+                            <button id="badge_all_{{process.process_id}}" type="button" class="btn btn-cat-all badge-filter">All</button>
                         </div>
 
                         <div class="input-group mb-3 w-50 mx-auto">
@@ -218,6 +227,13 @@ <h5 class="alert-heading fw-bold">{{process.process_name}}</h5>
                     $("#search_button_{{process.process_id}}").click(function() {
                         load_filtered_chunk({{process.process_id}}, "all", "null", 0);
                     });
+
+                    $(function () {
+                        var $btn = $(".badge-filter[id^='badge_default_']").first();
+                        if ($btn.length) {
+                            $btn.trigger("click");
+                        }
+                    });
                 });
                 </script>