Fixed area chart tooltip

Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { AreaChart, Area, XAxis, Tooltip, ResponsiveContainer } from "recharts";
-import { Box, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import "./index.css";
 
@@ -16,14 +16,15 @@ const CustomToolTip = ({ active, payload, label }) => {
           border: 1,
           borderColor: theme.palette.border.dark,
           borderRadius: theme.shape.borderRadius,
-          py: theme.spacing(6),
-          px: theme.spacing(8),
+          py: theme.spacing(2),
+          px: theme.spacing(4),
         }}
       >
         <Typography
           sx={{
-            color: theme.palette.primary.main,
-            fontSize: 13,
+            color: theme.palette.text.tertiary,
+            fontSize: 12,
+            fontWeight: 500,
           }}
         >
           {new Date(label).toLocaleDateString("en-US", {
@@ -38,15 +39,39 @@ const CustomToolTip = ({ active, payload, label }) => {
               hour12: true, // AM/PM format
             })}
         </Typography>
-        <Typography
-          mt={theme.spacing(2.5)}
-          sx={{
-            color: theme.palette.text.secondary,
-            fontSize: 13,
-          }}
-        >
-          Response Time (ms): {payload[0].payload.originalResponseTime}
-        </Typography>{" "}
+        <Box mt={theme.spacing(1)}>
+          <Box
+            display="inline-block"
+            width={theme.spacing(4)}
+            height={theme.spacing(4)}
+            backgroundColor={theme.palette.primary.main}
+            sx={{ borderRadius: "50%" }}
+          />
+          <Stack
+            display="inline-flex"
+            direction="row"
+            justifyContent="space-between"
+            ml={theme.spacing(3)}
+            sx={{
+              "& span": {
+                color: theme.palette.text.tertiary,
+                fontSize: 11,
+                fontWeight: 500,
+              },
+            }}
+          >
+            <Typography component="span" sx={{ opacity: 0.8 }}>
+              Response Time
+            </Typography>{" "}
+            <Typography component="span">
+              {payload[0].payload.originalResponseTime}
+              <Typography component="span" sx={{ opacity: 0.8 }}>
+                {" "}
+                ms
+              </Typography>
+            </Typography>
+          </Stack>
+        </Box>
         {/* Display original value */}
       </Box>
     );
@@ -67,10 +92,10 @@ const MonitorDetailsAreaChart = ({ checks }) => {
   const theme = useTheme();
 
   return (
-    <ResponsiveContainer width="100%" height="100%">
+    <ResponsiveContainer width="100%" height={220}>
       <AreaChart
-        width={500}
-        height={400}
+        width="100%"
+        height="100%"
         data={checks}
         margin={{
           top: 10,
@@ -94,10 +119,12 @@ const MonitorDetailsAreaChart = ({ checks }) => {
           </linearGradient>
         </defs>
         <XAxis
+          stroke={theme.palette.border.dark}
           dataKey="createdAt"
           tickFormatter={formatDate}
           tick={{ fontSize: "13px" }}
           tickLine={false}
+          height={18}
         />
         <Tooltip content={<CustomToolTip />} />
         <Area

Client/src/Pages/Monitors/Details/index.jsx

@@ -474,7 +474,13 @@ const DetailsPage = ({ isAdmin }) => {
                     data={[{ response: monitor?.periodAvgResponseTime }]}
                   />
                 </ChartBox>
-                <ChartBox>
+                <ChartBox
+                  sx={{
+                    "& tspan": {
+                      fontSize: 11,
+                    },
+                  }}
+                >
                   <Stack>
                     <IconBox>
                       <ResponseTimeIcon />

Client/src/Pages/Monitors/Details/styled.jsx

@@ -16,11 +16,11 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
     fontSize: 15,
     fontWeight: 500,
   },
-  "& p": {
+  "& .MuiBox-root:not(.area-tooltip) p": {
     color: theme.palette.text.tertiary,
     fontSize: 13,
   },
-  "& span": {
+  "& .MuiBox-root > span": {
     color: theme.palette.text.primary,
     fontSize: 20,
     "& span": {