Change the colors of the filter buttons and change the migration details bar (colors and tooltips)

[HaudinFlorence]

PR Checklist:

• note any issues closed by this PR with closing keywords
• if you are adding a new page under docs/ or community/, you have added it to the sidebar in the corresponding _sidebar.json file
• put any other relevant information below

This PR aims at changing the colors of the filter buttons using button--primary and button--secondary classes as shown:
LIGHT MODE
before

now

DARK MODE
before

now

This PR aims at fixing task 3 and partially task 13 of issue #2137. It takes into account suggestions of this comment #2090 (comment)

cc @GabrielaVives @afshin

[netlify]

✅ Deploy Preview for conda-forge-previews ready!

Name	Link
🔨 Latest commit	1a45f8a
🔍 Latest deploy log	https://app.netlify.com/sites/conda-forge-previews/deploys/66a3c234dca98900089ed19f
😎 Deploy Preview	https://deploy-preview-2239--conda-forge-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jaimergp]

Thanks! The buttons look perfect.

The "progress bar" still uses the same viridis colors as before, though, which has terrible visibility in dark mode:

I think Gabriela was suggesting to use tooltips to identify the different blocks of the progress bar in #2090 (comment)

[HaudinFlorence]

Thanks! The buttons look perfect.

The "progress bar" still uses the same viridis colors as before, though, which has terrible visibility in dark mode:

I think Gabriela was suggesting to use tooltips to identify the different blocks of the progress bar in [#2090 (comment)](https://github.com//pull/2090#issuecomment-1979121823)

@jaimergp I was thinking about implementing the changes on the bar and the tooltip in a different PR.

[beckermr]

The color coding is a usability plus in my book. People get a clear idea immediately and can guess at what the colors mean. I'd argue we should find better colors for dark mode as opposed to removing them.

[jaimergp]

The concern raised by @GabrielaVives was:

I have been through the multiple comments giving feedback about the filters and colors in the migration details section.
There are several issues I would like to address:

• I think that the filtering buttons should have neutral colors rather than success or warning colors because their primary function is to categorize or sort data, not to convey a sense of achievement or caution. It will help promote clarity in this page where a lot of information is displayed, consistency, accessibility, and a focus on the primary function of the buttons, which is to filter data.
• The filter tabs need a title to help with usability
• The completion rate status bar could use the state colors defined in the conda-forge style guide (done=green, not solvable=orange, bot error=red). We still need to figure out colors for the 3 intermediate states, maybe some neutral colors would be best.

We need to be careful with color coding and contrast issues and it's usually tricky to find a palette that works well contrast wise and doesn't run into color blindness issues. Hence why I assume Gabriela was suggesting different approaches that didn't rely exclusively on color coding.

The visibility in dark mode right now needs to be fixed one way or another. I don't feel strongly about one solution over the other as long as we keep accessibility concerns in mind.

@jaimergp I was thinking about implementing the changes on the bar and the tooltip in a different PR.

I think this time it'll be better to address both things in a single PR because we'll have to make a decision about how we approach the solution for both. Or at least, I'd like to see them together even if as a prototype, and then we can split in PRs. But the changes look reasonably small to tackle in a single PR.

[beckermr]

Sounds good to me. I am not knowledgeable on these accessibility issues so I defer to you all on that.

[HaudinFlorence]

@jaimergp Ok I will do everything in this same PR and will change the title of it.

[jaimergp]

We have all these grays in the infima variables already, I think:

    --ifm-color-gray-100: #f5f6f7;
    --ifm-color-gray-200: #ebedf0;
    --ifm-color-gray-300: #dadde1;
    --ifm-color-gray-400: #ccd0d5;
    --ifm-color-gray-500: #bec3c9;
    --ifm-color-gray-600: #8d949e;
    --ifm-color-gray-700: #606770;
    --ifm-color-gray-800: #444950;
    --ifm-color-gray-900: #1c1e21;
    --ifm-color-gray-1000: var(--ifm-color-black);

[jaimergp]

pre-commit.ci autofix

[HaudinFlorence]

@jaimergp If you have better suggestion for the tooltips text color and background color, please let me know. I thought that using the ones of the secondary button may be a solution, but I could not figure out how to get them from Infima. I also removed the title that was displayed on hovering the different migration bar element since the tooltip is showing the same information.

[HaudinFlorence]

pre-commit.ci autofix

[jaimergp]

Tooltips looking awesome! Just two comments.

[HaudinFlorence]

I am adding two gifs here to have an overview of the rendering in light and dark mode:
Screencast from 24-07-2024 16:07:47.webm
Screencast from 24-07-2024 16:10:52.webm

[jaimergp]

Hi @HaudinFlorence, I presented your changes in the conda-forge core meeting today to see how folks felt about it. The reception was great; we just have two tiny comments:

• The difference between orange (warning) and red (error) in light mode is tricky to see for some folks / displays. I think we could try to increase the darkness in the red to make it more apparent. This can be done in a different PR.
• Would it be possible to have a little dot of color next to the filter button to quickly know which button refers to each progress bar slice? Something like this:

[HaudinFlorence]

Hi @HaudinFlorence, I presented your changes in the conda-forge core meeting today to see how folks felt about it. The reception was great; we just have two tiny comments:

• The difference between orange (warning) and red (error) in light mode is tricky to see for some folks / displays. I think we could try to increase the darkness in the red to make it more apparent. This can be done in a different PR.
• Would it be possible to have a little dot of color next to the filter button to quickly know which button refers to each progress bar slice? Something like this:

@jaimergp Thanks for the feedback. I can try to add a dot whose color is fitting with the color of the corresponding category is the migration status bar.

[GabrielaVives]

• Would it be possible to have a little dot of color next to the filter button to quickly know which button refers to each progress bar slice? Something like this:

After testing the filters, I believe that the filter icon on the left does not add value. The icon does not clearly indicate its purpose, and the hover or selection states of the buttons should suffice to convey their filtering actions, as is common in many applications and websites. Adding the icon suggests a lack of confidence in the UX of the filters and unnecessarily complicates the interface, distracting from the primary function of these buttons.

I recommend removing the filter icon and instead placing a color dot on the left side of each tab. This approach is more intuitive, as it maintains a consistent location for the color dot, regardless of the text length.

[GabrielaVives]

I am adding two gifs here to have an overview of the rendering in light and dark mode: Screencast from 24-07-2024 16:07:47.webm Screencast from 24-07-2024 16:10:52.webm

In my opinion, the behavior is good, but the filters could be organised differently:

• Align all the filter buttons on the left
• Reduce the space between each button
• They are organised in the order of the progress bar above, but I don't think that brings any value because there is no visual correspondence. I would rather organise them based on their usage: for example, put the "done" button last.

[HaudinFlorence]

pre-commit.ci autofix

[HaudinFlorence]

Hi @HaudinFlorence, I presented your changes in the conda-forge core meeting today to see how folks felt about it. The reception was great; we just have two tiny comments:

• The difference between orange (warning) and red (error) in light mode is tricky to see for some folks / displays. I think we could try to increase the darkness in the red to make it more apparent. This can be done in a different PR.
• Would it be possible to have a little dot of color next to the filter button to quickly know which button refers to each progress bar slice? Something like this:

Both remarks should have been addressed : the additions of dots and the bot error red that has been made darker. Please let me know if it looks fine to you and how it could be improved. Thanks.

[beckermr]

right now I see this

I think we should remove the "filter symbol" and just have the dot centered vertically and left justified in the button. This is the same comment as @GabrielaVives made above

I recommend removing the filter icon and instead placing a color dot on the left side of each tab. This approach is more intuitive, as it maintains a consistent location for the color dot, regardless of the text length.

[HaudinFlorence]

right now I see this

I think we should remove the "filter symbol" and just have the dot centered vertically and left justified in the button. This is the same comment as @GabrielaVives made above

I recommend removing the filter icon and instead placing a color dot on the left side of each tab. This approach is more intuitive, as it maintains a consistent location for the color dot, regardless of the text length.

I was planning to remove it, but was maybe expecting more feedback on this suggestion before doing it. So let's remove it.

[beckermr]

Ah great! Let's go ahead indeed!

[HaudinFlorence]

• Would it be possible to have a little dot of color next to the filter button to quickly know which button refers to each progress bar slice? Something like this:

After testing the filters, I believe that the filter icon on the left does not add value. The icon does not clearly indicate its purpose, and the hover or selection states of the buttons should suffice to convey their filtering actions, as is common in many applications and websites. Adding the icon suggests a lack of confidence in the UX of the filters and unnecessarily complicates the interface, distracting from the primary function of these buttons.

I recommend removing the filter icon and instead placing a color dot on the left side of each tab. This approach is more intuitive, as it maintains a consistent location for the color dot, regardless of the text length.

@GabrielaVives Thanks for your suggestion. It has been addressed (both the removal of the filter icon and the addition of the colored dot) and it currently looks like that:

The borders of the dots may be adapted in width and color.

[HaudinFlorence]

I am adding two gifs here to have an overview of the rendering in light and dark mode: Screencast from 24-07-2024 16:07:47.webm Screencast from 24-07-2024 16:10:52.webm

In my opinion, the behavior is good, but the filters could be organised differently:

• Align all the filter buttons on the left
• Reduce the space between each button
• They are organised in the order of the progress bar above, but I don't think that brings any value because there is no visual correspondence. I would rather organise them based on their usage: for example, put the "done" button last.

@GabrielaVives Thanks for this comment. I implemented the first 2 points. For the third one, I am not sure what is the best order for a reorganisation of the buttons. A detailed suggestion is welcome. An issue has been opened here: #2243. Thanks.

[HaudinFlorence]

pre-commit.ci autofix

[HaudinFlorence]

The last commits are attempts to improve the contrast between the different colors of the migrations bars and dots. I think at this stage, all the issues mentioned previously on the filters buttons have been addressed or reported elsewhere in a new issue. If there is no other suggestion, ask for changes or objection, the PR may be ready to be merged.

[beckermr]

This looks great and I think we should merge. We can iterate more in future PRs. Thank you so much!