photo visibility for demo events, hardened the demo mode. fixed dark/light mode toggle and notification bell toggle. fixed photo upload page sizes & header visibility.

resources/js/components/__tests__/AppearanceToggleDropdown.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import AppearanceToggleDropdown from '../appearance-dropdown';
+import { AppearanceProvider } from '@/hooks/use-appearance';
+
+const matchMediaStub = (matches = false) => ({
+  matches,
+  media: '(prefers-color-scheme: dark)',
+  onchange: null,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+});
+
+describe('AppearanceToggleDropdown', () => {
+  beforeEach(() => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation(() => matchMediaStub(false)),
+    });
+    localStorage.setItem('theme', 'light');
+    document.documentElement.classList.remove('dark');
+  });
+
+  it('toggles the document class to dark mode', () => {
+    render(
+      <AppearanceProvider>
+        <AppearanceToggleDropdown />
+      </AppearanceProvider>,
+    );
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+    expect(localStorage.getItem('theme')).toBe('dark');
+  });
+});