fixing bugs

Client/src/Components/Button/index.jsx

@@ -48,10 +48,11 @@ const levelConfig = {
  * <Button type="submit" level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
  */
 
-const Button = ({ type, level, label, disabled, img, onClick, sx }) => {
+const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
   const { variant, color } = levelConfig[level];
   return (
     <MuiButton
+      id={id}
       type={type}
       variant={variant}
       color={color}
@@ -72,6 +73,7 @@ const Button = ({ type, level, label, disabled, img, onClick, sx }) => {
 };
 
 Button.propTypes = {
+  id: PropTypes.string,
   type: PropTypes.string,
   level: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,

Client/src/Components/RadioButton/index.css

@@ -0,0 +1,3 @@
+.MuiButtonBase-root.MuiRadio-root.MuiRadio-colorPrimary.PrivateSwitchBase-root.MuiRadio-root.MuiRadio-colorPrimary.MuiRadio-root.MuiRadio-colorPrimary.css-w5ovia-MuiButtonBase-root-MuiRadio-root {
+  padding-top: 0;
+}

Client/src/Components/RadioButton/index.jsx

@@ -19,6 +19,7 @@
 
 import { FormControlLabel, Radio } from "@mui/material";
 import React from "react";
+import "./index.css";
 import PropTypes from "prop-types";
 
 function RadioButton(props) {

Client/src/Pages/Monitors/CreateNewMonitor.jsx

@@ -8,6 +8,18 @@ import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox
 import Button from "../../Components/Button";
 
 const CreateNewMonitor = () => {
+  const portOptions = [
+    { label: "Port 1", value: "Port1" },
+    { label: "Port 2", value: "Port2" },
+    // Add more Ports as needed
+  ];
+
+  const frequencyOptions = [
+    { label: "1 minute", value: "1" },
+    { label: "5 minutes", value: "5" },
+    // Add more Ports as needed
+  ];
+
   const [incidentEmail, setIncidentEmail] = useState("");
 
   const [notifyViaSMS, setNotifyViaSMS] = useState(false);
@@ -28,6 +40,17 @@ const CreateNewMonitor = () => {
   const [urlToMonitor, setUrlToMonitor] = useState("");
   const [friendlyName, setFriendlyName] = useState("");
 
+  const [port, setPort] = useState("Select a port to check");
+  const [frequncy, setFrequency] = useState("1 minute");
+
+  const handlePortOptionChange = (newValue) => {
+    setPort(newValue);
+  };
+
+  const handleFrequencyOptionChange = (newValue) => {
+    setPort(newValue);
+  };
+
   const handleUrlToMonitor = (event) => {
     setUrlToMonitor(event.target.value);
     console.log(urlToMonitor);
@@ -162,9 +185,15 @@ const CreateNewMonitor = () => {
               checked={selectedMonitorType === "port"}
               onChange={() => handleMonitorTypeChange("port")}
             />
-            <div className="monitors-gaps-medium"></div>
+            <div className="monitors-gaps-small-plus"></div>
             <div className="monitors-dropdown-holder">
-              <FlexibileTextField placeholder="Select a port to check" />
+              <Dropdown
+                id="ports-dropdown"
+                label="Select a port to check"
+                onChange={handlePortOptionChange}
+                options={portOptions}
+                value={port}
+              />
             </div>
           </div>
         }
@@ -228,7 +257,14 @@ const CreateNewMonitor = () => {
         rightLayout={
           <div className="advanced-setting-config">
             <div className="adv-setting-title">Check frequency</div>
-            <FlexibileTextField />
+            <div className="monitors-gaps-small"></div>
+            <Dropdown
+              id="freq-dropdown"
+              label="1 minutes"
+              onChange={handleFrequencyOptionChange}
+              options={frequencyOptions}
+              value={frequencyOptions}
+            />
             <div className="monitors-gaps-medium"></div>
             <div className="adv-setting-title">
               Maximum retries before the service is marked as down
@@ -286,6 +322,7 @@ const CreateNewMonitor = () => {
       <div className="monitors-gaps-small"></div>
       <div className="monitors-create-button-holder">
         <Button
+          id="create-new-monitor-btn"
           level="primary"
           label="Create new monitor"
           sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }}

Client/src/Pages/Monitors/index.css

@@ -4,6 +4,10 @@
   padding: 4vw;
 }
 
+.monitors {
+  font-family: var(--env-var-font-familt-1);
+}
+
 .monitors-bar {
   display: flex;
   justify-content: space-between;
@@ -28,6 +32,10 @@
   height: var(--env-var-spacing-1-plus);
 }
 
+.monitors-gaps-small {
+  height: 6px;
+}
+
 .new-monitor-header {
   color: var(--env-var-color-1);
   font-size: var(--env-var-font-size-large-plus);
@@ -74,6 +82,7 @@
 .incident-notif-config,
 .advanced-setting-config,
 .proxy-setting-config {
+  min-width: 350px;
   padding-right: 40px;
 }
 
@@ -81,3 +90,13 @@
   display: flex;
   justify-content: end;
 }
+
+#create-new-monitor-btn {
+  padding-top: 6px;
+}
+
+#ports-dropdown,
+#freq-dropdown {
+  width: 226.8px;
+  height: 20px;
+}

Client/src/Pages/Monitors/index.jsx

@@ -17,7 +17,8 @@ const Monitors = () => {
 
   return (
     <div className="monitors">
-      <CurrentStats monitors={monitorState.monitors} />
+      {/* <CurrentStats monitors={monitorState.monitors} /> */}
+      <CreateNewMonitor />
     </div>
   );
 };

Client/src/index.css

@@ -77,6 +77,8 @@
 
   --env-var-shadow-1: 0px 4px 24px -4px rgba(16, 24, 40, 0.08),
     0px 3px 3px -3px rgba(16, 24, 40, 0.03);
+
+  --env-var-font-familt-1: "Roboto", "Helvetica", "Arial", sans-serif;
 }
 
 a {