Fix card colors

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
-  const Icon = (LucideIcons as any)['Box']
+  // Use section's default icon
+  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 = service.cardStyle || section.cardStyle
+          const style: 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>