https://code.world/haskell Nav bar button colors are confusing

[misterbeebee]

https://code.world/haskell#is missing some button colors that https://code.world has, in a confusing way.

https://code.world uses these colors: Blue: Action buttons Red: More action buttons (I can't tell what the conditions are for choosing Red vs Blue, putting a comment in the .css might help) Olive/Yellow: Current project Green: Other projects

https://code.world/haskell# uses these colors: Green (instead of Blue): Action buttons Olive (instead of Red): More action buttons Olive/Yellow: Current project Green: Other projects

The overloaded use of colors is confusing.

The source of the problem appears to be here, in codeworld.css and/or theme-variables.css:

.cw-button.red,
.cw-button.red:hover:active {
    background-color: var(--cw-button-bg-13);
}

.haskell .cw-button.red,
.cw-button.red:hover:active {
    background-color: var(--cw-button-bg-14);     
} 

.haskell red: --cw-button-bg-14: hsl(60, 75%, 35%);

is the same as (default) Yellow: --cw-button-bg-1: hsl(60, 75%, 35%);

but probably should be the same as -cw-button-bg-13: Red -hsl(10, 75%, 35%);

and similar for .haskell blue:

haskell .cw-button.blue, .cw-button.blue:hover:active {
    background-color: var(--cw-button-bg-10);
}

should be like -cw-button-bg-13: Blue hsl(135, 75%, 35%);

should be

Also, this looks suspicious:

.cw-button.red,
.cw-button.red:hover:active {
    background-color: var(--cw-button-bg-13);
}

.haskell .cw-button.red,
.cw-button.red:hover:active {
    background-color: var(--cw-button-bg-14);     
} 

It has .cw-button.red:hover:active twice. Perhaps you meant to add the .haskell prefix?

(There is the same problem on .blue)

All of this might be more readable if the variables --cw-button-bg-* more semantic cues in the names (such as haskell, project, action, active) and eschew the under-typed numbers 1-20.

Also, I'd also suggest using assignments like --haskell-cw-button-action-bg: var(cw-button-bg); to keep Haskell and default in alignment except for where you want Haskell to be different.

Also, IMO, using a drab Olive for current project, and a bright Green for other projects, is the opposite of what a user intuits. Usually the "current" object has a brighter color than other/background objects. (For example: OS window title bars and Chrome tab bars)

[cdsmith]

Do you have any interest in cleaning this up? I'd accept the pull requests for pretty much anything you did if it is thoughtful and consistent.

One thing we could do is abandon the different colors for Haskell mode. I added those because I found it confusing to know which mode I was in, but there are probably different possible UI choices to solve that. And most students only know one URL or the other anyway. The color scheme for http://code.world was more carefully considered. The one for /haskell is just a random choice, and I agree it's not great.

[misterbeebee]

If I can get CodeWorld running locally, sure. I am looking at CodeWorld because I can't get a Haskell system working locally, but I might have an easier time getting just the basic CodeWorld UI running which would be enough for this issue.

[cdsmith]

Oh, if you're having trouble getting Haskell set up, don't worry about it. It's actually not very easy to install CodeWorld, unfortunately. I'll try to do something about outstanding UI issues myself.

[misterbeebee]

I tried building CodeWorld on my Linux system but the NodeJS(?) phase said my Debian Rodete was not supported. So I guess I have no hope of a local build unless I get a virtual machine set up.