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,