Increase stroke width on hover

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

@@ -10,7 +10,7 @@ import {
 } from "recharts";
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
 import "./index.css";
@@ -112,6 +112,7 @@ CustomTick.propTypes = {
 const MonitorDetailsAreaChart = ({ checks }) => {
   const theme = useTheme();
   const memoizedChecks = useMemo(() => checks, [checks[0]]);
+  const [isHovered, setIsHovered] = useState(false);
 
   return (
     <ResponsiveContainer width="100%" minWidth={25} height={220}>
@@ -125,6 +126,8 @@ const MonitorDetailsAreaChart = ({ checks }) => {
           left: 0,
           bottom: 0,
         }}
+        onMouseMove={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
         <CartesianGrid
           stroke={theme.palette.border.light}
@@ -160,13 +163,14 @@ const MonitorDetailsAreaChart = ({ checks }) => {
         <Tooltip
           cursor={{ stroke: theme.palette.border.light }}
           content={<CustomToolTip />}
+          wrapperStyle={{ pointerEvents: "none" }}
         />
         <Area
           type="monotone"
           dataKey="responseTime"
           stroke={theme.palette.primary.main}
           fill="url(#colorUv)"
-          strokeWidth={1.5}
+          strokeWidth={isHovered ? 2.5 : 1.5}
           activeDot={{ stroke: theme.palette.background.main, r: 5 }}
         />
       </AreaChart>

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

@@ -41,6 +41,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
   },
   "& path": {
     transition: "fill 300ms ease",
+    transition: "stroke-width 400ms ease",
   },
 }));
 

Client/src/Pages/Monitors/utils.jsx

@@ -40,9 +40,9 @@ const useUtils = () => {
       "& h2": { color: theme.palette.error.main },
     },
     paused: {
-      backgroundColor: theme.palette.warning.light,
-      background: `linear-gradient(340deg, ${theme.palette.warning.dark} -60%, ${theme.palette.warning.light} 35%)`,
-      borderColor: theme.palette.warning.dark,
+      backgroundColor: theme.palette.warning.bg,
+      background: `linear-gradient(340deg, ${theme.palette.warning.light} -60%, ${theme.palette.warning.bg} 35%)`,
+      borderColor: theme.palette.warning.light,
       "& h2": { color: theme.palette.warning.main },
     },
     pending: {

Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx

@@ -9,7 +9,7 @@ import {
   Text,
 } from "recharts";
 import { useTheme } from "@emotion/react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Box, Stack, Typography } from "@mui/material";
 import { formatDateWithTz } from "../../../../Utils/timeUtils";
 import { useSelector } from "react-redux";
@@ -215,6 +215,7 @@ CustomTick.propTypes = {
 
 const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => {
   const theme = useTheme();
+  const [isHovered, setIsHovered] = useState(false);
   const memoizedData = useMemo(
     () => processDataWithGaps(data, interval),
     [data[0]]
@@ -234,6 +235,8 @@ const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => {
         height="100%"
         data={memoizedData}
         margin={{ top: 10 }}
+        onMouseMove={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
         <CartesianGrid
           stroke={theme.palette.border.light}
@@ -281,7 +284,7 @@ const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => {
               dataKey={key}
               stackId={1}
               stroke={strokeColor}
-              strokeWidth={1.5}
+              strokeWidth={isHovered ? 2.5 : 1.5}
               fill={`url(#${filteredConfig[key].id})`}
               activeDot={{ stroke: bgColor, fill: strokeColor, r: 4.5 }}
             />

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

@@ -36,6 +36,9 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
     backgroundColor: theme.palette.background.main,
     background: `linear-gradient(325deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`,
   },
+  "& path": {
+    transition: "stroke-width 400ms ease",
+  },
 }));
 
 export const IconBox = styled(Box)(({ theme }) => ({

Client/src/Pages/PageSpeed/card.jsx

@@ -13,12 +13,9 @@ import {
   Tooltip,
 } from "recharts";
 import { useSelector } from "react-redux";
-import {
-  formatDateWithTz,
-  formatDurationRounded,
-  formatDurationSplit,
-} from "../../Utils/timeUtils";
+import { formatDateWithTz, formatDurationSplit } from "../../Utils/timeUtils";
 import useUtils from "../Monitors/utils";
+import { useState } from "react";
 
 /**
  * CustomToolTip displays a tooltip with formatted date and score information.
@@ -127,6 +124,7 @@ const processData = (data) => {
  */
 const PagespeedAreaChart = ({ data, status }) => {
   const theme = useTheme();
+  const [isHovered, setIsHovered] = useState(false);
   const { pagespeedStyles } = useUtils();
 
   const formattedData = processData(data);
@@ -139,6 +137,8 @@ const PagespeedAreaChart = ({ data, status }) => {
         data={formattedData}
         margin={{ top: 10, bottom: -5 }}
         style={{ cursor: "pointer" }}
+        onMouseMove={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
         <CartesianGrid
           stroke={theme.palette.border.light}
@@ -174,7 +174,7 @@ const PagespeedAreaChart = ({ data, status }) => {
         <Area
           dataKey="score"
           stroke={pagespeedStyles[status].stroke}
-          strokeWidth={1.5}
+          strokeWidth={isHovered ? 2.5 : 1.5}
           fill={`url(#pagespeed-chart-${status})`}
           activeDot={{
             stroke: pagespeedStyles[status].light,
@@ -230,6 +230,9 @@ const Card = ({ monitor }) => {
           "&:hover": {
             backgroundColor: theme.palette.background.accent,
           },
+          "& path": {
+            transition: "stroke-width 400ms ease",
+          },
         }}
       >
         <IconBox>