diff --git a/8Knot/assets/color.css b/8Knot/assets/color.css index f15d20a8..070bf981 100644 --- a/8Knot/assets/color.css +++ b/8Knot/assets/color.css @@ -68,3 +68,38 @@ --shadow-focus: rgba(64, 64, 64, 0.25); --shadow-subtle: rgba(199, 199, 199, 0.25); } + + +/* ============================================================================ + This section implements dynamic pill coloring: + - Grey pills by default when repos/orgs are selected + - Blue pills (like Data Ready badge) when search is executing + + The .searching class is toggled by a callback in index_callbacks.py + + +/* Style for filter pills (grey by default when selected) */ + +.mantine-MultiSelect-pill, +.mantine-MultiSelect-value { + background-color: var(--gray-medium); + color: var(--color-white); +} + +.searchbar-dropdown .mantine-MultiSelect-pill, +.searchbar-dropdown .mantine-MultiSelect-value { + background-color: var(--gray-medium); + color: var(--color-white); +} + + +/* Style for filter pills when search is active */ + + +/* !important needed to override inline styles from Mantine components */ + +.searchbar-dropdown.searching .mantine-MultiSelect-pill, +.searchbar-dropdown.searching .mantine-MultiSelect-value { + background-color: var(--baby-blue-700) !important; + color: var(--color-white) !important; +} diff --git a/8Knot/assets/landing_page.css b/8Knot/assets/landing_page.css index 2a93fb9a..6537232a 100644 --- a/8Knot/assets/landing_page.css +++ b/8Knot/assets/landing_page.css @@ -245,8 +245,11 @@ white-space: nowrap; } + +/* Updated tab hover color to baby-blue-300 for better UX */ + .landing-page .tabs-header .nav-tabs .nav-link:hover { - background: var(--hover-bg); + background: var(--baby-blue-300); color: var(--color-white); border-color: var(--baby-blue-500); } @@ -304,9 +307,8 @@ } .landing-page .section-bordered { - background: transparent; border: none; - color: var(--color-topbar-bg); + background-color: var(--color-topbar-bg); border-radius: var(--landing-radius-md); padding: var(--spacing-lg); margin-top: var(--spacing-lg); @@ -347,7 +349,7 @@ .landing-page .feature-image { max-width: 100%; height: auto; - border-radius: var(--border-radius); + border-radius: var(--border-radius-md); border: 1px solid var(--color-border); } @@ -822,10 +824,14 @@ align-self: center; } + +/* Changed arrow to solid white using CSS filter */ + .landing-page .arrow-image { width: 80px; height: auto; - opacity: 0.8; + opacity: 1; + filter: brightness(0) invert(1); } @@ -857,9 +863,11 @@ padding: var(--landing-spacing-s-10) 0; min-width: auto; } + /* Mobile arrow also solid white */ .landing-page .arrow-image { transform: rotate(90deg); width: 60px; + filter: brightness(0) invert(1); } .landing-page .before-image-container .image-caption, .landing-page .after-image-container .image-caption { diff --git a/8Knot/pages/index/index_callbacks.py b/8Knot/pages/index/index_callbacks.py index 4add4267..7e462a0a 100644 --- a/8Knot/pages/index/index_callbacks.py +++ b/8Knot/pages/index/index_callbacks.py @@ -860,3 +860,41 @@ def hide_loading_on_landing(pathname): # Note: Landing page callbacks moved to pages/landing/landing_callbacks.py + + +# ============================================================================ +# 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 clicks search icon: pills turn blue (active search) +# - Default selection (chaoss) starts blue since search is auto-triggered +# +# Works in conjunction with CSS in main_layout.css +# ============================================================================ +@callback( + Output("projects", "className"), + [Input("search", "n_clicks"), Input("projects", "value")], + prevent_initial_call=True, +) +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. + """ + if not dash.ctx.triggered: + return dash.no_update + + triggered_id = dash.ctx.triggered_id + + if triggered_id == "search": + # Search button clicked - add 'searching' class to turn pills blue + 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}") + return "searchbar-dropdown" + + return dash.no_update diff --git a/8Knot/pages/index/index_layout.py b/8Knot/pages/index/index_layout.py index b6de6f7e..dca715de 100644 --- a/8Knot/pages/index/index_layout.py +++ b/8Knot/pages/index/index_layout.py @@ -213,7 +213,8 @@ debounce=100, # debounce time for the search input, since we're implementing client-side caching, we can use a faster debounce data=[augur.initial_multiselect_option()], value=[augur.initial_multiselect_option()["value"]], - className="searchbar-dropdown", + # Start with "searching" class so default selection (chaoss) shows as blue + className="searchbar-dropdown searching", styles={ "input": { "fontSize": "16px", @@ -239,6 +240,15 @@ "margin": "2px 4px", "color": "white", }, + # Inline styles for grey pill default color + "value": { + "backgroundColor": "#555555", + "color": "white", + }, + "pill": { + "backgroundColor": "#555555", + "color": "white", + }, }, ), dbc.Button( @@ -266,10 +276,12 @@ style={"position": "relative"}, ), dbc.Alert( + # Updated help text to explain pill color behavior children='Please ensure that your spelling is correct. \ If your selection definitely isn\'t present, please request that \ it be loaded using the help button "REPO/ORG Request" \ - in the bottom right corner of the screen.', + in the bottom right corner of the screen. \ + The search is only confirmed when you click the search icon and the pill turns blue.', id="help-alert", dismissable=True, fade=True,