Fix card colors

public/config.yaml

@@ -172,6 +172,16 @@ services:
       background: "bg-purple-50 dark:bg-purple-950/30"
       iconColor: "text-purple-600 dark:text-purple-400"
       
+  - name: "File Browser"
+    description: "Edit Server Files"
+    url: "https://files.kent.pw"
+    iconName: "file-browser"
+    category: "monitoring"
+    monitorName: "File Browser"
+    cardStyle:
+      background: "bg-blue-50 dark:bg-blue-950/30"
+      iconColor: "text-blue-600 dark:text-blue-400"
+
   - name: "Drive"
     description: "File Storage"
     url: "https://drive.kent.pw"

src/App.tsx

@@ -7,7 +7,7 @@ import { useTheme } from "@/components/theme-provider"
 import { useMetrics } from "./hooks/useMetrics"
 import { useConfig } from "./hooks/useConfig"
 import { ServiceStatus } from "./types/metrics"
-import { ServiceCard, Section } from "./types/services"
+import { ServiceCard, Section, CardStyle } from "./types/services"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { AlertCircle } from "lucide-react"
@@ -21,7 +21,7 @@ const getIconUrl = (name: string | undefined, isDark: boolean = false): string =
   return `https://cdn.jsdelivr.net/gh/selfhst/icons/png/${ref}${suffix}.png`
 }
 
-function ServiceIcon({ service, isDark }: { service: ServiceCard, isDark: boolean }) {
+function ServiceIcon({ service, section, isDark }: { service: ServiceCard, section: Section, isDark: boolean }) {
   if (service.icon) {
     return <div className="h-6 w-6">{service.icon}</div>
   }
@@ -54,8 +54,8 @@ function ServiceIcon({ service, isDark }: { service: ServiceCard, isDark: boolea
     )
   }
 
-  // Default category icons from section configuration
+  // Use section's default icon
-  const Icon = (LucideIcons as any)['Box']
+  const Icon = (LucideIcons as any)[section.icon] || LucideIcons.Box
   return <Icon className="h-6 w-6" />
 }
 
@@ -153,8 +153,10 @@ function ServiceSection({ section, services, metrics }: {
             certDaysRemaining: 0
           }
 
-          // Use service-specific style or fall back to section style
+          const style: CardStyle = {
-          const style = service.cardStyle || section.cardStyle
+            background: service.cardStyle?.background || section.cardStyle?.background || "bg-gray-50 dark:bg-gray-950/30",
+            iconColor: service.cardStyle?.iconColor || section.cardStyle?.iconColor || "text-gray-600 dark:text-gray-400"
+          }
 
           return (
             <a 
@@ -164,11 +166,11 @@ function ServiceSection({ section, services, metrics }: {
               rel="noopener noreferrer"
               className="transition-transform hover:scale-105"
             >
-              <Card className={style.background}>
+              <Card className={`${style.background} hover:${style.background} overflow-hidden`}>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <div className="flex items-center">
                     <div className={style.iconColor}>
-                      <ServiceIcon service={service} isDark={isDark} />
+                      <ServiceIcon service={service} section={section} isDark={isDark} />
                     </div>
                     <CardTitle className="ml-2">{service.name}</CardTitle>
                   </div>

src/hooks/useConfig.ts

@@ -14,7 +14,10 @@ export function useConfig() {
           throw new Error('Failed to load configuration')
         }
         const text = await response.text()
+        console.log('Raw YAML:', text.substring(0, 500) + '...') // Show first 500 chars
         const parsed = yaml.load(text) as Config
+        console.log('Parsed config sections:', parsed.sections)
+        console.log('First service cardStyle:', parsed.services[0]?.cardStyle)
         setConfig(parsed)
         setError(null)
       } catch (err) {

tailwind.config.js

@@ -5,6 +5,16 @@ export default {
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
     ],
+    safelist: [
+        {
+            pattern: /^bg-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
+            variants: ['hover', 'dark']
+        },
+        {
+            pattern: /^text-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
+            variants: ['dark']
+        }
+    ],
     theme: {
         container: {
             center: true,