style(entity-review): Improve header button styling and icon sizes

- Increase icon sizes from 16px to 20px for better visibility
- Add borders and shadows to header action buttons
- Improve hover states with color transitions
- Add proper dark mode styling for all button variants

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;
+  width: 42px;
-  height: 40px;
+  height: 42px;
-  border: none;
+  border: 1px solid var(--border-color, #d0d0d0);
   border-radius: 8px;
-  background: var(--bg-secondary, #f5f5f5);
+  background: var(--bg-primary, #ffffff);
-  color: var(--text-secondary, #666);
+  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;
+  width: 42px;
-  height: 32px;
+  height: 42px;
-  border: none;
+  border: 1px solid var(--border-color, #d0d0d0);
-  border-radius: 6px;
+  border-radius: 8px;
-  background: var(--bg-secondary, #f5f5f5);
+  background: var(--bg-primary, #ffffff);
-  color: var(--text-secondary, #666);
+  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 */

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"
           >
-            <Filter size={16} />
+            <Filter size={20} color="currentColor" style={{ stroke: '#333', strokeWidth: 2 }} />
           </button>
           <button 
             className="refresh-btn"
             onClick={() => { fetchProfiles(); fetchStats(); }}
             disabled={loading}
           >
-            <RefreshCw className={loading ? 'animate-spin' : ''} size={16} />
+            <RefreshCw className={loading ? 'animate-spin' : ''} size={20} color="currentColor" style={{ stroke: '#333', strokeWidth: 2 }} />
           </button>
           <button 
             className="logout-btn"
             onClick={handleLogout}
             title="Uitloggen"
           >
-            <Key size={16} />
+            <Key size={20} color="currentColor" style={{ stroke: '#333', strokeWidth: 2 }} />
           </button>
         </div>
       </header>