Color code thumbs up/down on hover in evaluation

[BTWS2]

This pull request closes #2715.

I don't have strong opinions on the order of thumbs up or down, but I'm in favor of color coding (thumbs up = green, thumbs down = red) to nudge towards the correct button as @rien suggested. I can switch the order if needed:
https://github.com/dodona-edu/dodona/blob/develop/app/views/feedbacks/_feedback_actions.html.erb
https://github.com/dodona-edu/dodona/blob/develop/app/views/feedbacks/_score_actions.html.erb

[jorg-vr]

I prefer to update the icon color instead of background color. (But this is just a matter of taste)

Overall I approve of the change

[BTWS2]

My goal with this approach is to add a visual confirmation the teacher pressed the right button. This shows the color after pressing the button. When the teacher hovers over the wrong button, a glimpse of the wrong color is shown with the previous approach. I agree with @jorg-vr that changing the color of the icon looks cleaner.

It's based on https://css-tricks.com/different-transitions-for-hover-on-hover-off/.

2022-03-17-23-26-21.mp4

[bmesuere]

Why not combine both behaviours? Color on mouse over + a slight delay after clicking?

[BTWS2]

@bmesuere A color change on mouse over (without animation) and visual feedback after clicking would indeed be better. If I had to choose I prefer the visual feedback after clicking, but both is better.

[BTWS2]

Changing the color property in both states wasn't possible without javascript. This is the new proposal using pure CSS: small color change on hover and clicking shows more green/red for clear visual feedback.

Light mode:

2022-03-23-19-17-54.mp4

Dark mode:

2022-03-23-20-45-31.mp4

[chvp]

The background color is still quite harsh, I think. The end of the animation also looks a little strange to me. Maybe a fade-out would make it less jarring?

[BTWS2]

I changed the background to lighter shade of the color. The end of the animation is cut off at the end, because the button is updated when the loading is done (visible at the end of the screen recording of dark mode below). I made the animation shorter and used ease-out to mitigate this partly. I added a space before the brackets and added a newline at the end.

At first I chose a lighter color ($danger-100), but it resulted in even more harsh colors in dark mode (e.g. $danger-100: $red-800 !global;), so I used opacity instead.

Light mode:

2022-04-02-21-01-25.mp4

Dark mode:

2022-04-02-21-02-11.mp4