fix: sidebar iconen via CSS !important, unieke niet-blauwe kleuren

frontend/src/components/Layout.jsx

@@ -7,7 +7,7 @@ import {
   Search, Bell, LogOut, Menu, X, ExternalLink, ShieldCheck, PenTool, FileSearch
 } from 'lucide-react';
 import { useAuth } from '../auth';
-import { useSettings, iconColor, brandName } from '../settings';
+import { useSettings, brandName } from '../settings';
 import { api } from '../api';
 
 const NAV = [
@@ -81,7 +81,7 @@ export default function Layout({ children }) {
     <div className="flex flex-col h-full">
       <div className="px-5 py-5 flex items-center gap-3 border-b border-border-soft">
         <div className="w-9 h-9 rounded-lg bg-accent-soft flex items-center justify-center glow-accent">
-          <Network style={{ color: iconColor('network', settings) || '#00d4ff' }} className="w-5 h-5" />
+          <Network className="w-5 h-5" />
         </div>
         <div>
           <div className="font-bold text-[15px] tracking-tight">{brandName(settings)}</div>
@@ -110,7 +110,7 @@ export default function Layout({ children }) {
                     }`
                   }
                 >
-                  <item.icon className="w-4 h-4 shrink-0" style={{ color: iconColor(item.iconName, settings) || 'inherit' }} />
+                  <item.icon className="w-4 h-4 shrink-0" />
                   {item.label}
                 </NavLink>
               ))}
@@ -129,7 +129,7 @@ export default function Layout({ children }) {
                 href={item.href}
                 className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[13px] text-muted hover:text-text hover:bg-card transition-colors"
               >
-                <item.icon className="w-4 h-4 shrink-0" style={{ color: iconColor(item.iconName, settings) || 'inherit' }} />
+                <item.icon className="w-4 h-4 shrink-0" />
                 {item.label}
                 <ExternalLink className="w-3 h-3 ml-auto opacity-50" />
               </a>

frontend/src/settings.jsx

@@ -15,17 +15,17 @@ function generateColor(name) {
 }
 
 export const DEFAULT_ICON_COLORS = {
-  'layout-dashboard': '#58a6ff',
+  'layout-dashboard': '#f0883e',
   'users': '#3fb950',
   'briefcase': '#d29922',
   'check-circle': '#3fb950',
   'check-circle-2': '#3fb950',
   'check-square': '#3fb950',
   'check-check': '#3fb950',
-  'calendar': '#79c0ff',
-  'mail': '#58a6ff',
-  'mail-plus': '#58a6ff',
-  'inbox': '#58a6ff',
+  'calendar': '#f778ba',
+  'mail': '#bc8cff',
+  'mail-plus': '#bc8cff',
+  'inbox': '#bc8cff',
   'folder-kanban': '#d29922',
   'clock': '#79c0ff',
   'receipt': '#d29922',
@@ -33,7 +33,7 @@ export const DEFAULT_ICON_COLORS = {
   'bar-chart-3': '#bc8cff',
   'bar-chart': '#bc8cff',
   'server': '#bc8cff',
-  'share-2': '#58a6ff',
+  'share-2': '#f0883e',
   'network': '#00d4ff',
   'radar': '#d29922',
   'sparkles': '#bc8cff',
@@ -47,7 +47,7 @@ export const DEFAULT_ICON_COLORS = {
   'trash': '#f85149',
   'search': '#8b9bb8',
   'search-x': '#f85149',
-  'refresh-cw': '#58a6ff',
+  'refresh-cw': '#79c0ff',
   'download': '#79c0ff',
   'upload': '#79c0ff',
   'database-backup': '#bc8cff',
@@ -57,14 +57,14 @@ export const DEFAULT_ICON_COLORS = {
   'filter': '#8b9bb8',
   'building-2': '#bc8cff',
   'factory': '#bc8cff',
-  'map-pin': '#58a6ff',
-  'cable': '#58a6ff',
+  'map-pin': '#3fb950',
+  'cable': '#f0883e',
   'workflow': '#bc8cff',
   'bell': '#d29922',
   'file-text': '#f778ba',
   'lightbulb': '#d29922',
   'alert-triangle': '#f85149',
-  'activity': '#58a6ff',
+  'activity': '#00d4ff',
   'construction': '#d29922',
   'flag': '#f85149',
   'user': '#3fb950',
@@ -73,11 +73,11 @@ export const DEFAULT_ICON_COLORS = {
   'log-out': '#f85149',
   'menu': '#8b9bb8',
   'x': '#8b9bb8',
-  'arrow-left': '#79c0ff',
-  'arrow-right': '#79c0ff',
+  'arrow-left': '#3fb950',
+  'arrow-right': '#3fb950',
   'chevron-left': '#8b9bb8',
   'chevron-right': '#8b9bb8',
-  'globe': '#58a6ff',
+  'globe': '#00d4ff',
   'phone': '#3fb950',
   'loader-2': '#8b9bb8'
 };
@@ -98,7 +98,7 @@ function scanAndInject(styleEl, merged) {
   let css = '/* Icon Colors */\n';
   for (const [name, color] of Object.entries(merged)) {
     if (!color) continue;
-    css += `.lucide-${name}, [data-lucide="${name}"] { color: ${color} }\n`;
+    css += `.lucide-${name}, [data-lucide="${name}"] { color: ${color} !important }\n`;
     processedIcons.add(name);
   }
   const els = document.querySelectorAll('[class*="lucide-"]');
@@ -108,7 +108,7 @@ function scanAndInject(styleEl, merged) {
         const name = cls.replace('lucide-', '');
         if (!processedIcons.has(name)) {
           const c = generateColor(name);
-          css += `.lucide-${name}, [data-lucide="${name}"] { color: ${c} }\n`;
+          css += `.lucide-${name}, [data-lucide="${name}"] { color: ${c} !important }\n`;
           processedIcons.add(name);
         }
       }
@@ -139,7 +139,7 @@ function startObserver() {
           const name = cls.replace('lucide-', '');
           if (!processedIcons.has(name)) {
             const c = generateColor(name);
-            extra += `.lucide-${name}, [data-lucide="${name}"] { color: ${c} }\n`;
+            extra += `.lucide-${name}, [data-lucide="${name}"] { color: ${c} !important }\n`;
             processedIcons.add(name);
           }
         }