Highlight buttons when selected

[RayBB]

Is your feature request related to a problem? Please describe.

• I'm always frustrated when I'm tabbing through input fields but there's no highlighting to tell which button is currently selected.

Describe the solution you'd like
Add a css so it's clear which button is currently active/selected.

Example:
A good example of this is in Bootstrap where if you select a button and then hit tab you can see the difference between which button is selected and which isn't.

In this screenshot the primary button is clearly selected:

Github, which has very similar CSS to Monica has an active view that looks like this:

[RayBB]

@asbiin

This could be resolved most easily by removing this one line:

monica/resources/assets/sass/app.scss

Line 416 in dc7c2ff

outline: none;

However, I've also noticed that the style/colors for buttons is a bit wonky in general. For example:
the text color is blue for the green buttons when adding them. If you left click on add (keep holding) and drag away from being on the button the background color turns grey.

Github uses a framework called primer for styles.
If we wanted to take just the CSS from the buttons it lives here. Otherwise we can just take the parts that would fix these color issues.

[djaiss]

Yes excellent idea. We need this indeed.

[RayBB]

I would be happy to help with this but setting up the dev environment has proved to be more work than I expected. I tried following the instructions but not being familiar with the tooling I got stuck #1739 and simply don't have the time now to dig into what else I need to follow.

Some docs making it a bit easier for new contributes to get setup would be helpful.

[github-actions]

This issue has been automatically locked since there
has not been any recent activity after it was closed.
Please open a new issue for related bugs.