enhancement: added mode toggle button

[Jagpreet153]

Related Issue(s)

• Fixes #194

Description

I have added dark /light mode toggle button

Changes Made

Added mui dependency , changes css of pages files , header.tsx

Screenshots (if applicable)

Checklist

Before submitting your pull request, ensure that you have completed the following tasks:

• [x] Code follows the project's style and conventions.
• [x] Code has been tested thoroughly, and all tests pass successfully.
• [x] Documentation has been updated to reflect any relevant changes.
• [x] All new and modified code is adequately commented for clarity.
• [x] Pull request title follows the specified format: [Feature/Enhancement/Bug Fix]: Brief description of the change.

Additional Notes

Kindly review this PR .

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our #24. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[Smitkhobragade]

@Jagpreet153 can you make a Video of all where you applied the Light and dark Mode ?

[Jagpreet153]

Sure

https://github.com/oxiton-foundation/click-metrics/assets/119691733/a7235c53-1064-4dbf-b186-08f1d4702573

[Smitkhobragade]

In this Photo. the Black Area which I have highlighted using gray pen. can you cover it with the same background. like this kind of doesnt looks nice. Also this is happening in the next some Screens I have attached.

In the Photo below. The Sidebar looks kind of disconnected. can you manage the color or it so it looks good. make the highlighted area of the same color as of the navbar.

and the last. I think here it is al white. doesn't looks like dark mode. pls solve this also.

@Jagpreet153 . Please Note the above changes and let me know once completed ...

[Smitkhobragade]

@Jagpreet153 Any Updates ??

[Jagpreet153]

I have updated changes

[Smitkhobragade]

Great it looks good now.

[Smitkhobragade]

@Swarnendu0123 . I have reviewed the commits. Everything looks fine. You can review and merge it.

[Swarnendu0123]

The dark mode we are targeting should be dark like GitHub. I don't like e the blue theme. Please change it to dark as github dark mode.

[Swarnendu0123]

remove the client/package-lock.json other we can encounter some bug in production.

[Jagpreet153]

@Smitkhobragade @Swarnendu0123 Kindly check I have made it to dark theme

[Swarnendu0123]

Attach video.

[Jagpreet153]

https://github.com/oxiton-foundation/click-metrics/assets/119691733/628eec44-73c4-408e-8cfd-e51108832fa8

[Swarnendu0123]

https://github.com/oxiton-foundation/click-metrics/assets/119691733/628eec44-73c4-408e-8cfd-e51108832fa8

In this video, I can see the work is very unstructured. You haven't taken care of borders. The search boxes, the entire Analytics page is white. Also the colour I have talked about is not black, it's a dark grey type colour.

[Jagpreet153]

@Swarnendu0123 Ok I will makes the color to dark gray