From f1fbbe2e3aa1079ff3d14fd3ec4277af8580880e Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 2 Sep 2024 20:43:27 -0400
Subject: [PATCH] Updated color values

---
 Client/src/Pages/Monitors/Details/index.jsx  | 22 ++++++++++++++++----
 Client/src/Pages/Monitors/Details/styled.jsx |  2 +-
 Client/src/Utils/Theme/darkTheme.js          | 12 +++++------
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index c6413e9fb..8aef758a0 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -346,9 +346,23 @@ const DetailsPage = ({ isAdmin }) => {
                 )}
               </Stack>
             </Stack>
-            <Stack direction="row" gap={theme.spacing(8)} maxWidth={712}>
-              <StatBox>
-                <Typography component="h2">up for</Typography>
+            <Stack direction="row" gap={theme.spacing(8)}>
+              <StatBox
+                sx={
+                  monitor?.status
+                    ? {
+                        backgroundColor: theme.palette.success.bg,
+                        borderColor: theme.palette.success.light,
+                        "& h2": { color: theme.palette.success.main },
+                      }
+                    : {
+                        backgroundColor: theme.palette.error.bg,
+                        borderColor: theme.palette.error.light,
+                        "& h2": { color: theme.palette.error.main },
+                      }
+                }
+              >
+                <Typography component="h2">active for</Typography>
                 <Typography>
                   {splitDuration(monitor?.uptimeDuration)}
                 </Typography>
@@ -448,7 +462,7 @@ const DetailsPage = ({ isAdmin }) => {
                       <AverageResponseIcon />
                     </IconBox>
                     <Typography component="h2">
-                      Average response time
+                      Average Response Time
                     </Typography>
                   </Stack>
                 </ChartBox>
diff --git a/Client/src/Pages/Monitors/Details/styled.jsx b/Client/src/Pages/Monitors/Details/styled.jsx
index 1862c1c4e..8e1ee9774 100644
--- a/Client/src/Pages/Monitors/Details/styled.jsx
+++ b/Client/src/Pages/Monitors/Details/styled.jsx
@@ -64,7 +64,7 @@ export const IconBox = styled(Box)(({ theme }) => ({
 export const StatBox = styled(Box)(({ theme }) => ({
   padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
   minWidth: 200,
-  flex: 1,
+  width: 225,
   border: 1,
   borderStyle: "solid",
   borderColor: theme.palette.border.light,
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index 657f071e4..eca445976 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -39,22 +39,22 @@ const darkTheme = createTheme({
     success: {
       text: "#079455",
       main: "#45bb7a",
-      light: "#1e1e1e",
-      bg: "#27272a",
+      light: "#1c4428",
+      bg: "#12261e",
     },
     error: {
       text: "#f04438",
       main: "#d32f2f",
-      light: "#1e1e1e",
-      bg: "#27272a",
+      light: "#542426",
+      bg: "#301a1f",
       dark: "#932020",
       border: "#f04438",
     },
     warning: {
       text: "#e88c30",
       main: "#FF9F00",
-      light: "#27272a",
-      bg: "#1E1E1E",
+      light: "#272115",
+      bg: "#624711",
       border: "#e88c30",
     },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },