Minor CSS issues with category boxes

Contribute UX

AI-generated summary

Users reported a visual issue with category box borders appearing in a color that resembles an error state, particularly on desktop and mobile. AquaL1te noted the border-color seemed incorrect and provided screenshots and code context. JammyDodger clarified this was an intentional new feature to highlight active filters, though still under refinement. chapoi confirmed the issue stems from the navigation color coincidentally matching the error color, and assured users the team is actively redesigning navigational colors to resolve the confusion. Moin added that the perception of error wasn’t due to color association (blue ≠ error), but rather because the highlight didn’t disappear after clicking elsewhere — unlike other dropdowns in Discourse. chapoi acknowledged the feedback and confirmed the team is discussing potential adjustments to improve UX, though no changes are guaranteed yet. The issue is minor and cosmetic, but under active review.

1

It seems like the border-color is wrong since about a week. I’m on the latest build at the moment (Commits · discourse/discourse · GitHub). If more info is needed I’ll be happy to provide it. You can see the issue live here: Train of Thought - TZM Forum

image
image614×183 6.64 KB

element {
}
.select-kit.combo-box.category-drop.has-selection .category-drop-header {
  color: var(--quaternary);

  border-color: var(--quaternary);

Maybe a dev can have a look? It’s not a big issue at all.

On mobile the behavior is slightly different, 2 boxes have the red border color.

Screenshot_20240614-143206
Screenshot_20240614-1432061224×2700 283 KB

1 Like
2

This is a new feature (though still undergoing a couple of tweaks :slight_smile:). It’s a highlight of the active filters.

4 Likes
4

Hi,

Hate to say it but: It’s not a bug it’s a feature :wink:

The filters were missing any indication when active (with a selection) which we have now rectified. Unfortunately, our navigation colour is the same as our error colour, which unsurprisingly… makes it look like it has an error.

We’re currently busy changing the colours for all navigational elements, including this, so it will be resolved soon.

Thanks!

4 Likes
5

I don’t think that this is the reason why I had the impression this was an error.
My first association with blue is not error, and the ones here were blue from the beginning.
image

I think I expected the color to disappear when I clicked somewhere else. This is how, for example, the dropdowns of advanced search or the dropdown for groups at /u work:

Now there is a clearer difference in the colours between clicked and selected, but I still have this feeling

1 Like
9

Hi @Moin You raise a good point. Not sure if we’ll deviate from our current path, but just letting you know we are discussing it and see if/what we can do otherwise.

Thanks!

1 Like