fix: restore translucent dashboard styling (#6664)

* fix: restore translucent dashboard styling

* fix: restore dashboard widget transparency

* fix: address dashboard review feedback

* fix: apply board opacity to containers

* fix: flatten demo board container

* fix: default board roundness to sm

* fix: restore assistant widget transparency

* Revert "fix: default board roundness to sm"

This reverts commit c235cbdf2b.

* fix: address remaining dashboard review comments

* test: align grid geometry expectations

packages/widgets/src/coolify/component.module.css

@@ -0,0 +1,29 @@
+.accordion {
+  --coolify-neutral-fill: rgb(
+    from var(--mantine-color-default-hover) r g b / calc(var(--opacity, 1) * 0.12)
+  );
+  --coolify-neutral-border: rgb(
+    from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45)
+  );
+}
+
+.accordion :global(.mantine-Accordion-item) {
+  --item-border-color: var(--coolify-neutral-border);
+  --item-filled-color: var(--coolify-neutral-fill);
+}
+
+.accordion :global(.mantine-Accordion-control) {
+  background-color: transparent;
+}
+
+.accordion :global(.mantine-Accordion-control:not(:disabled, [data-disabled]):hover) {
+  background-color: var(--coolify-neutral-fill);
+}
+
+.neutralDividerBottom {
+  border-bottom: 1px solid var(--coolify-neutral-border);
+}
+
+.neutralDividerTop {
+  border-top: 1px solid var(--coolify-neutral-border);
+}

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

@@ -8,6 +8,7 @@ import { useTimeAgo } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
 
 import { ApplicationsSection } from "./applications-section";
+import classes from "./component.module.css";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { buildServerResourceCounts, getBadgeColor, isCoolifyServerOnline, parseStatus } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
@@ -71,12 +72,12 @@ export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey,
     .join(" · ");
 
   return (
-    <Card p={0} radius="sm">
+    <Card p={0} radius="sm" bg="transparent">
       <Group
         p="xs"
         justify="space-between"
         wrap="nowrap"
-        style={{ borderBottom: "1px solid var(--mantine-color-dark-4)" }}
+        className={classes.neutralDividerBottom}
       >
         <Group gap={4} wrap="nowrap" miw={0}>
           <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
@@ -135,6 +136,7 @@ export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey,
       </Group>
 
       <Accordion
+        className={classes.accordion}
         variant="filled"
         chevronPosition="right"
         multiple
@@ -175,11 +177,7 @@ const InstanceFooter = ({ version, updatedAt }: { version: string; updatedAt: Da
   const t = useI18n("widget.coolify");
   const relativeTime = useTimeAgo(updatedAt, 60_000);
   return (
-    <Group
-      justify="space-between"
-      p={4}
-      style={{ borderTop: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
-    >
+    <Group justify="space-between" p={4} className={classes.neutralDividerTop}>
       <Text size="10px" c="dimmed">
         v{version}
       </Text>

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

@@ -8,6 +8,7 @@ import { useTimeAgo } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
 
 import { ApplicationsSection } from "./applications-section";
+import classes from "./component.module.css";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { buildServerResourceCounts } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
@@ -82,6 +83,7 @@ export function SingleInstanceLayout({
         </Group>
 
         <Accordion
+          className={classes.accordion}
           variant="contained"
           chevronPosition="right"
           multiple
@@ -123,11 +125,7 @@ const InstanceFooter = ({ version, updatedAt }: { version: string; updatedAt: Da
   const t = useI18n("widget.coolify");
   const relativeTime = useTimeAgo(updatedAt, 60_000);
   return (
-    <Group
-      justify="space-between"
-      p={4}
-      style={{ borderTop: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
-    >
+    <Group justify="space-between" p={4} className={classes.neutralDividerTop}>
       <Group gap={2}>
         <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
         <Text size="xs" c="dimmed">