Updated color values

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>

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,

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" },