Styling changes

Client/src/Components/MonitorTable/index.css

@@ -3,30 +3,32 @@
   align-items: center;
 }
 
-.host-open-icon {
+.host-row a {
   width: var(--env-var-img-width-2);
   height: var(--env-var-img-width-2);
-  margin-right: 8px;
+  color: var(--env-var-color-5);
+  margin-right: 10px;
+  margin-bottom: 2px;
+}
+.host-row a svg {
+  width: var(--env-var-font-size-large);
+  height: var(--env-var-font-size-large);
+}
+.host-row .host-percentage {
+  font-size: var(--env-var-font-size-small);
 }
 
 .host-name {
-  width: 100px;
-  font-size: var(--env-var-font-size-medium);
-  font-weight: bold;
-  margin-right: var(--env-var-spacing-1);
+  width: fit-content;
+  margin-right: 10px;
+  font-weight: 700;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
-.host-percentage {
-  font-size: var(--env-var-font-size-medium);
-}
-
 .host-status {
-  display: flex;
-  align-items: center;
-  height: 100%;
+  width: fit-content;
 }
 
 .host-status-details {
@@ -47,3 +49,44 @@
   border-radius: 50%;
   margin-right: calc(var(--env-var-spacing-1) / 2);
 }
+
+.monitors .MuiPaper-root:has(table.MuiTable-root) {
+  box-shadow: none;
+  border: solid 1px var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+}
+.monitors .MuiTableFooter-root .MuiTableCell-root {
+  border: none;
+}
+.monitors .MuiTableHead-root,
+.monitors .MuiTableRow-root:hover {
+  background-color: var(--env-var-color-13);
+}
+.monitors .MuiTableHead-root .MuiTableCell-root,
+.monitors .MuiTableBody-root .MuiTableCell-root {
+  font-size: var(--env-var-font-size-medium);
+}
+.monitors .MuiTableHead-root .MuiTableCell-root {
+  padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
+  font-weight: 500;
+  color: var(--env-var-color-2);
+}
+.monitors .MuiTableHead-root span {
+  position: relative;
+  display: inline-block;
+  height: 14px;
+  width: 20px;
+  overflow: hidden;
+  margin-bottom: -3px;
+  margin-left: 2px;
+}
+.monitors .MuiTableHead-root span svg {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+}
+.monitors .MuiTableBody-root .MuiTableCell-root {
+  color: var(--env-var-color-5);
+  padding: 6px var(--env-var-spacing-2);
+}

Client/src/Components/MonitorTable/index.jsx

@@ -14,6 +14,8 @@ import {
   TablePagination,
   Paper,
 } from "@mui/material";
+import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
+import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react"
 
 /**
  * Host component.
@@ -31,7 +33,7 @@ const Host = ({ params }) => {
   return (
     <div className="host-row">
       <a href={params.url} target="_blank">
-        <img className="host-open-icon" src={OpenIt} alt="OpenIt" />
+        <OpenInNewPage />
       </a>
       <div className="host-name">{params.title}</div>
       <div
@@ -66,7 +68,12 @@ const Status = ({ params }) => {
           className="host-status-dot"
           style={{ backgroundColor: params.statusDotColor }}
         />
-        <span className="host-status-text">{params.status}</span>
+        <span
+          className="host-status-text"
+          style={{ textTransform: "capitalize" }}
+        >
+          {params.status}
+        </span>
       </div>
     </div>
   );
@@ -142,9 +149,14 @@ const MonitorTable = ({ monitors = [] }) => {
         <TableHead>
           <TableRow>
             <TableCell>Host</TableCell>
-            <TableCell>Status</TableCell>
+            <TableCell>
+              Status
+              <span>
+                <SouthRoundedIcon />
+              </span>
+            </TableCell>
             <TableCell>Response Time</TableCell>
-            <TableCell>Action</TableCell>
+            <TableCell>Actions</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>{mappedRows}</TableBody>