Merge pull request #805 from bluewave-labs/fix/skeleton-color

Fixed dark mode skeleton color

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

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

@@ -3,7 +3,6 @@ import {
   BarChart,
   Bar,
   XAxis,
-  CartesianGrid,
   ResponsiveContainer,
   Cell,
   RadialBarChart,

Client/src/Utils/Theme/darkTheme.js

@@ -220,6 +220,13 @@ const darkTheme = createTheme({
         },
       },
     },
+    MuiSkeleton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#151518",
+        },
+      },
+    },
   },
   shape: {
     borderRadius: 2,

Client/src/Utils/Theme/lightTheme.js

@@ -216,6 +216,13 @@ const lightTheme = createTheme({
         },
       },
     },
+    MuiSkeleton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#f2f4f7",
+        },
+      },
+    },
   },
   shape: {
     borderRadius: 2,

Client/src/index.css

@@ -90,10 +90,6 @@ body {
   display: none;
 }
 
-body .MuiSkeleton-root {
-  background-color: #f2f4f7;
-}
-
 @keyframes ripple {
   from {
     opacity: 1;