From 5afe21767b020b0371c2690cdbb16f73c7b13711 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 5 Sep 2024 13:45:25 -0400
Subject: [PATCH] Fixed dark mode skeleton color

---
 .../Charts/MonitorDetailsAreaChart/index.jsx     | 16 +++++++++++++++-
 .../src/Pages/Monitors/Details/Charts/index.jsx  |  1 -
 Client/src/Utils/Theme/darkTheme.js              |  7 +++++++
 Client/src/Utils/Theme/lightTheme.js             |  7 +++++++
 Client/src/index.css                             |  4 ----
 5 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index 68fdb1cd4..4773b683c 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -1,5 +1,12 @@
 import PropTypes from "prop-types";
-import { AreaChart, Area, XAxis, Tooltip, ResponsiveContainer } from "recharts";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  Tooltip,
+  CartesianGrid,
+  ResponsiveContainer,
+} from "recharts";
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import "./index.css";
@@ -104,6 +111,13 @@ const MonitorDetailsAreaChart = ({ checks }) => {
           bottom: 0,
         }}
       >
+        <CartesianGrid
+          stroke={theme.palette.border.light}
+          strokeWidth={1}
+          strokeOpacity={1}
+          fill="transparent"
+          vertical={false}
+        />
         <defs>
           <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
             <stop
diff --git a/Client/src/Pages/Monitors/Details/Charts/index.jsx b/Client/src/Pages/Monitors/Details/Charts/index.jsx
index 1d0bb3bf2..5762d301a 100644
--- a/Client/src/Pages/Monitors/Details/Charts/index.jsx
+++ b/Client/src/Pages/Monitors/Details/Charts/index.jsx
@@ -3,7 +3,6 @@ import {
   BarChart,
   Bar,
   XAxis,
-  CartesianGrid,
   ResponsiveContainer,
   Cell,
   RadialBarChart,
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index 71955b83e..e54d9eaf4 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -220,6 +220,13 @@ const darkTheme = createTheme({
         },
       },
     },
+    MuiSkeleton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#151518",
+        },
+      },
+    },
   },
   shape: {
     borderRadius: 2,
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index 4d554c54c..60a8e0b2d 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -216,6 +216,13 @@ const lightTheme = createTheme({
         },
       },
     },
+    MuiSkeleton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#f2f4f7",
+        },
+      },
+    },
   },
   shape: {
     borderRadius: 2,
diff --git a/Client/src/index.css b/Client/src/index.css
index 740a22b7a..1f3b9bee2 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -90,10 +90,6 @@ body {
   display: none;
 }
 
-body .MuiSkeleton-root {
-  background-color: #f2f4f7;
-}
-
 @keyframes ripple {
   from {
     opacity: 1;