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/network-controller/network-status/component.tsx

@@ -14,6 +14,9 @@ import { getNetworkControllerStatusLayout } from "./layout";
 import { WifiVariant } from "./variants/wifi-variant";
 import { WiredVariant } from "./variants/wired-variant";
 
+const neutralBorderColor =
+  "rgb(from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45))";
+
 export default function NetworkControllerNetworkStatusWidget({
   options,
   integrationIds,
@@ -69,7 +72,7 @@ export default function NetworkControllerNetworkStatusWidget({
         {queryIndicators}
         <SimpleGrid cols={summaries.length > 1 ? layout.sourceColumns : 1} spacing="sm">
           {summaries.map(({ integration, summary, updatedAt }) => (
-            <Card key={integration.id} withBorder p="sm">
+            <Card key={integration.id} withBorder p="sm" bg="transparent" style={{ borderColor: neutralBorderColor }}>
               <Stack gap="sm">
                 <Group justify="space-between" wrap="nowrap">
                   <Stack gap={0} miw={0}>
@@ -87,10 +90,20 @@ export default function NetworkControllerNetworkStatusWidget({
                   </Badge>
                 </Group>
                 <SimpleGrid cols={layout.columns} spacing="sm">
-                  <Card p={layout.cardPadding} withBorder>
+                  <Card
+                    p={layout.cardPadding}
+                    withBorder
+                    bg="transparent"
+                    style={{ borderColor: neutralBorderColor }}
+                  >
                     <WifiVariant countGuests={summary.wifi.guests} countUsers={summary.wifi.users} />
                   </Card>
-                  <Card p={layout.cardPadding} withBorder>
+                  <Card
+                    p={layout.cardPadding}
+                    withBorder
+                    bg="transparent"
+                    style={{ borderColor: neutralBorderColor }}
+                  >
                     <WiredVariant countGuests={summary.lan.guests} countUsers={summary.lan.users} />
                   </Card>
                 </SimpleGrid>
@@ -105,9 +118,15 @@ export default function NetworkControllerNetworkStatusWidget({
   return (
     <Stack p={layout.padding} h="100%" gap={0}>
       {queryIndicators}
-      <SimpleGrid cols={layout.columns} h="100%" spacing="sm">
+      <SimpleGrid cols={layout.columns} spacing="sm" style={{ flex: 1, alignItems: "stretch" }}>
         {layout.showWifi && (
-          <Card p={layout.cardPadding} withBorder={layout.withBorder}>
+          <Card
+            p={layout.cardPadding}
+            withBorder={layout.withBorder}
+            bg="transparent"
+            h="100%"
+            style={{ borderColor: neutralBorderColor }}
+          >
             <WifiVariant
               countGuests={countWifiGuests}
               countUsers={countWifiUsers}
@@ -117,7 +136,13 @@ export default function NetworkControllerNetworkStatusWidget({
           </Card>
         )}
         {layout.showWired && (
-          <Card p={layout.cardPadding} withBorder={layout.withBorder}>
+          <Card
+            p={layout.cardPadding}
+            withBorder={layout.withBorder}
+            bg="transparent"
+            h="100%"
+            style={{ borderColor: neutralBorderColor }}
+          >
             <WiredVariant
               countGuests={countLanGuests}
               countUsers={countLanUsers}