Added Dark Mode To Landing Page!

[SidhaantThakker]

I've made the following changes -

1. Added a button to toggle between dark and light mode on the landing page
2. Made a new CSS file under components/Index to hold the dark mode CSS so as not to clutter the main file
3. Changed the HTML, CSS, JS icons for SVG icons with customizable colour parameters
4. yarn.lock reported an update when I ran build, hence added that change too

with regards to Issue #7

Cheers!

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/josharsh/yawp/C7gwH2Kv9wZ5NntMUDnjvrBQVfn6
✅ Preview: https://yawp-git-fork-sidhaantthakker-darkmode-josharsh.vercel.app

[josharsh]

Looks good @SidhaantThakker.
Can you please help me find answers to the following questions?

• Why does the dark toggle not work for nav bar?
• Can we talk about placement and design of the button that toggles dark/light modes.

[SidhaantThakker]

Sure,

1. The NavBar is not part of the landing page, and hence it would require me to pass the state upwards, which I will definitely implement if you like the initial design;
2. I was unsure of where to place it, I tried a few places but this one seemed the most natural, I can change it to any other place if you prefer it that way.

:)

[josharsh]

@SidhaantThakker First Things First..This is not my project anymore. If we are talking on this space, this would be community driven.
On 1)- Should we go about implementing Dark mode support for navigation too? As an experience I think, it only makes sense.
On 2) - On the nav bar, do you think a toggle button instead of a plain button would look better?

[SidhaantThakker]

1. Yup, doing it for the Navbar would be a better idea, maybe we can open an issue for this? Or I could work on another PR?
2. Toggle Button on the Navbar would definitely be better, but where exactly would you like it to be placed?

[josharsh]

@SidhaantThakker
1 - Let's do in the same PR. then it should be good to merge
2 - Top Right looks fine to me, let me know if you think differently.

[SidhaantThakker]

Okay, I'll start doing it!

[SidhaantThakker]

I made the required changes, however, I had to change some function components to class components to make the state passing work.

Also, I was unable to change the positioning of the button in the navbar without messing up the navbar itself, and change the colour of the text in the dropdown, so I was hoping someone with more CSS experience could help with that

[josharsh]

Thanks, @SidhaantThakker.
Looks like a major update. Will need some time to review.