Merge pull request #294 from bluewave-labs/feat/table-style

Table styling changes. resolves #290

Client/src/Components/Charts/Servers/serverStatus.css

@@ -12,7 +12,7 @@
 }
 
 .server-status-tile {
-  min-width: 310px;
+  min-width: 250px;
   width: calc(100% - 310px);
   padding: var(--spacing-general-1);
   border: 1px solid var(--color-border-0);

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>

Client/src/Pages/Monitors/index.css

@@ -1,7 +1,6 @@
 .monitors,
 .new-monitor {
   width: 70vw;
-  padding: 4vw;
 }
 
 .monitors {
@@ -9,13 +8,13 @@
 }
 
 .monitors-bar {
-  margin-top: calc(2 * var(--env-var-spacing-2));
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .monitors-bar-title {
+  color: var(--env-var-color-1);
   font-size: 24px;
   font-weight: 700;
 }

Client/src/Pages/Monitors/index.jsx

@@ -8,8 +8,10 @@ import Button from "../../Components/Button";
 import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import SearchTextField from "../../Components/TextFields/Search/SearchTextField";
 import MonitorTable from "../../Components/MonitorTable";
+import { useTheme } from "@emotion/react";
 
 const Monitors = () => {
+  const theme = useTheme();
   const navigate = useNavigate();
   const monitorState = useSelector((state) => state.monitors);
   const authState = useSelector((state) => state.auth);
@@ -25,7 +27,12 @@ const Monitors = () => {
 
   const down = monitorState.monitors.length - up;
   return (
-    <div className="monitors">
+    <div
+      className="monitors"
+      style={{
+        padding: `${theme.content.pY} ${theme.content.pX}`,
+      }}
+    >
       <div className="monitors-bar">
         <div className="monitors-bar-title">
           Hello, {authState.user.firstname}
@@ -36,7 +43,7 @@ const Monitors = () => {
           onClick={() => {
             navigate("/monitors/create");
           }}
-          sx={{ padding: "10px 20px", fontSize: "13px" }}
+          sx={{ padding: "6px 25px", fontSize: "13px" }}
         />
       </div>
 

Client/src/Pages/Monitors/monitors.css

@@ -7,6 +7,7 @@
 
 .current-monitors-title-holder {
   display: flex;
+  align-items: center;
 }
 
 .current-monitors-bar {
@@ -18,16 +19,22 @@
   font-size: 1rem;
   font-weight: bold;
   margin-right: var(--env-var-spacing-1);
+  color: var(--env-var-color-1);
 }
 
 .current-monitors-counter {
-  width: var(--env-var-spacing-2);
-  height: var(--env-var-spacing-2);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px;
+  min-width: 22px;
+  min-height: 22px;
   background-color: var(--env-var-color-15);
   border: 1px solid var(--env-var-color-6);
   border-radius: 50%;
-  text-align: center;
-  align-items: center;
+  font-size: var(--env-var-font-size-medium);
+  font-weight: 500;
+  color: var(--env-var-color-5);
 }
 
 .monitors-v-gaping {

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

@@ -0,0 +1,3 @@
+<svg width="14" height="14" 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>