From 1e5c0f05fb5693a7bbdde0d78ae317a606e46bd8 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Mon, 22 Jul 2024 22:51:15 +0330 Subject: [PATCH 01/11] Error page implemented --- Client/src/App.jsx | 2 + Client/src/Pages/Errors/index.css | 40 ++++++++++++++++++++ Client/src/Pages/Errors/index.jsx | 63 +++++++++++++++++++++++++++++++ 3 files changed, 105 insertions(+) create mode 100644 Client/src/Pages/Errors/index.css create mode 100644 Client/src/Pages/Errors/index.jsx diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 0482aec5d..4d0b7a7ae 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -20,6 +20,7 @@ import Details from "./Pages/Monitors/Details"; import Maintenance from "./Pages/Maintenance"; import "react-toastify/dist/ReactToastify.css"; import { ToastContainer } from "react-toastify"; +import ErrorPage from "./Pages/Errors"; function App() { return ( @@ -89,6 +90,7 @@ function App() { path="/new-password-confirmed" element={} /> + } /> diff --git a/Client/src/Pages/Errors/index.css b/Client/src/Pages/Errors/index.css new file mode 100644 index 000000000..fef0d001d --- /dev/null +++ b/Client/src/Pages/Errors/index.css @@ -0,0 +1,40 @@ +.error-page, +.error-template, +.error-title, +.error-description { + justify-content: center; + align-items: center; +} + +.error-page { + display: flex; + min-height: 100vh; +} + +.error-template { + min-height: 170px; +} + +.error-title, +.error-description { + text-align: center; +} + +.error-title { + font-size: var(--env-var-font-size-large); + color: var(--env-var-color-5); + font-weight: 600; +} + +.error-description { + font-size: var(--env-var-font-size-medium); + font-weight: 500; +} + +.error-page-gap-medium { + height: var(--env-var-spacing-2); +} + +.error-page-gap-xlarge { + height: calc(var(--env-var-spacing-4) + var(--env-var-spacing-2)); +} diff --git a/Client/src/Pages/Errors/index.jsx b/Client/src/Pages/Errors/index.jsx new file mode 100644 index 000000000..afaadfe4a --- /dev/null +++ b/Client/src/Pages/Errors/index.jsx @@ -0,0 +1,63 @@ +import Button from "../../Components/Button"; +import "./index.css"; +import React from "react"; +import PropTypes from "prop-types"; + +/** + * 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.", +}; + +/** + * Renders an error page component with a customizable title and description. + * + * @component + * @example + * // Usage: + * + * + * @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 ErrorPage = ({ + title = DefaultValue.title, + desc = DefaultValue.desc, +}) => { + return ( +
+
+
{title}
+
+
{desc}
+
+
+
+
+
+ ); +}; + +ErrorPage.propTypes = { + title: PropTypes.string, + desc: PropTypes.string, +}; + +export default ErrorPage; From 8b5c9461d577657160ae0210918008851c4e002d Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Mon, 22 Jul 2024 22:55:23 +0330 Subject: [PATCH 02/11] fixing conflicts --- Client/src/App.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 4d0b7a7ae..4bb99022f 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -18,8 +18,9 @@ import NewPasswordConfirmed from "./Pages/Auth/NewPasswordConfirmed"; import ProtectedRoute from "./Components/ProtectedRoute"; import Details from "./Pages/Monitors/Details"; import Maintenance from "./Pages/Maintenance"; -import "react-toastify/dist/ReactToastify.css"; -import { ToastContainer } from "react-toastify"; +import withAdminCheck from "./HOC/withAdminCheck"; +import Configure from "./Pages/Monitors/Configure"; + import ErrorPage from "./Pages/Errors"; function App() { From e4b441dffa83148f5507dcc3dffa526ffb27ad0a Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Mon, 22 Jul 2024 22:56:31 +0330 Subject: [PATCH 03/11] fixing conflicts --- Client/src/App.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 4bb99022f..8f170e8c5 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -21,8 +21,6 @@ import Maintenance from "./Pages/Maintenance"; import withAdminCheck from "./HOC/withAdminCheck"; import Configure from "./Pages/Monitors/Configure"; -import ErrorPage from "./Pages/Errors"; - function App() { return ( <> @@ -91,7 +89,6 @@ function App() { path="/new-password-confirmed" element={} /> - } /> From f3905fee51ade10929025602ae4147bd49b9a86d Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 23 Jul 2024 00:09:03 +0330 Subject: [PATCH 04/11] fixing conflicts --- Client/src/App.jsx | 7 ++-- Client/src/Pages/Errors/index.css | 40 ------------------ Client/src/Pages/Errors/index.jsx | 63 ---------------------------- Client/src/Pages/NotFound/index.css | 36 +++++++++++++++- Client/src/Pages/NotFound/index.jsx | 65 +++++++++++++++++++++++++---- 5 files changed, 96 insertions(+), 115 deletions(-) delete mode 100644 Client/src/Pages/Errors/index.css delete mode 100644 Client/src/Pages/Errors/index.jsx diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 8f170e8c5..2015793d7 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -18,8 +18,8 @@ import NewPasswordConfirmed from "./Pages/Auth/NewPasswordConfirmed"; import ProtectedRoute from "./Components/ProtectedRoute"; import Details from "./Pages/Monitors/Details"; import Maintenance from "./Pages/Maintenance"; -import withAdminCheck from "./HOC/withAdminCheck"; -import Configure from "./Pages/Monitors/Configure"; +import "react-toastify/dist/ReactToastify.css"; +import { ToastContainer } from "react-toastify"; function App() { return ( @@ -81,7 +81,8 @@ function App() { } /> } /> {/* } /> */} - } /> + {/* } /> */} + } /> } /> } /> } /> diff --git a/Client/src/Pages/Errors/index.css b/Client/src/Pages/Errors/index.css deleted file mode 100644 index fef0d001d..000000000 --- a/Client/src/Pages/Errors/index.css +++ /dev/null @@ -1,40 +0,0 @@ -.error-page, -.error-template, -.error-title, -.error-description { - justify-content: center; - align-items: center; -} - -.error-page { - display: flex; - min-height: 100vh; -} - -.error-template { - min-height: 170px; -} - -.error-title, -.error-description { - text-align: center; -} - -.error-title { - font-size: var(--env-var-font-size-large); - color: var(--env-var-color-5); - font-weight: 600; -} - -.error-description { - font-size: var(--env-var-font-size-medium); - font-weight: 500; -} - -.error-page-gap-medium { - height: var(--env-var-spacing-2); -} - -.error-page-gap-xlarge { - height: calc(var(--env-var-spacing-4) + var(--env-var-spacing-2)); -} diff --git a/Client/src/Pages/Errors/index.jsx b/Client/src/Pages/Errors/index.jsx deleted file mode 100644 index afaadfe4a..000000000 --- a/Client/src/Pages/Errors/index.jsx +++ /dev/null @@ -1,63 +0,0 @@ -import Button from "../../Components/Button"; -import "./index.css"; -import React from "react"; -import PropTypes from "prop-types"; - -/** - * 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.", -}; - -/** - * Renders an error page component with a customizable title and description. - * - * @component - * @example - * // Usage: - * - * - * @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 ErrorPage = ({ - title = DefaultValue.title, - desc = DefaultValue.desc, -}) => { - return ( -
-
-
{title}
-
-
{desc}
-
-
-
-
-
- ); -}; - -ErrorPage.propTypes = { - title: PropTypes.string, - desc: PropTypes.string, -}; - -export default ErrorPage; diff --git a/Client/src/Pages/NotFound/index.css b/Client/src/Pages/NotFound/index.css index 937c1ee8d..2863581d6 100644 --- a/Client/src/Pages/NotFound/index.css +++ b/Client/src/Pages/NotFound/index.css @@ -1 +1,35 @@ -/*Notfoundpage styles*/ \ No newline at end of file +/*Notfoundpage styles*/ +.not-found-page, +.not-found-template, +#not-found-title, +#not-found-description { + justify-content: center; + align-items: center; +} + +.not-found-page { + display: flex; + min-height: 100vh; +} + +.not-found-template { + min-height: 170px; +} + +#not-found-title, +#not-found-description { + text-align: center; +} + +#not-found-title { + font-size: var(--env-var-font-size-large); + color: var(--env-var-color-5); + font-weight: 600; + margin-bottom: var(--env-var-spacing-2); +} + +#not-found-description { + font-size: var(--env-var-font-size-medium); + font-weight: 500; + margin-bottom: calc(var(--env-var-spacing-4) + var(--env-var-spacing-2)); +} diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx index 02138b326..5a55ad5ce 100644 --- a/Client/src/Pages/NotFound/index.jsx +++ b/Client/src/Pages/NotFound/index.jsx @@ -1,10 +1,59 @@ -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 { Typography } from "@mui/material"; -const NotFound = () => { - return ( -
NotFoundPage
- ) -} +/** + * 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 \ No newline at end of file +/** + * Renders an error page component with a customizable title and description. + * + * @component + * @example + * // Usage: + * + * + * @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 ( +
+
+ {title} + {desc} +
+
+
+
+ ); +}; + +NotFound.propTypes = { + title: PropTypes.string, + desc: PropTypes.string, +}; + +export default NotFound; From 6ff5fe2a364ad62ca3c5ef3c05c54e0b6dd9ea8a Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 23 Jul 2024 00:12:49 +0330 Subject: [PATCH 05/11] fixing conflicts --- Client/src/App.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 2015793d7..0482aec5d 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -81,8 +81,7 @@ function App() { } /> } /> {/* } /> */} - {/* } /> */} - } /> + } /> } /> } /> } /> From 14bbb241b9ccfe092fdbfcd63aa66619fa18061b Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 23 Jul 2024 09:12:11 +0330 Subject: [PATCH 06/11] fixing bugs --- Client/src/Pages/NotFound/index.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx index 5a55ad5ce..44947d60a 100644 --- a/Client/src/Pages/NotFound/index.jsx +++ b/Client/src/Pages/NotFound/index.jsx @@ -2,7 +2,7 @@ import Button from "../../Components/Button"; import "./index.css"; import React from "react"; import PropTypes from "prop-types"; -import { Typography } from "@mui/material"; +import { Stack, Typography } from "@mui/material"; /** * Support for defaultProps will be removed from function components in a future major release @@ -31,8 +31,8 @@ const DefaultValue = { */ const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => { return ( -
-
+ + {title} {desc}
{ sx={{ fontSize: "var(--env-var-font-size-medium)" }} />
-
-
+ + ); }; From 25785a91ec20ecaebb7d00a5aab819cda9008eea Mon Sep 17 00:00:00 2001 From: Mohammad Khalilzadeh Date: Tue, 23 Jul 2024 20:20:18 +0330 Subject: [PATCH 07/11] applying changes --- Client/src/Components/Charts/Servers/serverStatus.css | 4 ++-- Client/src/Components/NavBar/index.jsx | 5 +++-- Client/src/Layouts/HomeLayout/index.css | 2 +- Client/src/Pages/Monitors/Configure/index.jsx | 1 + Client/src/Pages/Monitors/CreateMonitor/index.jsx | 1 + Client/src/Pages/Monitors/Details/index.jsx | 1 + Client/src/Pages/Monitors/index.css | 2 ++ Client/src/Pages/Monitors/index.jsx | 1 + Client/src/Pages/Settings/index.jsx | 1 + Client/src/index.css | 1 + 10 files changed, 14 insertions(+), 5 deletions(-) diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css index 97a4fec3f..b3cad9429 100644 --- a/Client/src/Components/Charts/Servers/serverStatus.css +++ b/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 { diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx index 1b3dd8c6a..f99ad14b6 100644 --- a/Client/src/Components/NavBar/index.jsx +++ b/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)", }} > diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css index 76065015b..607e0b34d 100644 --- a/Client/src/Layouts/HomeLayout/index.css +++ b/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; diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index c6ce13f89..8c5fa4f20 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/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)", }} >