From d954b5876611570a311656e4c0974565d7fe30ad Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Fri, 28 Jun 2024 17:42:28 -0700
Subject: [PATCH] Added styling to the labels.

---
 Client/src/Components/Label/index.jsx |  7 +++++--
 Client/src/Pages/Incidents/index.jsx  | 11 ++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx
index c47b53cb8..984b45da2 100644
--- a/Client/src/Components/Label/index.jsx
+++ b/Client/src/Components/Label/index.jsx
@@ -124,7 +124,7 @@ ColoredLabel.propTypes = {
  * <StatusLabel status="Active" />
  */
 
-const StatusLabel = ({ status }) => {
+const StatusLabel = ({ status, customStyles }) => {
   const theme = useTheme();
 
   const colorLookup = {
@@ -132,13 +132,15 @@ const StatusLabel = ({ status }) => {
     Waiting: theme.palette.labelRed.color,
     New: theme.palette.labelOrange.color,
     Active: theme.palette.labelGreen.color,
+    Down: theme.palette.error.main,  // Assuming theme.palette.error.main is red
+    
   };
 
   // Look up the color for the status, default to labelGray if not found
   const color = colorLookup[status] || theme.palette.labelGray.color;
 
   return (
-    <BaseLabel label={status}>
+    <BaseLabel label={status} styles={customStyles}>
       <Box
         width={12}
         height={12}
@@ -152,6 +154,7 @@ const StatusLabel = ({ status }) => {
 
 StatusLabel.propTypes = {
   status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
+  customStyles: PropTypes.object,
 };
 
 export { ColoredLabel, StatusLabel };
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 31840c915..9246b882f 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -36,13 +36,14 @@ function createData(name, calories, fat, carbs, protein) {
 }
 
 const rows = [
-  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
-  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
-  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
-  createData(<StatusLabel status="Cannot resolve" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
-  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
+  createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
+  createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
+  createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
+  createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
+  createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
 ];
 
+
 export default function CustomizedTables() {
   return (
     <TableContainer component={Paper}>