fix: matine ui fixes for concistency (#5733)

packages/widgets/src/coolify/instance-card.tsx

@@ -50,7 +50,7 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
   ).length;
 
   return (
-    <Card p={0} radius="sm" withBorder>
+    <Card p={0} radius="sm">
       <Group
         p="xs"
         justify="space-between"

packages/widgets/src/coolify/single-instance-layout.tsx

@@ -11,7 +11,7 @@ import { buildServerResourceCounts } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
 import { ServicesSection } from "./services-section";
 import type { CoolifyOptions, InstanceData } from "./types";
-import { COOLIFY_ICON_URL } from "./types";
+import { COOLIFY_BRAND_COLOR, COOLIFY_ICON_URL } from "./types";
 
 interface SingleInstanceLayoutProps {
   instance: InstanceData;
@@ -44,10 +44,10 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
   return (
     <ScrollArea h="100%">
       <Stack gap={0}>
-        <Group p="xs" justify="center" gap="xs" style={{ borderBottom: "2px solid #8B5CF6" }}>
+        <Group p="xs" justify="center" gap="xs" style={{ borderBottom: `2px solid ${COOLIFY_BRAND_COLOR}` }}>
           <Group gap={2}>
             <Image src={COOLIFY_ICON_URL} alt="Coolify" w={isTiny ? 18 : 24} h={isTiny ? 18 : 24} />
-            <Text fz={isTiny ? "xs" : "sm"} fw={700} style={{ color: "#8B5CF6" }}>
+            <Text fz={isTiny ? "xs" : "sm"} fw={700} style={{ color: COOLIFY_BRAND_COLOR }}>
               oolify
             </Text>
           </Group>
@@ -75,7 +75,11 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
           )}
         </Accordion>
 
-        <Group justify="space-between" p={4} style={{ borderTop: "1px solid var(--mantine-color-dark-4)" }}>
+        <Group
+          justify="space-between"
+          p={4}
+          style={{ borderTop: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
+        >
           <Group gap={2}>
             <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
             <Text size="xs" c="dimmed">

packages/widgets/src/coolify/types.ts

@@ -3,6 +3,7 @@ import type { CoolifyInstanceInfo } from "@homarr/integrations/types";
 import type { WidgetComponentProps } from "../definition";
 
 export const COOLIFY_ICON_URL = "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/coolify.svg";
+export const COOLIFY_BRAND_COLOR = "#8B5CF6";
 
 export interface InstanceData {
   integrationId: string;