bluewave-labs / bluewave-uptime

BlueWave Uptime Monitor application
https://uptime-demo.bluewavelabs.ca/
GNU Affero General Public License v3.0
416 stars 46 forks source link

[Enhancement]: Light/Dark mode toggle should be in settings menu #934

Open om-3004 opened 1 week ago

om-3004 commented 1 week ago

The light/dark mode toggle is currently present at the user profile menu along with the log out button. Rather it should be in the settings menu under appearance.

Screenshot 2024-10-11 113132

rishavd3v commented 1 week ago

Hey, I would like to work on this issue. It would be more intuitive and user-friendly to move it to the settings menu under "Appearance." I'd be happy to work on this if it sounds good! Let me know your thoughts.

ajhollid commented 1 week ago

@om-3004 @rishavd3v

We're always open to outside contributions! Feel free to open up a pull request any time.

@gorkemcetin is our UI / UX designer so touch base with him RE design decisions and we can go from there!

om-3004 commented 1 week ago

@gorkemcetin What do you think about this thought?

gorkem-bwl commented 1 week ago

@gorkemcetin What do you think about this thought?

That makes sense. @rishavd3v would you like to work on it?

rishavd3v commented 1 week ago

@gorkem-bwl yeah, would love to!

rishavd3v commented 1 week ago

Made a PR, @ajhollid @gorkem-bwl please review and let me know if any changes are needed.

gorkem-bwl commented 1 week ago

Looks good, thanks for the video.

FYI @ajhollid

gorkem-bwl commented 1 week ago

@rishavd3v do you think you can do a more visual design, like one of those? I can build corresponding Figma files and SVGs.

Screenshot 2024-10-11 at 8 24 30 PM Screenshot 2024-10-11 at 8 25 11 PM
gorkem-bwl commented 1 week ago

Another alternative is to use a React library like this one. It's simpler and easier to the eyes: https://github.com/H0rn0chse/dark-mode-toggle

rishavd3v commented 1 week ago

I'm still fairly new to React, so I can't commit to more visual design tasks. However, if you open up issues, I'd be happy to take a look and see if it's something I can work on. It would be a fun way for me to learn.

gorkem-bwl commented 1 week ago

I'm still fairly new to React, so I can't commit to more visual design tasks. However, if you open up issues, I'd be happy to take a look and see if it's something I can work on. It would be a fun way for me to learn.

You may want to check the link above (dark-mode-toggle) and see if you can implement it, without removing the current implementation (#938). We can then try and see if it is a better looking solution.

rishavd3v commented 1 week ago

Got it! I’ll see if I can implement it.

ajhollid commented 1 week ago

Got it! I’ll see if I can implement it.

Sounds good!

Whenever you're ready for us to take a look at your implementation just open up a PR 👌

Please have a look at the MUI switches and other MUI components in general as well.

This is the library we use to build all our UI comments so it would be ideal to use this.

ajhollid commented 6 days ago

@rishavd3v are you still interested in working on this?

rishavd3v commented 6 days ago

Thanks for checking in! I’m still interested in working on this. I’ve been learning and trying to implement it. If it's urgent you can co-assign it to someone.

ajhollid commented 5 days ago

Not urgent, just wanted to check on the status. Carry on, no rush!