From 723b1750e99fffbe57024d0aace2afc6e4869036 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 7 Sep 2024 13:08:38 -0400
Subject: [PATCH] Fixed minor bugs and updated area tooltip styling

---
 .../Components/Charts/MonitorDetailsAreaChart/index.jsx   | 8 ++++++--
 Client/src/Components/Sidebar/index.jsx                   | 2 +-
 Client/src/Pages/Monitors/Home/index.jsx                  | 3 +--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index 121200acf..fd28b6e7e 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -9,8 +9,8 @@ import {
 } from "recharts";
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
+import { useMemo } from "react";
 import "./index.css";
-import React, { useMemo } from "react";
 
 const CustomToolTip = ({ active, payload, label }) => {
   const theme = useTheme();
@@ -143,13 +143,17 @@ const MonitorDetailsAreaChart = ({ checks }) => {
           tickLine={false}
           height={18}
         />
-        <Tooltip content={<CustomToolTip />} />
+        <Tooltip
+          cursor={{ stroke: theme.palette.border.light }}
+          content={<CustomToolTip />}
+        />
         <Area
           type="monotone"
           dataKey="responseTime"
           stroke={theme.palette.primary.main}
           fill="url(#colorUv)"
           strokeWidth={1.5}
+          activeDot={{ stroke: theme.palette.background.main, r: 5 }}
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 27fb35329..c95157449 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -93,7 +93,7 @@ function Sidebar() {
   const { user } = useSelector((state) => state.auth);
 
   // Remove demo password if demo
-  if (user.role.includes("demo")) {
+  if (user.role?.includes("demo")) {
     menu[3].nested = menu[3].nested.filter((item) => {
       return item.name !== "Password";
     });
diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx
index 9bc4496db..accc758e9 100644
--- a/Client/src/Pages/Monitors/Home/index.jsx
+++ b/Client/src/Pages/Monitors/Home/index.jsx
@@ -110,8 +110,7 @@ const Monitors = ({ isAdmin }) => {
                     borderColor={theme.palette.border.light}
                     backgroundColor={theme.palette.background.accent}
                   >
-                    {monitorState?.monitorsSummary?.monitors?.monitors
-                      ?.length || 0}
+                    {monitorState?.monitorsSummary?.monitorCounts?.total || 0}
                   </Box>
                   {/* TODO - add search bar */}
                 </Stack>