jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: make share and settings dropdowns opaque 

- 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>
This commit is contained in:
Jeff Emmett 2025-12-20 00:01:59 -05:00
parent f2fc6f47d3
commit 3a788539f7
2 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/ShareBoardButton.tsx
View File

@ -18,6 +18,22 @@ const PERMISSION_LABELS: Record<PermissionType, { label: string; description: st
const ShareBoardButton: React.FC<ShareBoardButtonProps> = ({ className = '' }) => { const ShareBoardButton: React.FC<ShareBoardButtonProps> = ({ className = '' }) => {
const { slug } = useParams<{ slug: string }>(); const { slug } = useParams<{ slug: string }>();
const [showDropdown, setShowDropdown] = useState(false); 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 [copied, setCopied] = useState(false);
const [permission, setPermission] = useState<PermissionType>('edit'); const [permission, setPermission] = useState<PermissionType>('edit');
const [nfcStatus, setNfcStatus] = useState<'idle' | 'writing' | 'success' | 'error' | 'unsupported'>('idle'); const [nfcStatus, setNfcStatus] = useState<'idle' | 'writing' | 'success' | 'error' | 'unsupported'>('idle');
@ -208,13 +224,13 @@ const ShareBoardButton: React.FC<ShareBoardButtonProps> = ({ className = '' }) =
top: dropdownPosition.top, top: dropdownPosition.top,
right: dropdownPosition.right, right: dropdownPosition.right,
width: '340px', width: '340px',
background: 'var(--color-panel)', background: isDarkMode ? '#2d2d2d' : '#ffffff',
backgroundColor: 'var(--color-panel)', backgroundColor: isDarkMode ? '#2d2d2d' : '#ffffff',
backdropFilter: 'none', backdropFilter: 'none',
opacity: 1, opacity: 1,
border: '1px solid var(--color-panel-contrast)', border: `1px solid ${isDarkMode ? '#404040' : '#e5e5e5'}`,
borderRadius: '12px', 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, zIndex: 100000,
overflow: 'hidden', overflow: 'hidden',
pointerEvents: 'all', pointerEvents: 'all',

6
src/ui/components.tsx
View File

@ -943,9 +943,9 @@ function CustomSharePanel() {
maxHeight: '60vh', maxHeight: '60vh',
overflowY: 'auto', overflowY: 'auto',
overflowX: 'hidden', overflowX: 'hidden',
background: 'var(--color-panel)', background: isDarkMode ? '#2d2d2d' : '#ffffff',
backgroundColor: 'var(--color-panel)', backgroundColor: isDarkMode ? '#2d2d2d' : '#ffffff',
border: '1px solid var(--color-panel-contrast)', border: `1px solid ${isDarkMode ? '#404040' : '#e5e5e5'}`,
borderRadius: '8px', borderRadius: '8px',
boxShadow: isDarkMode ? '0 4px 20px rgba(0,0,0,0.5)' : '0 4px 20px rgba(0,0,0,0.25)', boxShadow: isDarkMode ? '0 4px 20px rgba(0,0,0,0.5)' : '0 4px 20px rgba(0,0,0,0.25)',
zIndex: 99999, zIndex: 99999,