fix: matine ui fixes for concistency (#5733)

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">