fix(button): fix dark mode toggle click - I201 by teja-pola · Pull Request #206 · accordproject/template-playground

teja-pola · 2025-03-09T20:21:53Z

Closes #201

Fixes an issue where clicking on the outer container of the dark mode toggle unintentionally triggers the mode change. Now, only direct clicks on the button will toggle dark mode.

Changes

Fixed event listener placement to ensure only button clicks trigger dark mode.
Updated the ToggleDarkMode.tsx component to prevent unintended toggling.
Improved accessibility and UX by making the toggle interaction more precise.

Flags

n/a

Screenshots or Video

BEFORE

Untitled.video.-.Made.with.Clipchamp.2.mp4

AFTER

Untitled.video.-.Made.with.Clipchamp.3.mp4

Related Issues

Issue Dark Mode Toggle activates on clicking outer container #201

Author Checklist

Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
Vital features and changes captured in unit and/or integration tests
Commits messages follow AP format
Extend the documentation, if necessary
Merging to main from fork:branchname

netlify · 2025-03-09T20:22:09Z

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	`4437a4e`
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67d365110d36a2000886c7d4
😎 Deploy Preview	https://deploy-preview-206--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Owaiseimdad · 2025-03-11T04:24:12Z

src/components/ToggleDarkMode.tsx

-        checked={isDarkMode}
-        size={80}
-      />
+      <div className="toggle-wrapper">


@teja-pola any reason why we have to wrap it inside another div. Is there a way to not use it, you should be wrapping a tag only if there are additional tags getting added. Let me know if you have a solution based on maintainability of the code.

Hey @Owaiseimdad, I added the <div> wrapper to apply the .toggle-wrapper class, which ensures clicks only inside the actual toggle. Without it, the pointer-events rule in ToggleDarkMode.ts wouldn’t work as intended. However, I understand your concern about unnecessary wrappers. Its just happened as different developers have different practices writing the code. I’ll simplify the structure and make changes while ensuring maintainability of the code now.

@teja-pola there has to be a way to make sure who ever uses darktoogle anywhere in app, they should not be wrapping it inside the div. Let me see what are the other possibilities.

@Owaiseimdad Its done. Please review now and ask to merge if everything is up.

src/styles/components/ToggleDarkMode.ts

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

DianaLease

Please update with the latest main & resolve conflicts

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

src/components/ToggleDarkMode.tsx

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

teja-pola · 2025-03-13T23:14:36Z

@DianaLease updated to latest main, can you merge now

* fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> --------- Signed-off-by: Dharma Teja <dteja2468@gmail.com>

* fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> --------- Signed-off-by: Dharma Teja <dteja2468@gmail.com> Signed-off-by: surya4419 <suryaa4419@gmail.com>

* fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> --------- Signed-off-by: Dharma Teja <dteja2468@gmail.com> Signed-off-by: Owaise Imdad <owaiseimdad@gmail.com>

teja-pola requested a review from a team as a code owner March 9, 2025 20:21

Owaiseimdad suggested changes Mar 11, 2025

View reviewed changes

teja-pola requested a review from Owaiseimdad March 11, 2025 21:03

teja-pola force-pushed the teja/i201/fix-dark-mode-click branch from f479e8b to 1556dcd Compare March 13, 2025 09:44

teja-pola mentioned this pull request Mar 13, 2025

White Outline on Dark Mode Toggle Affects Internal Elements #213

Closed

teja-pola force-pushed the teja/i201/fix-dark-mode-click branch from 1a40f95 to cbd3ebb Compare March 13, 2025 21:26

fix(button): fix dark mode toggle click - I201

b2557c9

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

DianaLease reviewed Mar 13, 2025

View reviewed changes

fix(button): fix dark mode toggle click - I201

8e68dad

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

teja-pola force-pushed the teja/i201/fix-dark-mode-click branch 2 times, most recently from deabded to e160618 Compare March 13, 2025 21:53

fix(button): fix dark mode toggle click - I201

f32b20d

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

Owaiseimdad suggested changes Mar 13, 2025

View reviewed changes

src/components/ToggleDarkMode.tsx Outdated Show resolved Hide resolved

src/components/ToggleDarkMode.tsx Show resolved Hide resolved

teja-pola added 6 commits March 14, 2025 04:35

fix(button): fix dark mode toggle click - I201

170fdd2

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

fix(button): fix dark mode toggle click - I201

6bbe014

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

fix(button): fix dark mode toggle click - I201

dac8cce

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

fix(button): fix dark mode toggle click - I201

f20a0f5

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

fix(button): fix dark mode toggle click - I201

ec9c35d

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

fix(button): fix dark mode toggle click - I201

4437a4e

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

teja-pola force-pushed the teja/i201/fix-dark-mode-click branch from e160618 to 4437a4e Compare March 13, 2025 23:06

teja-pola mentioned this pull request Mar 14, 2025

feat(editor): add undo redo icons to editor - I204 #212

Merged

5 tasks

Owaiseimdad approved these changes Mar 14, 2025

View reviewed changes

DianaLease approved these changes Mar 14, 2025

View reviewed changes

DianaLease merged commit 61c76db into accordproject:main Mar 14, 2025
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(button): fix dark mode toggle click - I201#206

fix(button): fix dark mode toggle click - I201#206
DianaLease merged 9 commits intoaccordproject:mainfrom
teja-pola:teja/i201/fix-dark-mode-click

teja-pola commented Mar 9, 2025

Uh oh!

netlify bot commented Mar 9, 2025 •

edited

Loading

Uh oh!

Owaiseimdad Mar 11, 2025

Uh oh!

teja-pola Mar 11, 2025 •

edited

Loading

Uh oh!

Owaiseimdad Mar 12, 2025

Uh oh!

teja-pola Mar 13, 2025 •

edited

Loading

Uh oh!

Uh oh!

DianaLease left a comment

Uh oh!

Uh oh!

Uh oh!

teja-pola commented Mar 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

teja-pola commented Mar 9, 2025

Closes #201

Changes

Flags

Screenshots or Video

Related Issues

Author Checklist

Uh oh!

netlify bot commented Mar 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ap-template-playground ready!

Uh oh!

Owaiseimdad Mar 11, 2025

Choose a reason for hiding this comment

Uh oh!

teja-pola Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Owaiseimdad Mar 12, 2025

Choose a reason for hiding this comment

Uh oh!

teja-pola Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

DianaLease left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

teja-pola commented Mar 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Mar 9, 2025 •

edited

Loading

teja-pola Mar 11, 2025 •

edited

Loading

teja-pola Mar 13, 2025 •

edited

Loading