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

src/components/Timer/Timer.jsx

@@ -783,18 +783,11 @@ function Timer({ authUser, darkMode, isPopout }) {
       toggle={() => setConfirmationResetModal(!confirmationResetModal)}
       centered
       size="md"
-      className={cs(fontColor, darkMode ? 'dark-mode' : '')}
+      className={cs(fontColor, darkMode ? css.resetConfirmationModal : '')}
     >
-      <ModalHeader
-        className={darkMode ? 'bg-space-cadet' : ''}
-        toggle={() => setConfirmationResetModal(false)}
-      >
-        Reset Time
-      </ModalHeader>
-      <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
-        Are you sure you want to reset your time?
-      </ModalBody>
-      <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+      <ModalHeader toggle={() => setConfirmationResetModal(false)}>Reset Time</ModalHeader>
+      <ModalBody>Are you sure you want to reset your time?</ModalBody>
+      <ModalFooter>
         <Button
           color="primary"
           onClick={() => {

src/components/Timer/Timer.module.css

@@ -94,6 +94,26 @@
   color: white;
 }
 
+.resetConfirmationModal :global(.modal-content),
+.resetConfirmationModal :global(.modal-header),
+.resetConfirmationModal :global(.modal-body),
+.resetConfirmationModal :global(.modal-footer) {
+  background-color: #343a40;
+  color: white;
+  border-color: #343a40;
+}
+
+.resetConfirmationModal :global(.close) {
+  color: white;
+  opacity: 0.85;
+  text-shadow: none;
+}
+
+.resetConfirmationModal :global(.close:hover) {
+  color: white;
+  opacity: 1;
+}
+
 .hideTimer {
   display: none;
 }

src/components/Timer/__test__/TimerResetModal.test.jsx

@@ -0,0 +1,69 @@
+/* eslint-disable testing-library/no-node-access */
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import css from '../Timer.module.css';
+
+const websocketMocks = vi.hoisted(() => ({
+  sendJsonMessage: vi.fn(),
+}));
+
+vi.mock('react-redux', async importOriginal => {
+  const actual = await importOriginal();
+  return { ...actual, connect: () => Component => Component, useDispatch: () => vi.fn() };
+});
+
+vi.mock('react-use-websocket', () => ({
+  default: () => ({
+    sendMessage: vi.fn(),
+    sendJsonMessage: websocketMocks.sendJsonMessage,
+    lastJsonMessage: null,
+    getWebSocket: vi.fn(),
+  }),
+  ReadyState: { CONNECTING: 1, OPEN: 1, CLOSING: 2, CLOSED: 3 },
+}));
+
+import Timer from '../Timer';
+
+describe('Timer reset confirmation modal', () => {
+  beforeEach(() => {
+    window.focus = vi.fn();
+    HTMLMediaElement.prototype.play = vi.fn(() => Promise.resolve());
+    HTMLMediaElement.prototype.pause = vi.fn();
+  });
+
+  afterEach(() => {
+    websocketMocks.sendJsonMessage.mockClear();
+  });
+
+  const openResetModal = darkMode => {
+    render(<Timer authUser={{ userid: 'test-user', role: 'Owner' }} darkMode={darkMode} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Reset timer' }));
+    return screen.getByText('Reset Time').closest('.modal');
+  };
+
+  it('uses the scoped charcoal theme in dark mode and resets the timer', async () => {
+    const modal = openResetModal(true);
+    const modalDialog = modal.querySelector('.modal-dialog');
+
+    await waitFor(() => expect(modal).toHaveClass('show'));
+    expect(modalDialog).toHaveClass(css.resetConfirmationModal, 'text-light');
+    expect(modalDialog.querySelector('.bg-yinmn-blue')).toBeNull();
+    expect(screen.getByText('Are you sure you want to reset your time?')).toBeVisible();
+    expect(screen.getByLabelText('Close')).toBeVisible();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Yes, reset time!' }));
+
+    expect(websocketMocks.sendJsonMessage).toHaveBeenCalledWith({ action: 'CLEAR_TIMER' }, false);
+    await waitFor(() => expect(screen.queryByText('Reset Time')).not.toBeInTheDocument());
+  });
+
+  it('leaves the light-mode reset dialog unthemed', async () => {
+    const modal = openResetModal(false);
+    const modalDialog = modal.querySelector('.modal-dialog');
+
+    await waitFor(() => expect(modal).toHaveClass('show'));
+    expect(modalDialog).not.toHaveClass(css.resetConfirmationModal, 'text-light');
+    expect(modalDialog.querySelector('.bg-yinmn-blue')).toBeNull();
+  });
+});