Better UX for the docs badge

[stsewd]

This is related to the badge that is in the project overview section.

There are two things:

First is a little hard to know that clicking the badge will make the popup to copy the badge to appear. This is also because if the user puts the cursor under the badge, a link is shown.

The other thing is that the popup isn't responsive

[humitos]

Wow! I didn't know that this even exists :/

Do you have some opinions/ideas on how the proper way of showing this information will be?

[stsewd]

@humitos I discovered this by mistake a month ago 😁, I don't remember where I saw some good UX for this, I'll try to see if I can remember. But basically, there was a info symbol to the side of the badge, clicking that symbol shows the popup with links to the badge.

[stsewd]

Also, the popup can be shown as a modal window.

[dojutsu-user]

@humitos
@stsewd
I have tried this on local.
Here is something very simple and also visible to the users.

If it's okay, I can make a PR.

[stsewd]

I think an icon to the side of the badge would be better

[dojutsu-user]

@stsewd
Exactly which icon you are referring to?
I am not able to find any suitable one in font-awesome.

[dojutsu-user]

Is this is the one?
https://fontawesome.com/icons/info-circle?style=solid

[humitos]

I like the proposal. Although, I don't have the final word regarding UI decisions.

The info circle makes sense to me to be next to the badge icon. It's a "familiar" behavior I'd say.

[humitos]

For example, this is what github does:

[dojutsu-user]

@humitos
Okay, I am proposing a PR with the same changes as suggested by you.