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}

packages/widgets/src/network-controller/network-status/variants/stat-row.tsx

@@ -10,11 +10,11 @@ export const StatRow = ({
   compact?: boolean;
 }) => {
   return (
-    <Stack gap={0}>
-      <Text size={compact ? "xl" : "2xl"} fw={800} lh={1}>
+    <Stack gap={2} align="center" justify="center">
+      <Text size={compact ? "xl" : "2xl"} fw={800} lh={1} ta="center">
         {value}
       </Text>
-      <Text size={compact ? "sm" : "md"} c="dimmed">
+      <Text size={compact ? "sm" : "md"} c="dimmed" ta="center">
         {label}
       </Text>
     </Stack>

packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx

@@ -1,4 +1,4 @@
-import { Group, SimpleGrid, Text } from "@mantine/core";
+import { Center, Group, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconWifi } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
@@ -18,17 +18,19 @@ export const WifiVariant = ({
 }) => {
   const t = useI18n("widget.networkControllerStatus.card");
   return (
-    <>
-      <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>
-        <IconWifi size={24} />
+    <Stack h="100%" align="center" justify="center" gap={compact ? "sm" : "md"}>
+      <Group gap="xs" wrap="nowrap" justify="center">
+        <Center w={24} h={24}>
+          <IconWifi size={20} />
+        </Center>
         <Text size={"md"} fw={"bold"}>
           {t("variants.wifi.name")}
         </Text>
       </Group>
-      <SimpleGrid cols={horizontal ? 2 : 1} spacing={compact ? "sm" : "lg"}>
+      <SimpleGrid cols={horizontal ? 2 : 1} spacing={compact ? "sm" : "lg"} w="100%" maw={horizontal ? 360 : 220}>
         <StatRow label={t("users.label")} value={countUsers} compact={compact} />
         <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
       </SimpleGrid>
-    </>
+    </Stack>
   );
 };

packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx

@@ -1,4 +1,4 @@
-import { Group, SimpleGrid, Text } from "@mantine/core";
+import { Center, Group, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconNetwork } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
@@ -18,17 +18,19 @@ export const WiredVariant = ({
 }) => {
   const t = useI18n("widget.networkControllerStatus.card");
   return (
-    <>
-      <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>
-        <IconNetwork size={24} />
+    <Stack h="100%" align="center" justify="center" gap={compact ? "sm" : "md"}>
+      <Group gap="xs" wrap="nowrap" justify="center">
+        <Center w={24} h={24}>
+          <IconNetwork size={20} />
+        </Center>
         <Text size={"md"} fw={"bold"}>
           {t("variants.wired.name")}
         </Text>
       </Group>
-      <SimpleGrid cols={horizontal ? 2 : 1} spacing={compact ? "sm" : "lg"}>
+      <SimpleGrid cols={horizontal ? 2 : 1} spacing={compact ? "sm" : "lg"} w="100%" maw={horizontal ? 360 : 220}>
         <StatRow label={t("users.label")} value={countUsers} compact={compact} />
         <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
       </SimpleGrid>
-    </>
+    </Stack>
   );
 };