Updated monitor table link element and monitor details settings icon

Client/src/Pages/Monitors/Details/index.jsx

@@ -12,7 +12,7 @@ import Button from "../../../Components/Button";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
-import SettingsIcon from "../../../assets/icons/settings.svg?react";
+import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import {
   formatDuration,
   formatDurationRounded,
@@ -203,7 +203,11 @@ const DetailsPage = () => {
             level="tertiary"
             label="Configure"
             animate="rotate90"
-            img={<SettingsIcon />}
+            img={
+              <SettingsIcon
+                style={{ width: theme.gap.mlplus, height: theme.gap.mlplus }}
+              />
+            }
             onClick={() => navigate(`/monitors/configure/${monitorId}`)}
             sx={{
               ml: "auto",

Client/src/Pages/Monitors/index.css

@@ -9,7 +9,7 @@
 .monitors h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
 }
-.monitors .MuiStack-root > button {
+.monitors .MuiStack-root > button:not(.MuiIconButton-root) {
   font-size: var(--env-var-font-size-medium);
   height: var(--env-var-height-2);
   min-width: fit-content;

Client/src/Pages/Monitors/index.jsx

@@ -41,16 +41,26 @@ import {
 const Host = ({ params }) => {
   return (
     <Stack direction="row" alignItems="center" className="host">
-      <a
-        href={params.url}
-        target="_blank"
-        rel="noreferrer"
+      <IconButton
+        aria-label="monitor link"
         onClick={(event) => {
           event.stopPropagation();
+          window.open(params.url, "_blank", "noreferrer");
+        }}
+        sx={{
+          "&:focus": {
+            outline: "none",
+          },
+          mr: "3px",
         }}
       >
-        <OpenInNewPage />
-      </a>
+        <OpenInNewPage
+          style={{
+            marginTop: "-1px",
+            marginRight: "-1px",
+          }}
+        />
+      </IconButton>
       <Box>
         {params.title}
         <Typography component="span" sx={{ color: params.percentageColor }}>

Client/src/assets/icons/open-in-new-page.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13 5L13 1M13 1H9M13 1L7.66667 6.33333M5.66667 2.33333H4.2C3.0799 2.33333 2.51984 2.33333 2.09202 2.55132C1.71569 2.74307 1.40973 3.04903 1.21799 3.42535C1 3.85318 1 4.41323 1 5.53333V9.8C1 10.9201 1 11.4802 1.21799 11.908C1.40973 12.2843 1.71569 12.5903 2.09202 12.782C2.51984 13 3.0799 13 4.2 13H8.46667C9.58677 13 10.1468 13 10.5746 12.782C10.951 12.5903 11.2569 12.2843 11.4487 11.908C11.6667 11.4802 11.6667 10.9201 11.6667 9.8V8.33333" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>