feat(ui): pull every task in a styled card & bold h3 elements

[fredericvilcot]

Because of @bot-anik that has closed #23, the aim of this PR is to "beautify" the tasks page in a extra fast way by putting each task in a styled card, as done for the leaderboard elements.

Here are two videos:

desktop 1440px:
https://user-images.githubusercontent.com/47554752/205330376-6b8ca2bf-7bdb-4607-81ea-9f804802a106.mov

iPhone 12 Pro:
https://user-images.githubusercontent.com/47554752/205330439-c1f38b59-6887-4db1-88b4-22dbb13740be.mov

Just tell me if you think this improvement should be deployed in production.

[fredericvilcot]

@JulienMassonnat

It's weird, on my side the font is 'Gotham' not Arial ...

[JulienMassonnat]

Nope the font displayed is Arial for sure.
The explorer is wrong.

[JulienMassonnat]

Here is the right declaration from the Design System

[fredericvilcot]

@JulienMassonnat

Yep, you're right...
The issue is that Gotham font with bold and italic is broken at line-height level...

I need to find a way to fix it

[JulienMassonnat]

It works well on local with these

[fredericvilcot]

yes because there is large padding between elements and no other element than a <p> near to him.

But next to the icon it gives this:

It's a well known issue with the Gotham font...

[fredericvilcot]

@JulienMassonnat @emmanuelaldeguer @ccamel

I 'hacked' the way to use Gotham font with both bold and italic weight and styles for title description.
I also removed the bold weight for points because it was bold for the title and the text, too heavy for the eye...

Let me knøw!

[fredericvilcot]

@JulienMassonnat

Go?

[JulienMassonnat]

LGTM ! Thanks @fredericvilcot

[bot-anik]

🎉 This PR is included in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀