Som Ramnani - fix(reset-timer-button): fix poor layout of the pop up window

[somramnani]

Description

Related PRS (if any):

This PR is related to the development backend

Main changes explained:

• Updated Timer.jsx to replace the Reset Time dialog’s dark-mode blue utility classes with a scoped reset-dialog theme, while preserving its light-mode appearance and reset behavior.
• Updated Timer.module.css to add a charcoal (#343a40) theme for the Reset Time dialog’s header, body, footer, borders, text, and close button.
• Created TimerResetModal.test.jsx to verify that the reset dialog opens correctly, uses the charcoal dark-mode theme without the blue background, remains default in light mode, and sends the reset action successfully.

How to test:

1. Check into the current branch som-feat/scroll-to-top-button
2. Run npm install and start the app locally.
3. Clear site data/cache.
4. Log in as an admin user.
5. From the dashboard header, open the timer and click the Reset Timer button.
6. Verify the Reset Time confirmation dialog in light mode:
   • The dialog remains centered.
   • The confirmation text, close button, and “Yes, reset time!” button are visible.
7. Enable dark mode, then repeat the reset-timer flow.
8. Verify the dark-mode Reset Time dialog:
   • No large blue background appears.
   • The header, body, and footer use a consistent charcoal background.
   • Text and the close button are clearly visible.
   • The reset action still works correctly.

Screenshots or videos of changes:

Light Mode:

Dark Mode:

Demo:
https://github.com/user-attachments/assets/6faac91b-f08a-4f77-a7b9-129057b80c60

Note:

• This PR only updates the Reset Time confirmation dialog’s dark-mode styling.
• The separate timer pop-out control layout issues are not included in this PR.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	6eed45c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a970e6af3c2aa000888c888
😎 Deploy Preview	https://deploy-preview-5488--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[iAbhi001]

Hi @somramnani,

I tested this PR locally on branch som_fix/reset-timer-pop-up-layout and everything is working as expected:

• Unit Tests: Ran TimerResetModal.test.jsx locally and all tests passed.
• Light Mode: Reset confirmation dialog opens centered, default styling is preserved, and buttons/text are clearly visible.
• Dark Mode: Verified the modal uses the new charcoal theme (#343a40) across header, body, and footer—the previous blue background issue is resolved, with good contrast on text and the close button.
• Functionality: Confirmed clicking "Yes, reset time!" successfully resets the timer without console errors.

LGTM! 👍