From cfab18f0e8ffc35f3af327dadcf56a630401bfb9 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 24 Aug 2024 14:40:08 -0400
Subject: [PATCH] Updated cards background, removed unused files

---
 .../Charts/Servers/ServerStatus.jsx           | 28 ------
 .../Charts/Servers/serverStatus.css           | 46 ---------
 Client/src/Components/Sidebar/index.jsx       |  2 +
 Client/src/Layouts/HomeLayout/index.css       |  2 +-
 Client/src/Pages/Monitors/index.jsx           | 97 ++++++++++++++++++-
 Client/src/assets/Images/background-grid.svg  | 67 +++++++++++++
 Client/src/assets/icons/top-right-arrow.svg   |  3 +
 7 files changed, 166 insertions(+), 79 deletions(-)
 delete mode 100644 Client/src/Components/Charts/Servers/ServerStatus.jsx
 delete mode 100644 Client/src/Components/Charts/Servers/serverStatus.css
 create mode 100644 Client/src/assets/Images/background-grid.svg
 create mode 100644 Client/src/assets/icons/top-right-arrow.svg

diff --git a/Client/src/Components/Charts/Servers/ServerStatus.jsx b/Client/src/Components/Charts/Servers/ServerStatus.jsx
deleted file mode 100644
index c06d0436b..000000000
--- a/Client/src/Components/Charts/Servers/ServerStatus.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import "./serverStatus.css";
-import PropTypes from "prop-types";
-
-/**
- * @component
- * @param {Object} props
- * @param {string} props.title - The title text for the server status (required)
- * @param {number} props.value - The value text to be displayed (required)
- * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required)
- * @returns {JSX.Element} - Renders the server status component
- */
-const ServerStatus = ({ title, value, state }) => {
-  return (
-    <div className="server-status-tile">
-      <div className="server-status-tile-title">{title}</div>
-      <div className={`server-status-tile-value ` + " " + state}>{value}</div>
-    </div>
-  );
-};
-
-ServerStatus.propTypes = {
-  title: PropTypes.string.isRequired,
-  value: PropTypes.number.isRequired,
-  state: PropTypes.string.isRequired,
-};
-
-export default ServerStatus;
diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css
deleted file mode 100644
index fcbf470aa..000000000
--- a/Client/src/Components/Charts/Servers/serverStatus.css
+++ /dev/null
@@ -1,46 +0,0 @@
-:root {
-  --spacing-general-0: 12px 18px;
-  --spacing-general-1: 20px;
-  --color-border-0: #eaecf0;
-  --border-radius-0: 4px;
-  --font-size-0: 1rem;
-  --font-size-2: 36px;
-
-  --color-up: #17b26a;
-  --color-down: #f04438;
-  --color-pause: #fdb022;
-}
-
-.server-status-tile {
-  min-width: 100px;
-  width: calc(100% - 310px);
-  padding: var(--spacing-general-0);
-  border: 1px solid var(--color-border-0);
-  border-radius: var(--border-radius-0);
-  background-color: var(--env-var-color-8);
-}
-
-.server-status-tile-title {
-  font-size: var(--font-size-0);
-  font-weight: 500;
-  margin-bottom: calc(var(--spacing-general-1) / 2);
-  color: var(--env-var-color-5);
-  opacity: 0.6;
-}
-
-.server-status-tile-value {
-  font-size: var(--font-size-2);
-  font-weight: bolder;
-}
-
-.up {
-  color: var(--color-up);
-}
-
-.down {
-  color: var(--color-down);
-}
-
-.pause {
-  color: var(--color-pause);
-}
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index ae6507b69..873ec8212 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -194,6 +194,7 @@ function Sidebar() {
             sx={{
               pt: theme.gap.small,
               px: collapsed ? theme.gap.xs : theme.gap.small,
+              backgroundColor: "transparent"
             }}
           >
             Menu
@@ -394,6 +395,7 @@ function Sidebar() {
             sx={{
               pt: theme.gap.small,
               px: collapsed ? 0 : theme.gap.small,
+              backgroundColor: "transparent"
             }}
           >
             Other
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index dcdcf0535..e85a6362b 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -20,7 +20,7 @@
   height: calc(100vh - var(--env-var-spacing-2) * 2);
   max-width: var(--env-var-side-bar-width);
 
-  border: 1px solid var(--color-border-0);
+  border: 1px solid var(--env-var-color-6);
   border-radius: var(--env-var-radius-1);
   background-color: var(--env-var-color-8);
 
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index a91939e85..e8b24306c 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -20,12 +20,13 @@ import {
 } from "@mui/material";
 import BasicTable from "../../Components/BasicTable";
 import Button from "../../Components/Button";
-import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import Settings from "../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import BarChart from "../../Components/Charts/BarChart";
 import Breadcrumbs from "../../Components/Breadcrumbs";
 import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+import background from "../../assets/Images/background-grid.svg";
+import Arrow from "../../assets/icons/top-right-arrow.svg?react";
 import "./index.css";
 
 const ActionsMenu = ({ monitor }) => {
@@ -259,6 +260,94 @@ Host.propTypes = {
   }).isRequired,
 };
 
+const StatusBox = ({ title, value }) => {
+  const theme = useTheme();
+
+  let sharedStyles = { position: "absolute", right: 8, opacity: 0.5 };
+
+  let color;
+  let icon;
+  if (title === "up") {
+    color = theme.pie.green.stroke;
+    icon = (
+      <Box sx={{ ...sharedStyles, top: 8 }}>
+        <Arrow />
+      </Box>
+    );
+  } else if (title === "down") {
+    color = theme.pie.red.stroke;
+    icon = (
+      <Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: 5 }}>
+        <Arrow />
+      </Box>
+    );
+  } else if (title === "paused") {
+    color = theme.pie.yellow.stroke;
+  }
+
+  return (
+    <Box
+      position="relative"
+      flex={1}
+      border={1}
+      borderColor={theme.palette.otherColors.graishWhite}
+      borderRadius={`${theme.shape.borderRadius}px`}
+      backgroundColor={theme.palette.otherColors.white}
+      px={theme.gap.large}
+      py={theme.gap.ml}
+      overflow="hidden"
+      sx={{
+        "&:hover": {
+          backgroundColor: "#f9fafb",
+        },
+        // backgroundImage:
+        //   "linear-gradient(to right bottom, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #fefefe, #fefefe, #fdfdfd, #fcfcfd, #fafbfc, #f9fafb)",
+        "&:after": {
+          position: "absolute",
+          content: `""`,
+          backgroundImage: `url(${background})`,
+          width: "400px",
+          height: "200px",
+          top: "-10%",
+          left: "5%",
+          zIndex: 10000,
+        },
+      }}
+    >
+      <Box
+        textTransform="uppercase"
+        fontSize={15}
+        letterSpacing={0.5}
+        color={theme.palette.otherColors.bluishGray}
+        mb={theme.gap.ml}
+        sx={{ opacity: 0.6 }}
+      >
+        {title}
+      </Box>
+      {icon}
+      <Stack
+        direction="row"
+        alignItems="flex-start"
+        fontSize={36}
+        fontWeight={600}
+        color={color}
+        gap="2px"
+      >
+        {value}
+        <Typography
+          component="span"
+          fontSize={20}
+          fontWeight={300}
+          color={theme.palette.otherColors.bluishGray}
+          sx={{ opacity: 0.3 }}
+        >
+          #
+        </Typography>
+      </Stack>
+    </Box>
+  );
+};
+
 /**
  * Renders a skeleton layout.
  *
@@ -476,9 +565,9 @@ const Monitors = () => {
                 direction="row"
                 justifyContent="space-between"
               >
-                <ServerStatus title="Up" value={up} state="up" />
-                <ServerStatus title="Down" value={down} state="down" />
-                <ServerStatus title="Paused" value={0} state="pause" />
+                <StatusBox title="up" value={up} />
+                <StatusBox title="down" value={down} />
+                <StatusBox title="paused" value={0} />
               </Stack>
               <Box
                 flex={1}
diff --git a/Client/src/assets/Images/background-grid.svg b/Client/src/assets/Images/background-grid.svg
new file mode 100644
index 000000000..988f1da77
--- /dev/null
+++ b/Client/src/assets/Images/background-grid.svg
@@ -0,0 +1,67 @@
+<svg width="768" height="768" viewBox="0 0 768 768" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14_2)">
+<mask id="mask0_14_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+<path d="M768 0H0V768H768V0Z" fill="url(#paint0_radial_14_2)"/>
+</mask>
+<g mask="url(#mask0_14_2)">
+<mask id="mask1_14_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+<path d="M768 0H0V768H768V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_14_2)">
+<mask id="mask2_14_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+<path d="M768 0H0V768H768V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_14_2)">
+<path d="M0.5 0V768" stroke="#b8b9bd"/>
+<path d="M48.5 0V768" stroke="#b8b9bd"/>
+<path d="M96.5 0V768" stroke="#b8b9bd"/>
+<path d="M144.5 0V768" stroke="#b8b9bd"/>
+<path d="M192.5 0V768" stroke="#b8b9bd"/>
+<path d="M240.5 0V768" stroke="#b8b9bd"/>
+<path d="M288.5 0V768" stroke="#b8b9bd"/>
+<path d="M336.5 0V768" stroke="#b8b9bd"/>
+<path d="M384.5 0V768" stroke="#b8b9bd"/>
+<path d="M432.5 0V768" stroke="#b8b9bd"/>
+<path d="M480.5 0V768" stroke="#b8b9bd"/>
+<path d="M528.5 0V768" stroke="#b8b9bd"/>
+<path d="M576.5 0V768" stroke="#b8b9bd"/>
+<path d="M624.5 0V768" stroke="#b8b9bd"/>
+<path d="M672.5 0V768" stroke="#b8b9bd"/>
+<path d="M720.5 0V768" stroke="#b8b9bd"/>
+</g>
+<path d="M767.5 0.5H0.5V767.5H767.5V0.5Z" stroke="#b8b9bd"/>
+<mask id="mask3_14_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+<path d="M768 0H0V768H768V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_14_2)">
+<path d="M0 47.5H768" stroke="#b8b9bd"/>
+<path d="M0 95.5H768" stroke="#b8b9bd"/>
+<path d="M0 143.5H768" stroke="#b8b9bd"/>
+<path d="M0 191.5H768" stroke="#b8b9bd"/>
+<path d="M0 239.5H768" stroke="#b8b9bd"/>
+<path d="M0 287.5H768" stroke="#b8b9bd"/>
+<path d="M0 335.5H768" stroke="#b8b9bd"/>
+<path d="M0 383.5H768" stroke="#b8b9bd"/>
+<path d="M0 431.5H768" stroke="#b8b9bd"/>
+<path d="M0 479.5H768" stroke="#b8b9bd"/>
+<path d="M0 527.5H768" stroke="#b8b9bd"/>
+<path d="M0 575.5H768" stroke="#b8b9bd"/>
+<path d="M0 623.5H768" stroke="#b8b9bd"/>
+<path d="M0 671.5H768" stroke="#b8b9bd"/>
+<path d="M0 719.5H768" stroke="#b8b9bd"/>
+<path d="M0 767.5H768" stroke="#b8b9bd"/>
+</g>
+<path d="M767.5 0.5H0.5V767.5H767.5V0.5Z" stroke="#b8b9bd"/>
+</g>
+</g>
+</g>
+<defs>
+<radialGradient id="paint0_radial_14_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(384 384) rotate(90) scale(384)">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_14_2">
+<rect width="768" height="768" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Client/src/assets/icons/top-right-arrow.svg b/Client/src/assets/icons/top-right-arrow.svg
new file mode 100644
index 000000000..471b9454c
--- /dev/null
+++ b/Client/src/assets/icons/top-right-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 17L17 7M17 7H7M17 7V17" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>