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
This commit is contained in:
kempersc
parent
a981bb7ca3
commit
13ba8fb09b
2 changed files with 106 additions and 16 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue