[ENHANCEMENT] Improve readability with layering

[shirsakm]

The page looks one-dimensional and bland. This needs to be fixed by layering the colors, and creating depth.

[itsjustneo-xo]

I'd like to work on this!

[shirsakm]

Hi @hect1k, I am happy to assign you this issue, but to be clear, this was meant to be more of a overhaul, and encompasses a lot of different pages. I didn't add many details, as I expected to work on this myself. I am happy to provide you with the design details / pages that need to be updated.

If you are looking to make a contribution for Hacktoberfest, this is probably one of the most work-heavy issues to tackle in this repo. If you want to work on it anyway, I am more than happy to help you with that. If not, feel free to open an issue yourself. I am happy to merge any enhancement or bug fix.

[itsjustneo-xo]

You can let me know what all changes you're looking for. If I'm able to implement them I'll create a PR, if not, I'll work on some other enhancement/feature :D

[shirsakm]

Sincere apologies for the late reply.

The main goal is to create depth, because currently it looks extremely flat in some pages. The way I was looking to create depth was just by using a lighter version of the color surrounding the card.

https://youtu.be/wcZ6jSlZqDc

Here is a reference video for what I mean (not my video to be clear).

Above is the Statistics page. The same holds true for the Achievements page. The Goals section can be another example.

I will also happily merge any other UI improvements, if you find any other issues. Let me know if you would still like to work on the issue.

[itsjustneo-xo]

Sounds good! I'd be happy to work on it :D

[shirsakm]

@hect1k Lmk if you are still working on this, and / or plan to contribute.