Change pending pill color from grey to red

8Knot/assets/color.css

@@ -60,8 +60,8 @@
     --button-text-light: #fff9f9;
 
     /* MultiSelect pill colors */
-    --pill-default-bg: #555555;
-    --pill-default-color: #ffffff;
+    --pill-pending-bg: #B03A2E;
+    --pill-text-color: #ffffff;
 
     /* Table colors */
     --table-bg-dark: #222;
@@ -84,18 +84,18 @@
    The .searching class is toggled by a callback in index_callbacks.py
 
 
-/* Style for filter pills (grey by default when selected) */
+/* Style for filter pills (red by default when selected but search not executed) */
 
 .mantine-MultiSelect-pill,
 .mantine-MultiSelect-value {
-    background-color: var(--gray-medium);
-    color: var(--color-white);
+    background-color: var(--pill-pending-bg);
+    color: var(--pill-text-color);
 }
 
 .searchbar-dropdown .mantine-MultiSelect-pill,
 .searchbar-dropdown .mantine-MultiSelect-value {
-    background-color: var(--gray-medium);
-    color: var(--color-white);
+    background-color: var(--pill-pending-bg);
+    color: var(--pill-text-color);
 }
 
 

8Knot/pages/index/index_callbacks.py

@@ -1,4 +1,4 @@
 from datetime import datetime, timedelta
 import re
 import os
 import time
@@ -8,7 +8,7 @@
 import dash_bootstrap_components as dbc
 import dash
 from dash import callback, html
 from dash.dependencies import Input, Output, State, MATCH
 from app import augur
 from flask_login import current_user
 from cache_manager.cache_manager import CacheManager as cm
@@ -32,7 +32,7 @@
 from queries.repo_info_query import repo_info_query as riq
 from models import SearchItem
 import redis
 import flask
 from .search_utils import fuzzy_search
 from .search_utils import clean_repo_name
 
@@ -78,7 +78,7 @@
         # TODO: check how old groups are. If they're pretty old (threshold tbd) then requery
 
         # check if groups are not already cached, or if the refresh-button was pressed
         if not users_cache.exists(f"{user_id}_groups") or (dash.ctx.triggered_id == "refresh-button"):
             # kick off celery task to collect groups
             # on query worker queue,
             return [ugq.apply_async(args=[user_id], queue="data").id]
@@ -423,7 +423,7 @@
                         elif search_item == SearchItem.REPO:
                             formatted_v["label"] = f"repo: {v['label']}"
                         default_options.append(formatted_v)
             except:
                 # If that fails, just return the raw selection values
                 default_options = [{"value": v, "label": f"ID: {v}"} for v in selections]
 
@@ -789,7 +789,7 @@
     ctx = dash.callback_context
 
     # Check which input triggered the callback
     if ctx.triggered_id == "sidebar-toggle" and n_clicks:
         # Manual toggle - simply toggle the collapse state
         return not is_open
     elif ctx.triggered_id == "url":
@@ -852,7 +852,7 @@
 )
 def hide_loading_on_landing(pathname):
     """Hide loading components when on landing page."""
     if pathname == "/" or pathname is None:
         # Hide loading components on landing page
         return {"display": "none"}, {"display": "none"}
     else:
@@ -867,7 +867,7 @@
 # Callback to change pill color when search is clicked
 #
 # This callback implements dynamic pill coloring:
-# - When user selects repos/orgs: pills are grey (pending)
+# - When user selects repos/orgs: pills are red (pending)
 # - When user clicks search icon: pills turn blue (active search)
 # - Default selection (chaoss) starts blue since search is auto-triggered
 #
@@ -882,7 +882,7 @@
     """Update pill color based on search action.
 
     When search icon is clicked, add 'searching' class to turn pills blue.
-    When values change (user is selecting), remove 'searching' class to keep pills grey.
+    When values change (user is selecting), remove 'searching' class to keep pills red.
     """
     if not dash.ctx.triggered:
         return dash.no_update
@@ -894,8 +894,8 @@
         logging.info(f"PILL COLOR: Search clicked - turning pills BLUE")
         return "searchbar-dropdown searching"
     if triggered_id == "projects":
-        # Values changed (user selecting) - remove 'searching' class to keep pills grey
-        logging.info(f"PILL COLOR: Values changed - turning pills GREY. Selected: {selected_repos_orgs}")
+        # Values changed (user selecting) - remove 'searching' class to keep pills red
+        logging.info(f"PILL COLOR: Values changed - turning pills RED. Selected: {selected_repos_orgs}")
         return "searchbar-dropdown"
 
     return dash.no_update

8Knot/pages/index/search_utils.py

@@ -175,7 +175,7 @@
         return options
 
     # For very short queries (1-2 chars), use a simpler and faster matching approach
     if len(query) <= 2:
         return search_short_query(query, options)
     else:
         return search_with_fuzzy_matching(query, options, threshold, limit)
@@ -443,14 +443,14 @@
             "margin": "var(--multiselect-item-margin)",
             "color": "var(--color-white)",
         },
-        # Inline styles for grey pill default color (turns blue with "searching" class)
+        # Inline styles for pending pill color (red by default, turns blue with "searching" class)
         "value": {
-            "backgroundColor": "var(--pill-default-bg)",
-            "color": "var(--pill-default-color)",
+            "backgroundColor": "var(--pill-pending-bg)",
+            "color": "var(--pill-text-color)",
         },
         "pill": {
-            "backgroundColor": "var(--pill-default-bg)",
-            "color": "var(--pill-default-color)",
+            "backgroundColor": "var(--pill-pending-bg)",
+            "color": "var(--pill-text-color)",
         },
     }