Introduce hover, active, focus states for files in sidebar of Web IDE
Problem
Currently, the hover/active/focus states of the files in the left sidebar of the web IDE are the same.
Proposal
Have different shades of grey (darker depending on hover vs active and focus
Design
- Text color:
#2e2e2e
+ line-height:16px
(currently it is something like#212529
, we should make sure it adheres to the default text styles of gitlab) - hoverstate bg-color:
#f2f2f2
- active bg-color:
#dfdfdf
Note: We no longer need the file open in background
style. file open in foreground
is the only one we need. (Let's see in the review phase of the MR if the bolt text style is still needed as well
- Let's get rid of the text-underline on hover. The whole row acts as one clickable area/unit:
Edited by Dimitrie Hoekstra