From c2b47e5cc41eb58102e2baad1332db774579910b Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Tue, 2 Jul 2024 20:24:51 -0700
Subject: [PATCH] Placed the TableContainer in a box to better match figma
 design.

---
 Client/src/Pages/Incidents/index.jsx | 73 ++++++++++++++++------------
 1 file changed, 43 insertions(+), 30 deletions(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index a2cb59517..54e857b0d 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -1,4 +1,4 @@
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
@@ -6,12 +6,12 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
 import { StatusLabel } from "../../Components/Label/";
 
-
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
-    backgroundColor: theme.palette.action.hover, 
+    backgroundColor: theme.palette.action.hover,
     color: theme.palette.common.black,
   },
   [`&.${tableCellClasses.body}`]: {
@@ -21,18 +21,18 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
 
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
   '&:nth-of-type(1)': {
-    backgroundColor: theme.palette.action.hover, 
+    backgroundColor: theme.palette.action.hover,
   },
   '&:nth-of-type(n+1)': {
-    backgroundColor: theme.palette.common.white, 
+    backgroundColor: theme.palette.common.white,
   },
   '&:last-child td, &:last-child th': {
     border: 0,
   },
 }));
 
-function createData(name, calories, fat, carbs, protein) {
-  return { name, calories, fat, carbs, protein };
+function createData(name, date, message) {
+  return { name, date, message };
 }
 
 const rows = [
@@ -43,30 +43,43 @@ const rows = [
   createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
 ];
 
-
 export default function CustomizedTables() {
+  const theme = useTheme();
+
   return (
-    <TableContainer component={Paper}>
-      <Table sx={{ minWidth: 700 }} aria-label="customized table">
-        <TableHead>
-          <TableRow>
-            <StyledTableCell>Status</StyledTableCell>
-            <StyledTableCell align="right">Date & Time</StyledTableCell>
-            <StyledTableCell align="right">Message</StyledTableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((row, index) => (
-            <StyledTableRow key={index}>
-              <StyledTableCell component="th" scope="row">
-                {row.name}
-              </StyledTableCell>
-              <StyledTableCell align="right">{row.calories}</StyledTableCell>
-              <StyledTableCell align="right">{row.fat}</StyledTableCell>
-            </StyledTableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <Box
+      sx={{
+        marginTop: theme.spacing(4),
+        marginX: 'auto',
+        width: '80%',
+        paddingX: theme.spacing(6),
+        [theme.breakpoints.down('md')]: {
+          width: '100%',
+        },
+      }}
+    >
+      <TableContainer component={Paper}>
+        <Table sx={{ minWidth: 700 }} aria-label="customized table">
+          <TableHead>
+            <TableRow>
+              <StyledTableCell>Status</StyledTableCell>
+              <StyledTableCell align="right">Date & Time</StyledTableCell>
+              <StyledTableCell align="right">Message</StyledTableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row, index) => (
+              <StyledTableRow key={index}>
+                <StyledTableCell component="th" scope="row">
+                  {row.name}
+                </StyledTableCell>
+                <StyledTableCell align="right">{row.date}</StyledTableCell>
+                <StyledTableCell align="right">{row.message}</StyledTableCell>
+              </StyledTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
   );
 }