{
},
}}
>
-
+
Invite new team member
-
+
When you add a new team member, they will get access to all
monitors.
diff --git a/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx b/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx
index 9f2998ef9..66b1743c5 100644
--- a/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx
+++ b/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx
@@ -1,5 +1,19 @@
+import PropTypes from "prop-types";
+import { Stack, Typography } from "@mui/material";
import "./flexibileTextField.css";
-import React from "react";
+import { useTheme } from "@emotion/react";
+
+/**
+ * @param {Object} props - The component props.
+ * @param {string} props.id - The ID of the input field.
+ * @param {string} props.title - The title or label for the input field.
+ * @param {string} props.type - The type of the input field (e.g., 'text', 'password').
+ * @param {string} props.placeholder - The placeholder text for the input field.
+ * @param {string} props.value - The current value of the input field.
+ * @param {function} props.onChange - The function to call when the input field value changes.
+ * @param {string} [props.error] - Optional. Error message to display if there's an error with the input.
+ * @returns {JSX.Element} JSX Element representing the flexible text input field.
+ */
const FlexibileTextField = ({
id,
@@ -8,20 +22,38 @@ const FlexibileTextField = ({
placeholder,
value,
onChange,
+ error,
}) => {
+ const theme = useTheme();
return (
-
+ {error ? (
+
+ {error}
+
+ ) : (
+ ""
+ )}
+
);
};
+FlexibileTextField.propTypes = {
+ id: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ onChange: PropTypes.func.isRequired,
+ error: PropTypes.string,
+};
+
export default FlexibileTextField;
diff --git a/Client/src/Components/TextFields/Flexibile/flexibileTextField.css b/Client/src/Components/TextFields/Flexibile/flexibileTextField.css
index 2e0422876..2c5dcc988 100644
--- a/Client/src/Components/TextFields/Flexibile/flexibileTextField.css
+++ b/Client/src/Components/TextFields/Flexibile/flexibileTextField.css
@@ -1,22 +1,30 @@
-.flexibile-textfield-title {
+.flexible-textfield{
+ position: relative;
+}
+.flexible-textfield h2.MuiTypography-root{
color: var(--env-var-color-5);
font-size: var(--env-var-font-size-medium);
+ font-weight: 400;
}
-
-.flexibile-textfield-input {
- width: 292.8px;
- height: 6.8px;
- padding: var(--env-var-spacing-1);
- margin-top: 10px;
+.flexible-textfield h2.MuiTypography-root span{
+ opacity: 0.6;
+}
+.flexible-textfield input {
+ min-width: 300px;
+ height: 34px;
+ padding: 0 var(--env-var-spacing-1);
border: 1px solid var(--env-var-color-4);
border-radius: var(--env-var-radius-1);
}
-
-.flexibile-textfield-input:focus {
+.flexible-textfield p.MuiTypography-root.input-error {
+ color: var(--env-var-color-24);
+ opacity: 0.8;
+ position: absolute;
+ top: calc(100% + 5px);
+}
+.flexible-textfield:has(p.MuiTypography-root.input-error) input{
+ border-color: var(--env-var-color-24);
+}
+.flexible-textfield input:focus {
outline: none;
-}
-
-.flexibile-textfield-input::placeholder {
- color: var(--env-var-color-25);
- font-size: var(--env-var-font-size-medium);
-}
+}
\ No newline at end of file
diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx
index 1a24bb36e..2bb4dc018 100644
--- a/Client/src/Pages/Account/index.jsx
+++ b/Client/src/Pages/Account/index.jsx
@@ -30,8 +30,8 @@ const Account = ({ open = "profile" }) => {
//TODO - breakpoints for responsive design
minWidth={theme.spacing(55)}
maxWidth="1200px"
- py={theme.spacing(5)}
- px={theme.spacing(10)}
+ py={theme.content.pY}
+ px={theme.content.pX}
className="account"
>
diff --git a/Client/src/Pages/CreateNewMonitor/index.css b/Client/src/Pages/CreateNewMonitor/index.css
index 099f6e151..26b41fb83 100644
--- a/Client/src/Pages/CreateNewMonitor/index.css
+++ b/Client/src/Pages/CreateNewMonitor/index.css
@@ -1,82 +1,67 @@
-.monitors,
-.new-monitor {
- width: 70vw;
- padding: 4vw;
+.create-monitor-form h1.MuiTypography-root {
+ font-size: var(--env-var-font-size-large-plus);
+ color: var(--env-var-color-1);
+}
+.create-monitor-form h1.MuiTypography-root,
+.create-monitor-form h2.MuiTypography-root {
+ font-weight: 600;
+}
+.create-monitor-form h2.MuiTypography-root {
+ font-size: var(--env-var-font-size-large);
+}
+.create-monitor-form p.MuiTypography-root,
+#monitor-frequencies {
+ font-size: var(--env-var-font-size-medium);
+}
+.create-monitor-form h2.MuiTypography-root,
+.create-monitor-form h6.MuiTypography-root,
+.create-monitor-form p.MuiTypography-root,
+#monitor-frequencies {
+ color: var(--env-var-color-2);
+}
+.create-monitor-form h6.MuiTypography-root {
+ font-size: var(--env-var-font-size-small-plus);
+ opacity: 0.8;
}
-.monitors-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
+.create-monitor-form .error-container {
+ position: relative;
+}
+.create-monitor-form .error-container p.MuiTypography-root.input-error {
+ color: var(--env-var-color-24);
+ opacity: 0.8;
+ position: absolute;
+ top: 0;
}
-.monitors-bar-title {
- font-size: 24px;
- font-weight: 700;
-}
+/* for testing, will remove later */
+/* .config-box:has(.error-container):has(.input-error) {
+ border-color: var(--env-var-color-24);
+} */
-.monitors-stats {
- display: flex;
- gap: 24px;
+.create-monitor-form .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
+ padding: var(--env-var-spacing-1);
+}
+.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) {
+ min-width: 300px;
+ width: 100%;
+ height: 34px;
+ border: 1px solid var(--env-var-color-4);
+ border-radius: var(--env-var-radius-1);
+ overflow: hidden;
+}
+.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) fieldset {
+ outline: none;
+ border: none;
}
.monitors-gaps-medium {
height: var(--env-var-spacing-2);
}
-
.monitors-gaps-small-plus {
height: var(--env-var-spacing-1-plus);
}
-.new-monitor-header {
- color: var(--env-var-color-1);
- font-size: var(--env-var-font-size-large-plus);
- font-weight: 600;
-}
-
-.service-check-list-title {
- color: var(--env-var-color-5);
- font-size: var(--env-var-font-size-medium);
-}
-
-.service-check-list-desc {
- color: var(--env-var-color-25);
- font-size: var(--env-var-font-size-small);
-}
-
-.host-status-box-text {
- font-size: var(--env-var-font-size-medium);
-}
-
-.monitors-dropdown-holder {
- padding-left: 30px;
-}
-
-#ports-list {
- width: 172.92px;
- height: 12px;
- font-size: var(--env-var-font-size-small);
- align-items: center;
-}
-
-.incident-notif-config-title,
-.adv-setting-title {
- color: var(--env-var-color-5);
- font-size: var(--env-var-font-size-medium);
-}
-
-.adv-setting-title {
- font-weight: 500;
-}
-
-.config-box-inputs,
-.service-check-list,
-.incident-notif-config,
-.advanced-setting-config,
-.proxy-setting-config {
- padding-right: 40px;
-}
-
.monitors-create-button-holder {
display: flex;
justify-content: end;
diff --git a/Client/src/Pages/CreateNewMonitor/index.jsx b/Client/src/Pages/CreateNewMonitor/index.jsx
index 19dd1386a..dd94f907a 100644
--- a/Client/src/Pages/CreateNewMonitor/index.jsx
+++ b/Client/src/Pages/CreateNewMonitor/index.jsx
@@ -5,17 +5,19 @@ import React, { useState } from "react";
import RadioButton from "../../Components/RadioButton";
import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox";
import Button from "../../Components/Button";
-import { MenuItem, Select, Typography } from "@mui/material";
+import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
import { useSelector, useDispatch } from "react-redux";
import { createMonitorValidation } from "../../Validation/validation";
import { createMonitor } from "../../Features/Monitors/monitorsSlice";
import { useNavigate } from "react-router-dom";
+import { useTheme } from "@emotion/react";
const CreateNewMonitor = () => {
const MS_PER_MINUTE = 60000;
const { user, authToken } = useSelector((state) => state.auth);
const dispatch = useDispatch();
const navigate = useNavigate();
+ const theme = useTheme();
const [errors, setErrors] = useState({});
@@ -120,21 +122,31 @@ const CreateNewMonitor = () => {
const frequencies = [1, 2, 3, 4, 5];
return (
-
+