diff --git a/frontend/src/pages/EntityReviewPage.css b/frontend/src/pages/EntityReviewPage.css index 356b9e25e7..416ff0efe2 100644 --- a/frontend/src/pages/EntityReviewPage.css +++ b/frontend/src/pages/EntityReviewPage.css @@ -36,7 +36,21 @@ .header-actions { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.75rem; +} + +.header-actions button svg { + width: 20px; + height: 20px; + stroke: #333 !important; +} + +.dark .header-actions button svg { + stroke: #e0e0e0 !important; +} + +.header-actions button:hover svg { + stroke: white !important; } .dark .review-header { @@ -69,18 +83,34 @@ display: flex; align-items: center; justify-content: center; - width: 40px; - height: 40px; - border: none; + width: 42px; + height: 42px; + border: 1px solid var(--border-color, #d0d0d0); border-radius: 8px; - background: var(--bg-secondary, #f5f5f5); - color: var(--text-secondary, #666); + background: var(--bg-primary, #ffffff); + color: var(--text-primary, #333); cursor: pointer; transition: all 0.2s; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .refresh-btn:hover { background: var(--primary-color, #3b82f6); + border-color: var(--primary-color, #3b82f6); + color: white; + box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); +} + +.dark .refresh-btn { + background: var(--bg-secondary, #1e1e3f); + border-color: var(--border-color, #3a3a5a); + color: var(--text-primary, #e0e0e0); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} + +.dark .refresh-btn:hover { + background: var(--primary-color, #3b82f6); + border-color: var(--primary-color, #3b82f6); color: white; } @@ -94,30 +124,50 @@ display: flex; align-items: center; justify-content: center; - width: 32px; - height: 32px; - border: none; - border-radius: 6px; - background: var(--bg-secondary, #f5f5f5); - color: var(--text-secondary, #666); + width: 42px; + height: 42px; + border: 1px solid var(--border-color, #d0d0d0); + border-radius: 8px; + background: var(--bg-primary, #ffffff); + color: var(--text-primary, #333); cursor: pointer; transition: all 0.2s; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .filter-btn:hover, .logout-btn:hover { background: var(--primary-color, #3b82f6); + border-color: var(--primary-color, #3b82f6); color: white; + box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); } .filter-btn.active { background: var(--primary-color, #3b82f6); + border-color: var(--primary-color, #3b82f6); color: white; } .dark .filter-btn, .dark .logout-btn { - background: var(--bg-tertiary, #2a2a4a); + background: var(--bg-secondary, #1e1e3f); + border-color: var(--border-color, #3a3a5a); + color: var(--text-primary, #e0e0e0); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} + +.dark .filter-btn:hover, +.dark .logout-btn:hover { + background: var(--primary-color, #3b82f6); + border-color: var(--primary-color, #3b82f6); + color: white; +} + +.dark .filter-btn.active { + background: var(--primary-color, #3b82f6); + border-color: var(--primary-color, #3b82f6); + color: white; } /* Filter Panel */ diff --git a/frontend/src/pages/EntityReviewPage.tsx b/frontend/src/pages/EntityReviewPage.tsx index 4e80421c0c..0dbd5c9569 100644 --- a/frontend/src/pages/EntityReviewPage.tsx +++ b/frontend/src/pages/EntityReviewPage.tsx @@ -297,6 +297,46 @@ export default function EntityReviewPage() { ); }); + // DEBUG: Log icon visibility info + useEffect(() => { + const debugIcons = () => { + const buttons = document.querySelectorAll('.header-actions button'); + + console.log('=== ICON DEBUG INFO ==='); + console.log('Buttons found:', buttons.length); + + buttons.forEach((btn, i) => { + const svg = btn.querySelector('svg'); + const computedStyle = window.getComputedStyle(btn); + const svgStyle = svg ? window.getComputedStyle(svg) : null; + + console.log(`--- Button ${i} (${btn.className}) ---`); + console.log(` btn color: ${computedStyle.color}`); + console.log(` btn background: ${computedStyle.backgroundColor}`); + + if (svg && svgStyle) { + console.log(` svg stroke attr: ${svg.getAttribute('stroke')}`); + console.log(` svg style.stroke: ${svg.style.stroke}`); + console.log(` svg computed stroke: ${svgStyle.stroke}`); + console.log(` svg computed fill: ${svgStyle.fill}`); + console.log(` svg computed color: ${svgStyle.color}`); + + // Check first path element + const path = svg.querySelector('path, line, circle, polyline, polygon'); + if (path) { + const pathStyle = window.getComputedStyle(path); + console.log(` path stroke: ${pathStyle.stroke}`); + console.log(` path fill: ${pathStyle.fill}`); + console.log(` path strokeWidth: ${pathStyle.strokeWidth}`); + } + } + }); + }; + + const timer = setTimeout(debugIcons, 1000); + return () => clearTimeout(timer); + }, [isAuthenticated]); + // Fetch available signal types const fetchSignalTypes = useCallback(async () => { try { @@ -670,21 +710,21 @@ export default function EntityReviewPage() { onClick={() => setShowFilters(!showFilters)} title="Toggle filters" > - +