Added breadcrumbs to create monitor

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

@@ -13,7 +13,9 @@
 .create-monitor button.MuiButtonBase-root {
   font-size: var(--env-var-font-size-medium);
 }
-.create-monitor h2.MuiTypography-root,
+.create-monitor h2.MuiTypography-root {
+  color: var(--env-var-color-5);
+}
 .create-monitor h6.MuiTypography-root,
 .create-monitor p.MuiTypography-root {
   color: var(--env-var-color-2);
@@ -43,23 +45,20 @@
   top: 100%;
 }
 .create-monitor .config-box {
-  padding: var(--env-var-spacing-4) 50px;
-  padding-bottom: 60px;
+  flex-direction: row;
   border: 1px solid var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
-  flex-direction: row;
-  gap: var(--env-var-spacing-4);
   background-color: var(--env-var-color-8);
 }
-.create-monitor .config-box .MuiBox-root,
-.create-monitor .config-box .MuiStack-root {
+.create-monitor .config-box > .MuiBox-root,
+.create-monitor .config-box > .MuiStack-root {
   flex: 1;
+  padding: 24px 30px;
+  padding-bottom: 40px;
 }
-
-.create-monitor-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--env-var-spacing-2);
+.create-monitor .config-box > *:first-child {
+  flex: 0.7;
+  border-right: solid 1px var(--env-var-color-16);
 }
 
 .create-monitor .MuiStack-root .MuiButtonGroup-root button {

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

@@ -8,11 +8,11 @@ import { monitorValidation } from "../../../Validation/validation";
 import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import { createToast } from "../../../Utils/toastUtils";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 const CreateMonitor = () => {
   const MS_PER_MINUTE = 60000;
@@ -143,33 +143,26 @@ const CreateMonitor = () => {
 
   return (
     <Box className="create-monitor">
-      <Button
-        level="tertiary"
-        label="Back"
-        animate="slideLeft"
-        img={<WestRoundedIcon />}
-        onClick={() => navigate("/monitors")}
-        sx={{
-          backgroundColor: theme.palette.otherColors.fillGray,
-          mb: theme.gap.medium,
-          px: theme.gap.ml,
-          "& svg.MuiSvgIcon-root": {
-            mr: theme.gap.small,
-            fill: theme.palette.otherColors.slateGray,
-          },
-        }}
+      <Breadcrumbs
+        list={[
+          { name: "monitors", path: "/monitors" },
+          { name: "details", path: `/monitors/create` },
+        ]}
       />
-      <form
+      <Stack
+        component="form"
         className="create-monitor-form"
         onSubmit={handleCreateMonitor}
         noValidate
         spellCheck="false"
+        gap={theme.gap.large}
+        mt={theme.gap.mlplus}
       >
         <Typography component="h1">Create new monitor</Typography>
         <Stack className="config-box">
           <Box>
             <Typography component="h2">General settings</Typography>
-            <Typography component="p" mt={theme.gap.small}>
+            <Typography component="p" mt={theme.gap.xs}>
               Here you can select the URL of the host, together with the type of
               monitor.
             </Typography>
@@ -200,7 +193,7 @@ const CreateMonitor = () => {
         <Stack className="config-box">
           <Box>
             <Typography component="h2">Checks to perform</Typography>
-            <Typography component="p" mt={theme.gap.small}>
+            <Typography component="p" mt={theme.gap.xs}>
               You can always add or remove checks after adding your site.
             </Typography>
           </Box>
@@ -249,28 +242,26 @@ const CreateMonitor = () => {
               checked={monitor.type === "ping"}
               onChange={(event) => handleChange(event)}
             />
-            <Box className="error-container">
-              {errors["type"] ? (
+            {errors["type"] ? (
+              <Box className="error-container">
                 <Typography component="p" className="input-error">
                   {errors["type"]}
                 </Typography>
-              ) : (
-                ""
-              )}
-            </Box>
+              </Box>
+            ) : (
+              ""
+            )}
           </Stack>
         </Stack>
         <Stack className="config-box">
           <Box>
             <Typography component="h2">Incident notifications</Typography>
-            <Typography component="p" mt={theme.gap.small}>
+            <Typography component="p" mt={theme.gap.xs}>
               When there is an incident, notify users.
             </Typography>
           </Box>
           <Stack gap={theme.gap.medium}>
-            <Typography component="p" mt={theme.gap.small}>
-              When there is a new incident,
-            </Typography>
+            <Typography component="p">When there is a new incident,</Typography>
             <Checkbox
               id="notify-sms"
               label="Notify via SMS (coming soon)"
@@ -404,7 +395,7 @@ const CreateMonitor = () => {
             disabled={Object.keys(errors).length !== 0 && true}
           />
         </Stack>
-      </form>
+      </Stack>
     </Box>
   );
 };