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>
     );
 }
 

src/scss/_service-card.scss

@@ -3,7 +3,7 @@ $color-warning: #ed6c02;
 $color-danger: #d32f2f;
 
 .service-card {
-    width: 400px;
+    width: 450px;
     .service-title-container {
         color: white;
         background-color: #15232d;
@@ -29,8 +29,15 @@ $color-danger: #d32f2f;
     }
 
     .service-node {
+        align-items: center;
+        gap: 1rem;
+
         .node-name {
             font-weight: bold;
+            border-radius: 10px;
+        }
+        .version {
+            font-weight: bold;
         }
         .status {
             display: flex;
@@ -42,6 +49,9 @@ $color-danger: #d32f2f;
                 margin-left: 0.5rem;
             }
         }
+        a {
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+        }
     }
 
     .MuiCardContent-root {