From 3a788539f7134ecd7fb132ba8656f835cd699223 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sat, 20 Dec 2025 00:01:59 -0500
Subject: [PATCH] fix: make share and settings dropdowns opaque
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use explicit background colors instead of CSS variables
- Add dark mode detection to ShareBoardButton
- Prevents see-through dropdowns

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/ShareBoardButton.tsx | 24 ++++++++++++++++++++----
 src/ui/components.tsx               |  6 +++---
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/ShareBoardButton.tsx b/src/components/ShareBoardButton.tsx
index b0db3f0..d554293 100644
--- a/src/components/ShareBoardButton.tsx
+++ b/src/components/ShareBoardButton.tsx
@@ -18,6 +18,22 @@ const PERMISSION_LABELS: Record<PermissionType, { label: string; description: st
 const ShareBoardButton: React.FC<ShareBoardButtonProps> = ({ className = '' }) => {
   const { slug } = useParams<{ slug: string }>();
   const [showDropdown, setShowDropdown] = useState(false);
+
+  // Detect dark mode
+  const [isDarkMode, setIsDarkMode] = useState(
+    typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+  );
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'class') {
+          setIsDarkMode(document.documentElement.classList.contains('dark'));
+        }
+      });
+    });
+    observer.observe(document.documentElement, { attributes: true });
+    return () => observer.disconnect();
+  }, []);
   const [copied, setCopied] = useState(false);
   const [permission, setPermission] = useState<PermissionType>('edit');
   const [nfcStatus, setNfcStatus] = useState<'idle' | 'writing' | 'success' | 'error' | 'unsupported'>('idle');
@@ -208,13 +224,13 @@ const ShareBoardButton: React.FC<ShareBoardButtonProps> = ({ className = '' }) =
               top: dropdownPosition.top,
               right: dropdownPosition.right,
               width: '340px',
-              background: 'var(--color-panel)',
-              backgroundColor: 'var(--color-panel)',
+              background: isDarkMode ? '#2d2d2d' : '#ffffff',
+              backgroundColor: isDarkMode ? '#2d2d2d' : '#ffffff',
               backdropFilter: 'none',
               opacity: 1,
-              border: '1px solid var(--color-panel-contrast)',
+              border: `1px solid ${isDarkMode ? '#404040' : '#e5e5e5'}`,
               borderRadius: '12px',
-              boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
+              boxShadow: isDarkMode ? '0 8px 32px rgba(0,0,0,0.5)' : '0 8px 32px rgba(0,0,0,0.2)',
               zIndex: 100000,
               overflow: 'hidden',
               pointerEvents: 'all',
diff --git a/src/ui/components.tsx b/src/ui/components.tsx
index d1e3ce5..7cc6785 100644
--- a/src/ui/components.tsx
+++ b/src/ui/components.tsx
@@ -943,9 +943,9 @@ function CustomSharePanel() {
                   maxHeight: '60vh',
                   overflowY: 'auto',
                   overflowX: 'hidden',
-                  background: 'var(--color-panel)',
-                  backgroundColor: 'var(--color-panel)',
-                  border: '1px solid var(--color-panel-contrast)',
+                  background: isDarkMode ? '#2d2d2d' : '#ffffff',
+                  backgroundColor: isDarkMode ? '#2d2d2d' : '#ffffff',
+                  border: `1px solid ${isDarkMode ? '#404040' : '#e5e5e5'}`,
                   borderRadius: '8px',
                   boxShadow: isDarkMode ? '0 4px 20px rgba(0,0,0,0.5)' : '0 4px 20px rgba(0,0,0,0.25)',
                   zIndex: 99999,