diff --git a/8Knot/assets/color.css b/8Knot/assets/color.css index 089a39d0..e8834d4a 100644 --- a/8Knot/assets/color.css +++ b/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); } diff --git a/8Knot/pages/index/index_callbacks.py b/8Knot/pages/index/index_callbacks.py index 86734e3c..72312707 100644 --- a/8Knot/pages/index/index_callbacks.py +++ b/8Knot/pages/index/index_callbacks.py @@ -867,7 +867,7 @@ def hide_loading_on_landing(pathname): # 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 @@ def update_pill_color_on_search(_, selected_repos_orgs): """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 @@ def update_pill_color_on_search(_, selected_repos_orgs): 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 diff --git a/8Knot/pages/index/search_utils.py b/8Knot/pages/index/search_utils.py index 8a34a371..576c4312 100644 --- a/8Knot/pages/index/search_utils.py +++ b/8Knot/pages/index/search_utils.py @@ -443,14 +443,14 @@ def create_multiselect_styles(): "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)", }, }