diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index f501c6f4e..6ca18a1e9 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -22,12 +22,15 @@ import { StatusLabel } from "../../../Components/Label";
import { logger } from "../../../Utils/Logger";
import { useTheme } from "@emotion/react";
import { formatDateWithTz } from "../../../Utils/timeUtils";
+import PlaceholderLight from "../../../assets/Images/data_placeholder.svg?react";
+import PlaceholderDark from "../../../assets/Images/data_placeholder_dark.svg?react";
const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
const uiTimezone = useSelector((state) => state.ui.timezone);
const theme = useTheme();
const { authToken, user } = useSelector((state) => state.auth);
+ const mode = useSelector((state) => state.ui.mode);
const [checks, setChecks] = useState([]);
const [checksCount, setChecksCount] = useState(0);
const [paginationController, setPaginationController] = useState({
@@ -130,12 +133,18 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
<>
{checks?.length === 0 && selectedMonitor === "0" ? (
+
+ {mode === "light" ? : }
+
No incidents recorded yet.
) : checks?.length === 0 ? (
+
+ {mode === "light" ? : }
+
The monitor you have selected has no recorded incidents yet.
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index f70703828..4e7a37c6d 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -7,8 +7,8 @@ import { networkService } from "../../main";
import { useTheme } from "@emotion/react";
import Select from "../../Components/Inputs/Select";
import IncidentTable from "./IncidentTable";
-import "./index.css";
import SkeletonLayout from "./skeleton";
+import "./index.css";
const Incidents = () => {
const theme = useTheme();
@@ -36,7 +36,6 @@ const Incidents = () => {
null,
null
);
- console.log(res.data.data);
// Reduce to a lookup object for 0(1) lookup
if (res?.data?.data?.monitors?.length > 0) {
const monitorLookup = res.data.data.monitors.reduce((acc, monitor) => {
diff --git a/Client/src/Pages/Monitors/Home/fallback.jsx b/Client/src/Pages/Monitors/Home/fallback.jsx
index 088368b66..072677faa 100644
--- a/Client/src/Pages/Monitors/Home/fallback.jsx
+++ b/Client/src/Pages/Monitors/Home/fallback.jsx
@@ -1,25 +1,33 @@
-import { Button, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import PlaceholderLight from "../../../assets/Images/data_placeholder.svg?react";
+import PlaceholderDark from "../../../assets/Images/data_placeholder_dark.svg?react";
import PropTypes from "prop-types";
const Fallback = ({ isAdmin }) => {
const theme = useTheme();
const navigate = useNavigate();
+ const mode = useSelector((state) => state.ui.mode);
return (
+
+ {mode === "light" ? : }
+
- No monitors found
+ No monitors found to display
It looks like you don’t have any monitors set up yet.
diff --git a/Client/src/assets/Images/data_placeholder.svg b/Client/src/assets/Images/data_placeholder.svg
new file mode 100644
index 000000000..bf840b95f
--- /dev/null
+++ b/Client/src/assets/Images/data_placeholder.svg
@@ -0,0 +1,19 @@
+
diff --git a/Client/src/assets/Images/data_placeholder_dark.svg b/Client/src/assets/Images/data_placeholder_dark.svg
new file mode 100644
index 000000000..7e2a811d5
--- /dev/null
+++ b/Client/src/assets/Images/data_placeholder_dark.svg
@@ -0,0 +1,19 @@
+