Minor changes to the top bar styles

[vitvakatu]

Pull Request Description

My first attempts to work with the gui2 codebase. When looking at the IDE, I noticed that the top bar seems slightly off. I checked and confirmed that the sizes (heights) of some elements were not matching Figma.

Also, I tried using the M PLUS 1 font, and it has a completely different baseline than our previous one, effectively shifting all text down. I think we need to start using it as soon as possible, or else we will fix CSS rules everywhere.

I understand that the way I added the font is not the correct one, but I guess we can live with that until we properly include the files to the package.

Please forgive me, gods of Vue.js, @Frizi and @somebody1234, for this murder.

Before:

After:

Dropdown animation:

Kapture.2023-09-19.at.20.01.41.mp4

Important Notes

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

• The documentation has been updated, if necessary.
• Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
• All code follows the
  Scala,
  Java,
  and
  Rust
  style guides. In case you are using a language not listed above, follow the Rust style guide.
• All code has been tested:
  • Unit tests have been written where possible.
  • If GUI codebase was changed, the GUI was tested when built using ./run ide build.

[somebody1234]

a bunch of suggestions.

side note: i think you can @import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@500;600&display=swap') in base.css btw, instead of using a link rel="stylesheet"

note to self: you can manually add the transition classes like dropdown-leave-to to debug specific states, if, say, the animation endpoint isn't correct

[somebody1234]

oh, also the icon in GraphNode looks a bit too low now, the class should probably be renamed to grab-handle so that it doesn't conflict with the global icon style

[vitvakatu]

Thank you for review @somebody1234, all suggestions applied. I also had to remove font-weight from * selector in base.css, because it was conflicting with font-weight of the execution mode label. Screencast updated

[somebody1234]

i've taken the liberty to merge this with develop, the only conflict should be from the viz pr anyway so it should be safe enough