Merge remote-tracking branch 'upstream/develop' into feat/page-speed-service-controller

Client/src/Components/Charts/Servers/serverStatus.css

@@ -14,7 +14,7 @@
 .server-status-tile {
   min-width: 250px;
   width: calc(100% - 310px);
-  padding: var(--spacing-general-1);
+  padding: var(--spacing-general-0);
   border: 1px solid var(--color-border-0);
   border-radius: var(--border-radius-0);
 }
@@ -22,7 +22,7 @@
 .server-status-tile-title {
   font-size: var(--font-size-0);
   font-weight: bold;
-  margin-bottom: 25px;
+  margin-bottom: calc(var(--spacing-general-1) / 2);
 }
 
 .server-status-tile-value {

Client/src/Components/Dashboard/DashboardSidebar/index.css

@@ -1,5 +1,5 @@
 .dashboard-sidebar {
-  height: calc(100vh - 64px);
+  height: calc(100vh - var(--env-var-nav-bar-height));
   width: 250px;
   border: 1px solid var(--color-border-0);
   border-top: none;

Client/src/Components/NavBar/index.css

@@ -1,4 +1,8 @@
 /* NavBar Component Styles*/
+.css-14ds6td-MuiPaper-root-MuiAppBar-root {
+  height: var(--env-var-nav-bar-height);
+}
+
 .icon-button-toggle {
   display: flex;
   align-items: center;

Client/src/Components/NavBar/index.jsx

@@ -99,8 +99,9 @@ function NavBar() {
       position="sticky"
       sx={{
         width: "100%",
-        backgroundColor: "white",
-        boxShadow: "var(--env-var-shadow-1)",
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        borderBottom: "1px solid var(--color-border-0)",
       }}
     >
       <Container maxWidth="xxl" sx={{ width: "100%" }}>

Client/src/Layouts/HomeLayout/index.css

@@ -6,7 +6,7 @@
   justify-content: flex-start;
 }
 
-.main-content>div:nth-child(2){
+.main-content > div:nth-child(2) {
   position: relative;
   /* overflow-y: auto; */
   flex: 1;

Client/src/Pages/Monitors/Configure/index.jsx

@@ -127,6 +127,7 @@ const Configure = () => {
       style={{
         maxWidth: "1200px",
         padding: `${theme.content.pY} ${theme.content.pX}`,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <Button

Client/src/Pages/Monitors/CreateMonitor/index.jsx

@@ -133,6 +133,7 @@ const CreateMonitor = () => {
       style={{
         maxWidth: "1200px",
         padding: `${theme.content.pY} ${theme.content.pX}`,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <Button

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

@@ -203,6 +203,7 @@ const DetailsPage = () => {
       className="monitor-details"
       style={{
         padding: `${theme.content.pY} ${theme.content.pX}`,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <Button

Client/src/Pages/Monitors/index.css

@@ -5,6 +5,7 @@
 
 .monitors {
   font-family: var(--env-var-font-familt-1);
+  background-color: var(--env-var-color-30);
 }
 
 .monitors-bar {
@@ -23,6 +24,7 @@
   margin-top: var(--env-var-spacing-2);
   display: flex;
   gap: 24px;
+  height: 100px;
 }
 
 .monitors-gaps-medium {

Client/src/Pages/Monitors/index.jsx

@@ -126,6 +126,7 @@ const Monitors = () => {
       className="monitors"
       style={{
         padding: `${theme.content.pY} ${theme.content.pX}`,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <div className="monitors-bar">

Client/src/Pages/NotFound/index.css

@@ -1 +1,15 @@
-/*Notfoundpage styles*/
+.not-found-page {
+  height: 100vh;
+}
+.not-found-page button,
+.not-found-page p {
+  font-size: var(--env-var-font-size-medium);
+}
+.not-found-page h1 {
+  font-size: var(--env-var-font-size-large);
+  font-weight: 600;
+}
+.not-found-page h1,
+.not-found-page p {
+  color: var(--env-var-color-5);
+}

Client/src/Pages/NotFound/index.jsx

@@ -1,10 +1,53 @@
-import React from 'react'
-import './index.css'
+import Button from "../../Components/Button";
+import "./index.css";
+import React from "react";
+import PropTypes from "prop-types";
+import { Stack, Typography } from "@mui/material";
 
-const NotFound = () => {
-    return (
-        <div>NotFoundPage</div>
-    )
-}
+/**
+ * Support for defaultProps will be removed from function components in a future major release
+ * So That why we're using JavaScript default parameters instead.
+ */
+const DefaultValue = {
+  title: "We cannot find this page",
+  desc: "Either the URL doesn’t exist, or you don’t have access to it.",
+};
 
-export default NotFound
+/**
+ * Renders an error page component with a customizable title and description.
+ *
+ * @component
+ * @example
+ * // Usage:
+ * <ErrorPage
+ *   title="Page Not Found"
+ *   desc="The requested page could not be found."
+ * />
+ *
+ * @param {Object} props - The component props.
+ * @param {string} [props.title="We cannot find this page"] - The title of the error page.
+ * @param {string} [props.desc="Either the URL doesn’t exist, or you don’t have access to it."] - The description of the error page.
+ * @returns {JSX.Element} The rendered error page component.
+ */
+const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
+  return (
+    <Stack className="not-found-page" justifyContent="center">
+      <Stack gap="20px" alignItems="center">
+        <Typography component="h1">{title}</Typography>
+        <Typography>{desc}</Typography>
+        <Button
+          label="Go to the main dashboard"
+          level="primary"
+          sx={{ mt: "24px" }}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+NotFound.propTypes = {
+  title: PropTypes.string,
+  desc: PropTypes.string,
+};
+
+export default NotFound;

Client/src/Pages/Settings/index.jsx

@@ -16,6 +16,7 @@ const Settings = () => {
         maxWidth: "1200px",
         padding: `${theme.content.pY} ${theme.content.pX}`,
         paddingBottom: 0,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <form className="settings-form" noValidate spellCheck="false">

Client/src/index.css

@@ -47,6 +47,7 @@
   --lighter-env-var-color-27: rgba(254, 207, 96, 0.1);
   --env-var-color-28: #f79009;
   --env-var-color-29: #d0d5dd;
+  --env-var-color-30: #fcfcfd;
 
   --env-var-radius-1: 4px;
   --env-var-radius-2: 8px;
@@ -57,12 +58,15 @@
   --env-var-height-1: 100vh;
   --env-var-height-2: 34px;
 
+  --env-var-nav-bar-height: 64px;
+
   --env-var-spacing-1: 12px;
   --env-var-spacing-1-plus: 16px;
   --env-var-spacing-1-minus: 10px;
   --env-var-spacing-2: 24px;
   --env-var-spacing-3: 32px;
   --env-var-spacing-4: 40px;
+  --env-var-spacing-5: 65px;
 
   --env-var-font-size-small: 11px;
   --env-var-font-size-small-plus: 12px;