Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix theme toggle button bugs #3875

Merged
merged 8 commits into from
May 10, 2023
Merged

Fix theme toggle button bugs #3875

merged 8 commits into from
May 10, 2023

Conversation

Bestem0r
Copy link
Contributor

@Bestem0r Bestem0r commented May 7, 2023

Description

  • Adds background hover effect to the theme change button in the drop down menu.
  • Fixes clicking on the toggle theme button in the header not changing the icon of the button in the drop down and vice versa.
  • Adds debounce to theme changing to prevent "glitchy" behaviour.

Result

Before After
image image
Without background hover With background hover
image image
Not synchronised icons Synchronised icons

Testing

  • I have thoroughly tested my changes.
  1. Click on your profile picture to open the drop down menu.
  2. Hover over the change theme button and verify that there's a hover effect present.
  3. Click on the change theme button and verify that the icon in the header also changes.
  4. Spam click the header change theme button and verify that the site doesn't change theme after spamming has ended.

Resolves: #2926

LudvigHz
LudvigHz requested changes May 7, 2023
View reviewed changes
Copy link
Member

@LudvigHz LudvigHz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi! Thanks for your contribution! ⭐

Just move the eventListener to the useEffect and I'm happy to merge this in!

app/components/Header/ToggleTheme.tsx Outdated Show resolved Hide resolved
@Bestem0r Bestem0r requested a review from LudvigHz May 7, 2023 22:24
LudvigHz
LudvigHz approved these changes May 8, 2023
View reviewed changes
Copy link
Member

@LudvigHz LudvigHz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome!

The CI is just failing on lint (you're missing a newline in the css 🙃) so when CI passes this can go in 👍

eikhr
eikhr approved these changes May 8, 2023
View reviewed changes
Copy link
Member

@eikhr eikhr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Just come by the webkom-office in F252 if you want a LEGO-pin:) There is almost always someone there

ivarnakken
ivarnakken requested changes May 8, 2023
View reviewed changes
Copy link
Member

@ivarnakken ivarnakken left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot! 🚀🚀

Looks nice, but I have a small nitpick 😅

app/components/Header/Header.css Outdated Show resolved Hide resolved
@ivarnakken ivarnakken added bug-fix Pull requests that fix a bug approved Pull requests that have been approved changes-requested Pull requests with requested changes labels May 8, 2023
@Bestem0r @ivarnakken
Refactor background color to use more descriptive name
2834dea 
Co-authored-by: Ivar Nakken <69514187+ivarnakken@users.noreply.github.com>
@LudvigHz LudvigHz removed the changes-requested Pull requests with requested changes label May 8, 2023
@LudvigHz LudvigHz enabled auto-merge (squash) May 8, 2023 12:07
@Bestem0r Bestem0r requested a review from ivarnakken May 8, 2023 12:07
itsisak
itsisak approved these changes May 8, 2023
View reviewed changes
Copy link
Contributor

@itsisak itsisak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome!💯

@LudvigHz LudvigHz disabled auto-merge May 8, 2023 13:04
@LudvigHz
Copy link
Member

LudvigHz commented May 8, 2023

@Bestem0r Another slight issue here 😅. We had a small issue with the CI that was fixed a few days ago, so you need to rebase this on master for CI to work properly.

falbru
falbru approved these changes May 8, 2023
View reviewed changes
Copy link
Contributor

@falbru falbru left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀 Remember to squash before you merge!

@LudvigHz LudvigHz enabled auto-merge (squash) May 10, 2023 09:06
@LudvigHz LudvigHz merged commit 40af35f into webkom:master May 10, 2023
3 of 4 checks passed
@Bestem0r Bestem0r deleted the vebjorn/fix/theme-toggle branch May 10, 2023 09:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@eikhr eikhr eikhr approved these changes

@LudvigHz LudvigHz LudvigHz approved these changes

@itsisak itsisak itsisak approved these changes

@falbru falbru falbru approved these changes

@ivarnakken ivarnakken ivarnakken approved these changes

Assignees
No one assigned
Labels
approved Pull requests that have been approved bug-fix Pull requests that fix a bug
Projects
None yet
Milestone
No milestone
6 participants
@Bestem0r @LudvigHz @eikhr @itsisak @falbru @ivarnakken