fix: restore dark mode styling for activity help popover

Author: coder13

src/components/CutoffTimeLimitPanel/CutoffTimeLimitPanel.test.tsx

@@ -0,0 +1,74 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Round } from '@wca/helpers';
+import { MemoryRouter } from 'react-router-dom';
+import { CutoffTimeLimitPanel } from './CutoffTimeLimitPanel';
+
+jest.mock('react-tiny-popover', () => ({
+  Popover: ({
+    children,
+    content,
+    isOpen,
+  }: {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    isOpen: boolean;
+  }) => (
+    <div>
+      {children}
+      {isOpen ? content : null}
+    </div>
+  ),
+}));
+
+jest.mock('react-i18next', () => ({
+  Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+jest.mock('@/providers/WCIFProvider', () => ({
+  useWCIF: () => ({
+    competitionId: 'TestComp2026',
+    wcif: {
+      id: 'TestComp2026',
+      schedule: { venues: [] },
+    },
+    setTitle: () => {},
+  }),
+}));
+
+const round = {
+  id: '333-r1',
+  cutoff: {
+    numberOfAttempts: 2,
+    attemptResult: 1200,
+  },
+  timeLimit: null,
+  advancementCondition: null,
+} as unknown as Round;
+
+function renderPanel() {
+  return render(
+    <MemoryRouter>
+      <CutoffTimeLimitPanel round={round} />
+    </MemoryRouter>,
+  );
+}
+
+describe('CutoffTimeLimitPanel', () => {
+  it('uses theme-aware popover classes for help content', () => {
+    renderPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: /help/i }));
+
+    const popoverContent = screen
+      .getByText(/common\.cutoffTimeLimitPopover\.timeLimits/i)
+      .closest('div');
+
+    expect(popoverContent).toHaveClass('bg-panel');
+    expect(popoverContent).toHaveClass('text-default');
+    expect(popoverContent).not.toHaveClass('bg-white');
+  });
+});

src/components/CutoffTimeLimitPanel/CutoffTimeLimitPanel.tsx

@@ -138,7 +138,7 @@ function CutoffTimeLimitPopover({ cutoff }: { cutoff: Cutoff | null }) {
       content={
         <div
           className={classNames(
-            'z-1000 max-w-xs md:max-w-md lg:max-w-lg type-body-sm transition-opacity duration-300 bg-white border border-tertiary-weak rounded-lg shadow-md opacity-0 p-4 space-y-2',
+            'z-1000 max-w-xs p-4 space-y-2 transition-opacity duration-300 border rounded-lg shadow-md md:max-w-md lg:max-w-lg type-body-sm bg-panel text-default border-tertiary-weak opacity-0',
             {
               'opacity-100': open,
             },
@@ -166,6 +166,7 @@ function CutoffTimeLimitPopover({ cutoff }: { cutoff: Cutoff | null }) {
       }>
       <button
         className="px-1 mr-2"
+        aria-label={t('common.help')}
         // className="p-2 px-3 text-sm rounded-full shadow-sm fa-solid fa-question bg-slate-300 hover:opacity-70"
         onClick={() => setOpen((prev) => !prev)}>
         <svg