Classes in the color black do not appear selected

[abhaycashikar]

Describe the bug When a class is selected in the Scheduler tab, it is typically shaded a darker color than its unshaded counterparts. However, when a class is colored black, all sections of the class appear to be selected.

To Reproduce Steps to reproduce the behavior. Example:

1. Open GT Scheduler on any platform.
2. Add a class with more than one section available.
3. Select at least one (but not all) sections.
4. Change the class color to black.
5. Observe that all the sections appear black even though not all are selected.

Expected behavior Unselected classes should be a lighter shade of black, like how other colored courses appear.

Screenshots A regular class with no selected sections.

The same class with the A section selected.

A class in the color black with no selected sections.

The same class with the A section selected.

Additional context Tested on Microsoft Edge on Windows 10 21H1 and Microsoft Edge on Android 11.

[abhaycashikar]

Was able to reproduce this issue with the color white as well:

Also, it seems some colors use a darker color to show an unselected section. I'm no UI/UX expert, but it is somewhat odd to me that it isn't standardized across all selectable colors. See the below image.

[jazeved0]

Thanks for reporting this issue. I agree that both white and black have problems with usability because of the problem you demonstrated. I think the safest solution would be just to remove those colors from the color <Palette> component (where the colors it uses are defined in their own file).

As for the lightening/darkening being inconsistent, I can shed a bit of light on this since I was looking at this code recently. The code uses a helper function that, given a hex color, determines whether the color is "light" or "dark" and gives a CSS class in return. This CSS class gives the text inside the opposite color: if it is "light" then the text is black; if it is "dark" then the text is white. It also controls how the unselected sections are distinguished from the selected sections: when the background is "light," it applies a light tint to the unselected sections; when the background is "dark," it applies a dark tint to the unselected sections.

I didn't originally write this logic, but I think it's consistent from the point of view of the UI (selected sections are the same color as the course header, and unselected sections are "dimmed" while maintaining contrast with the foreground). Still though, I think something should be done about black and white as they present an edge case.