@localstack/appinspector-ui 1.0.28 → 1.0.30

package/dist/index.js

@@ -149,7 +149,7 @@ var ResponsiveTimestampCell = ({ locale, value }) => {
 };
 
 // src/components/cells/service-cell.tsx
-import { Box as Box3, Divider, Typography } from "@mui/material";
+import { Box as Box3, Divider, Typography, useTheme } from "@mui/material";
 
 // src/components/aws-service-icon/aws-service-icon.tsx
 import { Tooltip as Tooltip2 } from "@mui/material";
@@ -2504,10 +2504,10 @@ import { Box as Box2 } from "@mui/material";
 import { jsx as jsx124 } from "react/jsx-runtime";
 var PillCell = ({
   backgroundColor,
-  borderColor,
-  borderWidth = "1px",
   children,
   height = "24px",
+  outlineColor,
+  outlineWidth = "1px",
   paddingBottom,
   paddingTop
 }) => {
@@ -2517,13 +2517,13 @@ var PillCell = ({
       sx: {
         alignItems: "center",
         backgroundColor: backgroundColor ?? ((theme) => theme.palette.background.paper),
-        borderColor: borderColor ?? ((theme) => theme.palette.divider),
         borderRadius: "16px",
-        borderStyle: "solid",
-        borderWidth,
         display: "inline-flex",
         height: paddingTop || paddingBottom ? "auto" : height,
         maxWidth: "100%",
+        outlineColor: outlineColor ?? ((theme) => theme.palette.divider),
+        outlineStyle: "solid",
+        outlineWidth,
         ...paddingTop && { paddingTop },
         ...paddingBottom && { paddingBottom },
         overflow: "hidden"
@@ -2543,9 +2543,10 @@ var ServiceCell = ({
   showIcon = true,
   width = "32px"
 }) => {
-  const borderColor = selected ? "text.primary" : "background.dark";
-  const borderWidth = selected ? "2px" : void 0;
-  return /* @__PURE__ */ jsx125(Box3, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs119(PillCell, { borderColor, borderWidth, height, children: [
+  const theme = useTheme();
+  const outlineColor = selected ? theme.palette.primary.light : theme.palette.text.secondary;
+  const outlineWidth = selected ? "2px" : void 0;
+  return /* @__PURE__ */ jsx125(Box3, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs119(PillCell, { height, outlineColor, outlineWidth, children: [
     showIcon ? /* @__PURE__ */ jsxs119(Fragment2, { children: [
       /* @__PURE__ */ jsx125(
         Box3,
@@ -4422,7 +4423,7 @@ function renderKeyValue(key, value) {
 
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
-import { Alert as Alert3, Button as Button4 } from "@mui/material";
+import { Alert as Alert3, Button as Button4, useTheme as useTheme2 } from "@mui/material";
 import { Background, ReactFlow, useReactFlow as useReactFlow2 } from "@xyflow/react";
 import { useCallback as useCallback6, useEffect as useEffect6, useState as useState9 } from "react";
 
@@ -4864,6 +4865,7 @@ var TraceGraph = ({
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
+  const theme = useTheme2();
   return /* @__PURE__ */ jsxs132(Fragment7, { children: [
     spans.error && /* @__PURE__ */ jsxs132(
       Alert3,
@@ -4894,7 +4896,13 @@ var TraceGraph = ({
         selectNodesOnDrag: false,
         children: [
           /* @__PURE__ */ jsx142(Controls, {}),
-          /* @__PURE__ */ jsx142(Background, {})
+          /* @__PURE__ */ jsx142(
+            Background,
+            {
+              bgColor: theme.palette.background.paper,
+              color: theme.palette.text.disabled
+            }
+          )
         ]
       }
     )