Replaced textfield components in new monitor page

Client/src/Components/TextFields/Field/index.css

@@ -15,31 +15,36 @@
 .field h3.MuiTypography-root {
   font-weight: 500;
 }
-.field h3.MuiTypography-root span {
+.field h3.MuiTypography-root span.field-required {
   color: var(--env-var-color-19);
   margin-left: 1px;
 }
+.field h3.MuiTypography-root span.field-optional {
+  opacity: 0.6;
+  margin-left: 4px;
+}
 .field h5.MuiTypography-root {
   position: relative;
   opacity: 0.8;
-  padding: var(--env-var-spacing-1-minus);
-  padding-left: 0;
-  border-right: solid 1px var(--env-var-color-29);
+  padding-right: var(--env-var-spacing-1-minus);
 }
 .field .MuiInputBase-root {
-  height: 35px;
-  overflow: hidden;
+  height: 34px;
 }
 .field .MuiInputBase-root:has(.MuiInputAdornment-root) {
   padding-right: var(--env-var-spacing-1-minus);
 }
 .field input {
+  height: 100%;
   padding: 0 var(--env-var-spacing-1-minus);
 }
 .field .MuiOutlinedInput-root fieldset {
   border-color: var(--env-var-color-29);
   border-radius: var(--env-var-radius-1);
 }
+.field .MuiOutlinedInput-root:hover:not(:has(input:focus)) fieldset {
+  border-color: var(--env-var-color-29);
+}
 .field .input-error {
   color: var(--env-var-color-24);
   opacity: 0.8;

Client/src/Components/TextFields/Field/index.jsx

@@ -15,6 +15,7 @@ const Field = ({
   id,
   label,
   isRequired,
+  isOptional,
   isVisible,
   setVisibility,
   autoComplete,
@@ -31,7 +32,8 @@ const Field = ({
       {label && (
         <Typography component="h3">
           {label}
-          {isRequired ? <span>*</span> : ""}
+          {isRequired ? <span className="field-required">*</span> : ""}
+          {isOptional ? <span className="field-optional">(optional)</span> : ""}
         </Typography>
       )}
       <TextField
@@ -44,7 +46,16 @@ const Field = ({
         disabled={disabled}
         InputProps={{
           startAdornment: type === "url" && (
-            <Typography component="h5">https://</Typography>
+            <Stack
+              direction="row"
+              alignItems="center"
+              height="100%"
+              sx={{
+                borderRight: `solid 1px ${theme.palette.section.borderColor}`,
+              }}
+            >
+              <Typography component="h5">https://</Typography>
+            </Stack>
           ),
           endAdornment: type === "password" && (
             <InputAdornment position="end">

Client/src/Pages/CreateNewMonitor/index.css

@@ -55,6 +55,13 @@
   outline: none;
   border: none;
 }
+.create-monitor-form .MuiStack-root:has(span.MuiTypography-root.input-error) {
+  position: relative;
+}
+.create-monitor-form span.MuiTypography-root.input-error {
+  position: absolute;
+  top: 100%;
+}
 
 .monitors-gaps-medium {
   height: var(--env-var-spacing-2);

Client/src/Pages/CreateNewMonitor/index.jsx

@@ -1,6 +1,5 @@
 import "./index.css";
 import ConfigBox from "../../Components/ConfigBox";
-import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField";
 import React, { useState } from "react";
 import RadioButton from "../../Components/RadioButton";
 import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox";
@@ -12,6 +11,7 @@ import { createMonitor } from "../../Features/Monitors/monitorsSlice";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
+import Field from "../../Components/TextFields/Field";
 
 const CreateNewMonitor = () => {
   const MS_PER_MINUTE = 60000;
@@ -86,6 +86,7 @@ const CreateNewMonitor = () => {
     //obj to submit
     let monitor = {
       ...generalSettings,
+      url: "https://" + generalSettings.url,
       ...checks,
     };
 
@@ -162,25 +163,22 @@ const CreateNewMonitor = () => {
         }
         rightLayout={
           <Stack gap={theme.gap.xl}>
-            <FlexibileTextField
-              id="monitor-url"
-              title="URL to monitor"
+            <Field
               type="url"
-              placeholder="https://google.com"
+              id="monitor-url"
+              label="URL to monitor"
+              placeholder="google.com"
               value={generalSettings.url}
               onChange={(event) =>
                 handleChange(event, "url", setGeneralSettings)
               }
               error={errors["url"]}
             />
-            <FlexibileTextField
-              id="monitor-name"
-              title={
-                <>
-                  Friendly name <span>(optional)</span>
-                </>
-              }
+            <Field
               type="text"
+              id="monitor-name"
+              label="Friendly name"
+              isOptional={true}
               placeholder="Google"
               value={generalSettings.name}
               onChange={(event) =>