From 82cbb902027fd69c87704af8df3a07ff6d8615e5 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 30 Aug 2024 14:11:48 -0400
Subject: [PATCH 1/3] Added dark mode fallback placeholder skeleton

---
 Client/src/Components/Fallback/index.jsx      | 11 ++++--
 Client/src/Components/Inputs/Select/index.jsx |  1 +
 Client/src/Pages/Monitors/Configure/index.jsx |  8 +----
 .../assets/Images/create-placeholder-dark.svg | 36 +++++++++++++++++++
 4 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 Client/src/assets/Images/create-placeholder-dark.svg

diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx
index 22ac837b0..26d818bdf 100644
--- a/Client/src/Components/Fallback/index.jsx
+++ b/Client/src/Components/Fallback/index.jsx
@@ -2,10 +2,12 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
 import Skeleton from "../../assets/Images/create-placeholder.svg?react";
+import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
 import Button from "../Button";
 import Check from "../Check/Check";
 import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
 import "./index.css";
 
 /**
@@ -22,6 +24,7 @@ import "./index.css";
 const Fallback = ({ title, checks, link = "/", isAdmin }) => {
   const theme = useTheme();
   const navigate = useNavigate();
+  const mode = useSelector((state) => state.ui.mode);
 
   return (
     <Stack
@@ -29,7 +32,11 @@ const Fallback = ({ title, checks, link = "/", isAdmin }) => {
       alignItems="center"
       gap={theme.spacing(20)}
     >
-      <Skeleton style={{ zIndex: 1 }} />
+      {mode === "light" ? (
+        <Skeleton style={{ zIndex: 1 }} />
+      ) : (
+        <SkeletonDark style={{ zIndex: 1 }} />
+      )}
       <Box
         className="background-pattern-svg"
         sx={{
@@ -44,7 +51,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin }) => {
         <Typography
           component="h1"
           marginY={theme.spacing(4)}
-          color={theme.palette.text.secondary}
+          color={theme.palette.text.tertiary}
         >
           A {title} is used to:
         </Typography>
diff --git a/Client/src/Components/Inputs/Select/index.jsx b/Client/src/Components/Inputs/Select/index.jsx
index b7146f27a..e30b5d951 100644
--- a/Client/src/Components/Inputs/Select/index.jsx
+++ b/Client/src/Components/Inputs/Select/index.jsx
@@ -67,6 +67,7 @@ const Select = ({
           component="h3"
           color={theme.palette.text.secondary}
           fontWeight={500}
+          fontSize={13}
         >
           {label}
         </Typography>
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 9a90c5512..61d7d155c 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -252,16 +252,11 @@ const Configure = () => {
                   isLoading={isLoading}
                   level="tertiary"
                   label={monitor?.isActive ? "Pause" : "Resume"}
-                  animate="rotate180"
                   img={<PauseCircleOutlineIcon />}
                   sx={{
                     backgroundColor: theme.palette.background.main,
-                    pl: theme.spacing(4),
-                    pr: theme.spacing(6),
+                    px: theme.spacing(6),
                     mr: theme.spacing(6),
-                    "& svg": {
-                      mr: theme.spacing(2),
-                    },
                   }}
                   onClick={handlePause}
                 />
@@ -270,7 +265,6 @@ const Configure = () => {
                   level="error"
                   label="Remove"
                   sx={{
-                    boxShadow: "none",
                     px: theme.spacing(8),
                   }}
                   onClick={() => setIsOpen(true)}
diff --git a/Client/src/assets/Images/create-placeholder-dark.svg b/Client/src/assets/Images/create-placeholder-dark.svg
new file mode 100644
index 000000000..670da4776
--- /dev/null
+++ b/Client/src/assets/Images/create-placeholder-dark.svg
@@ -0,0 +1,36 @@
+<svg width="256" height="170" viewBox="0 0 256 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_24_2)">
+<path d="M248.196 0.390244H7.80489C3.7099 0.390244 0.390259 3.70989 0.390259 7.80487V161.561C0.390259 165.656 3.7099 168.975 7.80489 168.975H248.196C252.291 168.975 255.61 165.656 255.61 161.561V7.80487C255.61 3.70989 252.291 0.390244 248.196 0.390244Z" fill="#151518"/>
+<path d="M248.196 0.390244H7.80489C3.7099 0.390244 0.390259 3.70989 0.390259 7.80487V161.561C0.390259 165.656 3.7099 168.975 7.80489 168.975H248.196C252.291 168.975 255.61 165.656 255.61 161.561V7.80487C255.61 3.70989 252.291 0.390244 248.196 0.390244Z" stroke="#27272A" stroke-width="0.780488"/>
+<path d="M234.927 16.3901H21.0732C19.3489 16.3901 17.9512 17.7879 17.9512 19.5121V67.9023C17.9512 69.6265 19.3489 71.0242 21.0732 71.0242H234.927C236.651 71.0242 238.049 69.6265 238.049 67.9023V19.5121C238.049 17.7879 236.651 16.3901 234.927 16.3901Z" fill="#27272A" fill-opacity="0.8"/>
+<path d="M99.9025 78.8293H21.0732C19.3489 78.8293 17.9512 80.227 17.9512 81.9512V85.0732C17.9512 86.7974 19.3489 88.1952 21.0732 88.1952H99.9025C101.627 88.1952 103.024 86.7974 103.024 85.0732V81.9512C103.024 80.227 101.627 78.8293 99.9025 78.8293Z" fill="#27272A" fill-opacity="0.3"/>
+<path d="M234.927 93.6584H21.0732C19.3489 93.6584 17.9512 95.0561 17.9512 96.7803V99.9023C17.9512 101.627 19.3489 103.024 21.0732 103.024H234.927C236.651 103.024 238.049 101.627 238.049 99.9023V96.7803C238.049 95.0561 236.651 93.6584 234.927 93.6584Z" fill="#27272A" fill-opacity="0.3"/>
+<path d="M234.927 108.488H21.0732C19.3489 108.488 17.9512 109.886 17.9512 111.61V114.732C17.9512 116.456 19.3489 117.854 21.0732 117.854H234.927C236.651 117.854 238.049 116.456 238.049 114.732V111.61C238.049 109.886 236.651 108.488 234.927 108.488Z" fill="#27272A" fill-opacity="0.3"/>
+<g filter="url(#filter0_d_24_2)">
+<mask id="mask0_24_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="174" y="129" width="65" height="21">
+<path d="M234.927 129.561H177.171C175.447 129.561 174.049 130.959 174.049 132.683V146.732C174.049 148.456 175.447 149.854 177.171 149.854H234.927C236.651 149.854 238.049 148.456 238.049 146.732V132.683C238.049 130.959 236.651 129.561 234.927 129.561Z" fill="white"/>
+<path d="M177.171 130.061H234.927C236.375 130.061 237.549 131.235 237.549 132.683V146.732C237.549 148.18 236.375 149.354 234.927 149.354H177.171C175.723 149.354 174.549 148.18 174.549 146.732V132.683C174.549 131.235 175.723 130.061 177.171 130.061Z" stroke="white"/>
+</mask>
+<g mask="url(#mask0_24_2)">
+<path d="M234.927 129.561H177.171C175.447 129.561 174.049 130.959 174.049 132.683V146.732C174.049 148.456 175.447 149.854 177.171 149.854H234.927C236.651 149.854 238.049 148.456 238.049 146.732V132.683C238.049 130.959 236.651 129.561 234.927 129.561Z" fill="#27272A"/>
+<path d="M177.171 130.061H234.927C236.375 130.061 237.549 131.235 237.549 132.683V146.732C237.549 148.18 236.375 149.354 234.927 149.354H177.171C175.723 149.354 174.549 148.18 174.549 146.732V132.683C174.549 131.235 175.723 130.061 177.171 130.061Z" stroke="#27272A" stroke-opacity="0.8"/>
+</g>
+<path d="M234.927 129.951H177.171C175.662 129.951 174.439 131.174 174.439 132.683V146.731C174.439 148.24 175.662 149.463 177.171 149.463H234.927C236.435 149.463 237.658 148.24 237.658 146.731V132.683C237.658 131.174 236.435 129.951 234.927 129.951Z" stroke="#27272A" stroke-opacity="0.8" stroke-width="0.780488"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_24_2" x="172.049" y="128.561" width="68.0002" height="24.2929" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24_2"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_24_2" result="shape"/>
+</filter>
+<clipPath id="clip0_24_2">
+<rect width="256" height="170" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From ae1c1b2cb4eb726839682b60e6a33947c19a8853 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 30 Aug 2024 14:25:03 -0400
Subject: [PATCH 2/3] Dimmed down grid line color

---
 Client/src/Pages/Monitors/Home/StatusBox.jsx | 26 +++++++++++---------
 Client/src/Utils/Theme/darkTheme.js          |  1 +
 Client/src/Utils/Theme/lightTheme.js         |  1 +
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/Client/src/Pages/Monitors/Home/StatusBox.jsx b/Client/src/Pages/Monitors/Home/StatusBox.jsx
index a7c56d75a..08b2e88d9 100644
--- a/Client/src/Pages/Monitors/Home/StatusBox.jsx
+++ b/Client/src/Pages/Monitors/Home/StatusBox.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
 import Arrow from "../../../assets/icons/top-right-arrow.svg?react";
-import background from "../../../assets/Images/background-grid.svg";
+import Background from "../../../assets/Images/background-grid.svg?react";
 import ClockSnooze from "../../../assets/icons/clock-snooze.svg?react";
 
 const StatusBox = ({ title, value }) => {
@@ -55,19 +55,21 @@ const StatusBox = ({ title, value }) => {
         "&:hover": {
           backgroundColor: theme.palette.background.accent,
         },
-        "&:after": {
-          position: "absolute",
-          content: `""`,
-          backgroundImage: `url(${background})`,
-          width: "400px",
-          height: "200px",
-          top: "-10%",
-          left: "5%",
-          zIndex: 10000,
-          pointerEvents: "none",
-        },
       }}
     >
+      <Box
+        sx={{
+          position: "absolute",
+          top: "-10%",
+          left: "5%",
+          pointerEvents: "none",
+          "& svg g g:last-of-type path": {
+            stroke: theme.palette.other.grid,
+          },
+        }}
+      >
+        <Background />
+      </Box>
       <Box
         textTransform="uppercase"
         fontSize={15}
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index c2e137004..1539ffaf1 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -61,6 +61,7 @@ const darkTheme = createTheme({
       icon: "#e6e6e6",
       line: "#27272a",
       fill: "#18181a",
+      grid: "#454546",
     },
     // TO BE REMOVED //
     primary: {
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index 2003c7647..4b2742e87 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -59,6 +59,7 @@ const lightTheme = createTheme({
       icon: "#667085",
       line: "#d6d9dd",
       fill: "#e3e3e3",
+      grid: "#a2a3a3",
     },
     // TO BE REMOVED //
     primary: {

From 9db6e3e37fb0bf375396d2c591b9dea4186cef19 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 30 Aug 2024 14:34:49 -0400
Subject: [PATCH 3/3] Updated placeholder color values

---
 Client/src/assets/Images/create-placeholder-dark.svg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Client/src/assets/Images/create-placeholder-dark.svg b/Client/src/assets/Images/create-placeholder-dark.svg
index 670da4776..2dd68750b 100644
--- a/Client/src/assets/Images/create-placeholder-dark.svg
+++ b/Client/src/assets/Images/create-placeholder-dark.svg
@@ -2,8 +2,8 @@
 <g clip-path="url(#clip0_24_2)">
 <path d="M248.196 0.390244H7.80489C3.7099 0.390244 0.390259 3.70989 0.390259 7.80487V161.561C0.390259 165.656 3.7099 168.975 7.80489 168.975H248.196C252.291 168.975 255.61 165.656 255.61 161.561V7.80487C255.61 3.70989 252.291 0.390244 248.196 0.390244Z" fill="#151518"/>
 <path d="M248.196 0.390244H7.80489C3.7099 0.390244 0.390259 3.70989 0.390259 7.80487V161.561C0.390259 165.656 3.7099 168.975 7.80489 168.975H248.196C252.291 168.975 255.61 165.656 255.61 161.561V7.80487C255.61 3.70989 252.291 0.390244 248.196 0.390244Z" stroke="#27272A" stroke-width="0.780488"/>
-<path d="M234.927 16.3901H21.0732C19.3489 16.3901 17.9512 17.7879 17.9512 19.5121V67.9023C17.9512 69.6265 19.3489 71.0242 21.0732 71.0242H234.927C236.651 71.0242 238.049 69.6265 238.049 67.9023V19.5121C238.049 17.7879 236.651 16.3901 234.927 16.3901Z" fill="#27272A" fill-opacity="0.8"/>
-<path d="M99.9025 78.8293H21.0732C19.3489 78.8293 17.9512 80.227 17.9512 81.9512V85.0732C17.9512 86.7974 19.3489 88.1952 21.0732 88.1952H99.9025C101.627 88.1952 103.024 86.7974 103.024 85.0732V81.9512C103.024 80.227 101.627 78.8293 99.9025 78.8293Z" fill="#27272A" fill-opacity="0.3"/>
+<path d="M234.976 18H21.122C19.3977 18 18 19.3977 18 21.122V69.5122C18 71.2364 19.3977 72.6341 21.122 72.6341H234.976C236.7 72.6341 238.098 71.2364 238.098 69.5122V21.122C238.098 19.3977 236.7 18 234.976 18Z" fill="#27272A" fill-opacity="0.8"/>
+<path d="M99.9025 78.8293H21.0732C19.3489 78.8293 17.9512 80.227 17.9512 81.9512V85.0732C17.9512 86.7974 19.3489 88.1952 21.0732 88.1952H99.9025C101.627 88.1952 103.024 86.7974 103.024 85.0732V81.9512C103.024 80.227 101.627 78.8293 99.9025 78.8293Z" fill="#27272A" fill-opacity="0.6"/>
 <path d="M234.927 93.6584H21.0732C19.3489 93.6584 17.9512 95.0561 17.9512 96.7803V99.9023C17.9512 101.627 19.3489 103.024 21.0732 103.024H234.927C236.651 103.024 238.049 101.627 238.049 99.9023V96.7803C238.049 95.0561 236.651 93.6584 234.927 93.6584Z" fill="#27272A" fill-opacity="0.3"/>
 <path d="M234.927 108.488H21.0732C19.3489 108.488 17.9512 109.886 17.9512 111.61V114.732C17.9512 116.456 19.3489 117.854 21.0732 117.854H234.927C236.651 117.854 238.049 116.456 238.049 114.732V111.61C238.049 109.886 236.651 108.488 234.927 108.488Z" fill="#27272A" fill-opacity="0.3"/>
 <g filter="url(#filter0_d_24_2)">
@@ -12,7 +12,7 @@
 <path d="M177.171 130.061H234.927C236.375 130.061 237.549 131.235 237.549 132.683V146.732C237.549 148.18 236.375 149.354 234.927 149.354H177.171C175.723 149.354 174.549 148.18 174.549 146.732V132.683C174.549 131.235 175.723 130.061 177.171 130.061Z" stroke="white"/>
 </mask>
 <g mask="url(#mask0_24_2)">
-<path d="M234.927 129.561H177.171C175.447 129.561 174.049 130.959 174.049 132.683V146.732C174.049 148.456 175.447 149.854 177.171 149.854H234.927C236.651 149.854 238.049 148.456 238.049 146.732V132.683C238.049 130.959 236.651 129.561 234.927 129.561Z" fill="#27272A"/>
+<path d="M234.927 129.561H177.171C175.447 129.561 174.049 130.959 174.049 132.683V146.732C174.049 148.456 175.447 149.854 177.171 149.854H234.927C236.651 149.854 238.049 148.456 238.049 146.732V132.683C238.049 130.959 236.651 129.561 234.927 129.561Z" fill="#27272A" fill-opacity="0.2"/>
 <path d="M177.171 130.061H234.927C236.375 130.061 237.549 131.235 237.549 132.683V146.732C237.549 148.18 236.375 149.354 234.927 149.354H177.171C175.723 149.354 174.549 148.18 174.549 146.732V132.683C174.549 131.235 175.723 130.061 177.171 130.061Z" stroke="#27272A" stroke-opacity="0.8"/>
 </g>
 <path d="M234.927 129.951H177.171C175.662 129.951 174.439 131.174 174.439 132.683V146.731C174.439 148.24 175.662 149.463 177.171 149.463H234.927C236.435 149.463 237.658 148.24 237.658 146.731V132.683C237.658 131.174 236.435 129.951 234.927 129.951Z" stroke="#27272A" stroke-opacity="0.8" stroke-width="0.780488"/>