search

josharsh / YAWP

Yet Another Web Playground is an online web Playground that lets you play with HTML CSS and JS in real-time. If you want to teach web and Zoom does not really allow you to express a lot, YAWP is just for you. YAWP saves your work so that you can build over it next time you visit.
https://yawp.josharsh.tech
11 stars 14 forks source link

Added Dark Mode To Landing Page! #13

Open SidhaantThakker opened 3 years ago

SidhaantThakker commented 3 years ago

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[bot] commented 3 years ago

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 commented 3 years ago

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

SidhaantThakker commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago
  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 commented 3 years ago

@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 commented 3 years ago

Okay, I'll start doing it!

SidhaantThakker commented 3 years ago

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 commented 3 years ago

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