Better layout

src/components/dashboard/ServiceCard.tsx

@@ -10,6 +10,9 @@ import Tooltip from "@mui/material/Tooltip";
 import Chip from "@mui/material/Chip";
 import Grid from "@mui/material/Unstable_Grid2";
 import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Avatar from "@mui/material/Avatar";
+import { green, red } from "@mui/material/colors";
 
 interface ServiceCardProps {
     service: Service;
@@ -50,11 +53,15 @@ interface ServiceNodePropps {
 function ServiceNode({ node }: ServiceNodePropps) {
     const nodeName = node.health_check_status?.status_ok ? (
         <Tooltip title={`Node ${node.name} is healthy`}>
-            <Chip label={node.name} color="success" className="node-name" />
+            <Avatar sx={{ bgcolor: green["700"] }} variant="square" className="node-name">
+                {node.name}
+            </Avatar>
         </Tooltip>
     ) : (
         <Tooltip title={node.health_check_status?.message}>
-            <Chip label={node.name} color="error" className="node-name" />
+            <Avatar sx={{ bgcolor: red[900] }} variant="square" className="node-name">
+                {node.name}
+            </Avatar>
         </Tooltip>
     );
 
@@ -88,21 +95,18 @@ function ServiceNode({ node }: ServiceNodePropps) {
         }
     }
 
+    const nodeUrl = node.url.replace("http://", "").replace("https://", "");
+
     return (
-        <Grid container spacing={2} className="service-node" sx={{ alignItems: "center" }}>
-            <Grid xs={2}>{nodeName}</Grid>
-            <Grid xs={6}>
+        <Stack direction="row" className="service-node">
+            <Box>{nodeName}</Box>
+            <Box>
                 <Typography className="version">{node.app_details?.app_version || "no version"}</Typography>
-            </Grid>
-            <Grid xs={4} sx={{ textAlign: "right" }} className="status">
-                <Tooltip title={node.url}>
-                    <IconButton target="_blank" href={node.url} className="docs-url">
-                        <LaunchIcon />
-                    </IconButton>
-                </Tooltip>
-                {tenantsStatusContent}
-            </Grid>
-        </Grid>
+                <Link href={node.url} target="_blank">
+                    {nodeUrl}
+                </Link>
+            </Box>
+        </Stack>
     );
 }