From f42facdea005089d64e19aabda021e022d83dcde Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 8 Jul 2024 19:51:21 -0400
Subject: [PATCH 1/3] Changed pagination to reflect Figma design

---
 Client/src/Components/MonitorTable/index.css | 55 ++++++++++--
 Client/src/Components/MonitorTable/index.jsx | 92 +++++++++++---------
 2 files changed, 98 insertions(+), 49 deletions(-)

diff --git a/Client/src/Components/MonitorTable/index.css b/Client/src/Components/MonitorTable/index.css
index f2d24252e..360526fc4 100644
--- a/Client/src/Components/MonitorTable/index.css
+++ b/Client/src/Components/MonitorTable/index.css
@@ -55,7 +55,7 @@
   border: solid 1px var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
 }
-.monitors .MuiTableFooter-root .MuiTableCell-root {
+.monitors .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root {
   border: none;
 }
 .monitors .MuiTableHead-root,
@@ -72,21 +72,64 @@
   color: var(--env-var-color-2);
 }
 .monitors .MuiTableHead-root span {
-  position: relative;
   display: inline-block;
-  height: 14px;
+  height: 17px;
   width: 20px;
   overflow: hidden;
-  margin-bottom: -3px;
+  margin-bottom: -2px;
   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);
 }
+
+.monitors .MuiPagination-root {
+  flex: 1;
+  margin-top: 35px;
+  border: solid 1px var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+  padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
+}
+.monitors .MuiPagination-root ul {
+  justify-content: center;
+}
+.monitors .MuiPagination-root ul li button {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
+  font-weight: 500;
+}
+.monitors .MuiPagination-root ul li:first-child {
+  margin-right: auto;
+}
+.monitors .MuiPagination-root ul li:last-child {
+  margin-left: auto;
+}
+.monitors .MuiPagination-root ul li:first-child button,
+.monitors .MuiPagination-root ul li:last-child button {
+  border: solid 1px var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+}
+.monitors .MuiPagination-root ul li:first-child button {
+  padding: 0 var(--env-var-spacing-1) 0 var(--env-var-spacing-1-plus);
+}
+.monitors .MuiPagination-root ul li:last-child button {
+  padding: 0 var(--env-var-spacing-1-plus) 0 var(--env-var-spacing-1);
+}
+.monitors .MuiPagination-root ul li:first-child button::after,
+.monitors .MuiPagination-root ul li:last-child button::before {
+  position: relative;
+  display: inline-block;
+}
+.monitors .MuiPagination-root ul li:first-child button::after {
+  content: "Previous";
+  margin-left: 15px;
+}
+.monitors .MuiPagination-root ul li:last-child button::before {
+  content: "Next";
+  margin-right: 15px;
+}
diff --git a/Client/src/Components/MonitorTable/index.jsx b/Client/src/Components/MonitorTable/index.jsx
index db1d90630..bf24fe8b3 100644
--- a/Client/src/Components/MonitorTable/index.jsx
+++ b/Client/src/Components/MonitorTable/index.jsx
@@ -1,7 +1,6 @@
 import "./index.css";
 import { useState } from "react";
 import PropTypes from "prop-types";
-import OpenIt from "../../assets/Images/Icon-open-in-tab-gray.png";
 import ResponseTimeChart from "../Charts/ResponseTimeChart";
 import {
   Table,
@@ -10,12 +9,14 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  TableFooter,
-  TablePagination,
   Paper,
+  Pagination,
+  PaginationItem,
 } from "@mui/material";
-import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
-import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react"
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 
 /**
  * Host component.
@@ -93,20 +94,15 @@ const Status = ({ params }) => {
  * @returns {React.Component} Returns a table with the monitor data.
  */
 const MonitorTable = ({ monitors = [] }) => {
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const [page, setPage] = useState(1);
+  const rowsPerPage = 5;
 
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
   const mappedRows = monitors
-    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+    .slice((page - 1) * rowsPerPage, page * rowsPerPage)
     .map((monitor) => {
       const params = {
         url: monitor.url,
@@ -144,36 +140,46 @@ const MonitorTable = ({ monitors = [] }) => {
     });
 
   return (
-    <TableContainer component={Paper}>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Host</TableCell>
-            <TableCell>
-              Status
-              <span>
-                <SouthRoundedIcon />
-              </span>
-            </TableCell>
-            <TableCell>Response Time</TableCell>
-            <TableCell>Actions</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>{mappedRows}</TableBody>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              rowsPerPageOptions={[5, 10, 25]}
-              count={monitors.length}
-              rowsPerPage={rowsPerPage}
-              page={page}
-              onPageChange={handleChangePage}
-              onRowsPerPageChange={handleChangeRowsPerPage}
-            />
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </TableContainer>
+    <>
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Host</TableCell>
+              <TableCell>
+                Status
+                <span>
+                  <ArrowDownwardRoundedIcon />
+                </span>
+              </TableCell>
+              <TableCell>Response Time</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>{mappedRows}</TableBody>
+        </Table>
+      </TableContainer>
+      <Pagination
+        count={Math.ceil(monitors?.length / rowsPerPage)}
+        page={page}
+        onChange={handleChangePage}
+        shape="rounded"
+        renderItem={(item) => (
+          <PaginationItem
+            slots={{
+              previous: ArrowBackRoundedIcon,
+              next: ArrowForwardRoundedIcon,
+            }}
+            {...item}
+            sx={{
+              "&:focus": {
+                outline: "none",
+              },
+            }}
+          />
+        )}
+      />
+    </>
   );
 };
 

From 30f7ecff82a6a40403ef44e212e8a52f97664044 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 8 Jul 2024 20:03:27 -0400
Subject: [PATCH 2/3] Fixed gap issue & added search svg

---
 Client/src/Components/TextFields/Search/SearchTextField.jsx | 4 ++--
 Client/src/Pages/Monitors/index.jsx                         | 1 -
 Client/src/assets/icons/search.svg                          | 3 +++
 3 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 Client/src/assets/icons/search.svg

diff --git a/Client/src/Components/TextFields/Search/SearchTextField.jsx b/Client/src/Components/TextFields/Search/SearchTextField.jsx
index 934a19943..7f7264faa 100644
--- a/Client/src/Components/TextFields/Search/SearchTextField.jsx
+++ b/Client/src/Components/TextFields/Search/SearchTextField.jsx
@@ -1,11 +1,11 @@
 import "./searchTextField.css";
 import React from "react";
-import Search from "../../../assets/Images/Icon-search-gray.png";
+import SearchSvg from "../../../assets/icons/search.svg?react";
 
 const SearchTextField = () => {
   return (
     <div className="search-field-holder">
-      <img className="search-field-icon" src={Search} alt="Search" />
+      <SearchSvg style={{ marginRight: "5px" }} />
       <input className="search-field" type="text" placeholder="Search" />
     </div>
   );
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 241ca4b10..a8f30623f 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -67,7 +67,6 @@ const Monitors = () => {
         </div>
         <div className="monitors-v-gaping" />
         <MonitorTable monitors={monitorState.monitors} />
-        <div className="monitors-v-gaping" />
       </div>
     </div>
   );
diff --git a/Client/src/assets/icons/search.svg b/Client/src/assets/icons/search.svg
new file mode 100644
index 000000000..a1bc74224
--- /dev/null
+++ b/Client/src/assets/icons/search.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 13L10.6667 10.6667M12.3333 6.66667C12.3333 9.79628 9.79628 12.3333 6.66667 12.3333C3.53705 12.3333 1 9.79628 1 6.66667C1 3.53705 3.53705 1 6.66667 1C9.79628 1 12.3333 3.53705 12.3333 6.66667Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 44465efd25e5d94f2bf694568342be72789a73a1 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 9 Jul 2024 01:40:45 -0400
Subject: [PATCH 3/3] Added offset fix

---
 Client/src/Components/MonitorTable/index.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/MonitorTable/index.jsx b/Client/src/Components/MonitorTable/index.jsx
index bf24fe8b3..977c6e918 100644
--- a/Client/src/Components/MonitorTable/index.jsx
+++ b/Client/src/Components/MonitorTable/index.jsx
@@ -94,7 +94,7 @@ const Status = ({ params }) => {
  * @returns {React.Component} Returns a table with the monitor data.
  */
 const MonitorTable = ({ monitors = [] }) => {
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState(0);
   const rowsPerPage = 5;
 
   const handleChangePage = (event, newPage) => {
@@ -102,7 +102,7 @@ const MonitorTable = ({ monitors = [] }) => {
   };
 
   const mappedRows = monitors
-    .slice((page - 1) * rowsPerPage, page * rowsPerPage)
+    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
     .map((monitor) => {
       const params = {
         url: monitor.url,
@@ -161,8 +161,8 @@ const MonitorTable = ({ monitors = [] }) => {
       </TableContainer>
       <Pagination
         count={Math.ceil(monitors?.length / rowsPerPage)}
-        page={page}
-        onChange={handleChangePage}
+        page={page + 1}
+        onChange={(event, value) => handleChangePage(event, value - 1)}
         shape="rounded"
         renderItem={(item) => (
           <PaginationItem