Update UI design

[anncy0413]

1. Implemented Dark/Light Mode Toggle
2. Refactored Button Layout with Improved Spacing & Interactions
3. Added Smooth Page Transition Animation on Info Page

#206

[emanuelef]

Thank you for your work on this!
The changes look great at first glance.
I’ll take a closer look and provide a full review later today.
Appreciate your contribution!

[emanuelef]

Ideally it would be nice to use latest react version, I think the problem you might have seen is fusionchart not being compatible with latest React. What I'm now doing is to run npm i --force to keep using React 19.

[emanuelef]

I like the new header background that makes it different than the graph background.
The height seems to be more than before and ideally it would be nice to reduce the header instead.
There are probably too many options and is not super user-friendly.

The new buttons are great with the icons.
On that I'm not sure about the UX for the last 30 days one, would it be better to make it two-state so then it turns into All ?
Or remove it all together.

On large screen the right side buttons are aligned to the right and not sure how it is in terms of usability.

The icon for the theme maybe could be moved in the header ?

Thanks again for the PR, I think with your help the UI/UX can be improved a lot.
I'm also impressed that you managed to navigate in all the messy code that needs a massive refactoring !

[emanuelef]

Not sure both progress bars are needed, maybe we can simplify with just one or use a different indicator?
Open to any other UI/UX improvement ideas you have!

[emanuelef]

@anncy0413 there have been some recent updates to the UI and styling. I’d really appreciate hearing your thoughts when you have a chance.
Thanks!