style: improve readability

[saschb2b]

Trying to improve UX in terms of readability and seperation of context. For visual encapsulation I took inspiration from https://dribbble.com/shots/23533976-Changelog-Card

• clearer separation of indivudial versions
• clearer separation of indivudial components inside a version
• typography adjustments in terms of size and color
• spacing adjustments in terms of sepeartion and context

Here is a before and after

[leMaik]

Looks great! 👏

I prefer the more compact tags in the dribble a bit more, also maybe switch color for 'new' vs 'changed' etc? To keep the changelog slightly more compact (if the user needs this), could there be a prop to hide the tags or only display the one "new"/"changed" etc. tag put it back at the start of a line?

[redbeard0091]

I second the idea with hiding tags (aka labels) via a prop configuration.

Besides that it looks really beautiful! Thank you @saschb2b !

[saschb2b]

Tested on left side again but stll not happy how it shifts the text beginnings in a chaos way. Putting it on the right side looks quite clean though.

Also added the prop to hide the type completetly to align with minimal changelog list component vision

[github-actions]

🎉 This PR is included in version 1.1.2 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀