From 331a1f39043dd7899080f4c25540d95e67f776d9 Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Mon, 5 Aug 2024 14:17:41 +0330
Subject: [PATCH 1/8] completing create new  maintenance window (no-repeat) UI

---
 .../CreateMaintenanceWindow/index.css         | 40 ++++++--
 .../CreateMaintenanceWindow/index.jsx         | 98 ++++++++++++++++++-
 2 files changed, 128 insertions(+), 10 deletions(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
index a799bf0af..04960d08b 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
@@ -1,11 +1,18 @@
-.maintenance-options > .MuiStack-root > .MuiStack-root.select-wrapper {
-  width: 380px;
+.maintenance-options {
+  > .MuiStack-root {
+    > .MuiStack-root.select-wrapper,
+    .field {
+      width: 380px;
+    }
+  }
 }
 
-.date-picker .MuiOutlinedInput-root,
-.time-picker .MuiOutlinedInput-root {
-  height: 34px;
-  font-size: var(--env-var-font-size-medium);
+.date-picker,
+.time-picker {
+  .MuiOutlinedInput-root {
+    height: 34px;
+    font-size: var(--env-var-font-size-medium);
+  }
 }
 
 .date-picker .MuiOutlinedInput-root {
@@ -19,3 +26,24 @@
 .MuiInputAdornment-outlined .MuiIconButton-root svg {
   width: 20px;
 }
+
+.duration-config {
+  .field-text .MuiTextField-root,
+  .field {
+    width: 70px;
+    min-width: 70px;
+    max-width: 70px;
+  }
+
+  > .MuiStack-root.select-wrapper {
+    width: 100px;
+
+    > .MuiInputBase-root:has(> .MuiSelect-select) {
+      min-width: 100px;
+    }
+  }
+
+  .select-wrapper .select-component > .MuiSelect-select {
+    text-transform: none;
+  }
+}
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index aea012e2c..b60b263a6 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -9,6 +9,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import dayjs from "dayjs";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
+import Field from "../../../Components/Inputs/Field";
 
 const directory = {
   title: "Create a maintenance window",
@@ -45,9 +46,29 @@ const configOptionTitle = (title, description) => {
   );
 };
 
+const timeFrames = [
+  { _id: "seconds", name: "seconds" },
+  { _id: "minutes", name: "minutes" },
+  { _id: "hours", name: "hours" },
+  { _id: "days", name: "days" },
+];
+
+const sxButtons = {
+  width: 110,
+  height: 34,
+};
+
 const CreateNewMaintenanceWindow = () => {
   const [values, setValues] = useState({
     repeat: 1,
+    date: dayjs(),
+    startTime: dayjs(),
+    duration: {
+      value: "60",
+      unit: "minutes",
+    },
+    friendlyName: "",
+    AddMonitors: "",
   });
 
   const handleChange = (event, name) => {
@@ -77,7 +98,13 @@ const CreateNewMaintenanceWindow = () => {
           className="date-localization-provider"
           dateAdapter={AdapterDayjs}
         >
-          <DatePicker className="date-picker" defaultValue={dayjs()} />
+          <DatePicker
+            className="date-picker"
+            defaultValue={values.date}
+            onChange={(date) =>
+              handleChange({ target: { value: date } }, "date")
+            }
+          />
         </LocalizationProvider>
       ),
     },
@@ -89,10 +116,68 @@ const CreateNewMaintenanceWindow = () => {
           className="time-localization-provider"
           dateAdapter={AdapterDayjs}
         >
-          <MobileTimePicker className="time-picker" defaultValue={dayjs()} />
+          <MobileTimePicker
+            className="time-picker"
+            defaultValue={values.startTime}
+            onChange={(time) =>
+              handleChange({ target: { value: time } }, "startTime")
+            }
+          />
         </LocalizationProvider>
       ),
     },
+    {
+      title: "Duration",
+      component: (
+        <Stack className="duration-config" gap={2} direction="row">
+          <Field
+            id="duration-value"
+            placeholder="60"
+            onChange={(e) => handleChange(e, "duration")}
+            value={values.duration.value}
+          />
+          <Select
+            onChange={(e) => handleChange(e, "duration.unit")}
+            id="duration-unit"
+            items={timeFrames}
+            value={values.duration.unit}
+          />
+        </Stack>
+      ),
+    },
+    {
+      title: "Friendly name",
+      component: (
+        <Field
+          id="friendly-name"
+          placeholder="Maintanence at __ : __ for ___ minutes"
+          value={values.friendlyName}
+          onChange={(e) => handleChange(e, "friendlyName")}
+        />
+      ),
+    },
+    {
+      title: "Add monitors",
+      component: (
+        <Stack gap={2}>
+          <Field
+            id="add-monitors"
+            placeholder="Start typing to search for current monitors"
+            value={values.AddMonitors}
+            onChange={(e) => handleChange(e, "AddMonitors")}
+          />
+          <Typography
+            sx={{
+              fontSize: "var(--env-var-font-size-small)",
+              borderBottom: "1px dashed var(--env-var-color-3)",
+              paddingBottom: 1,
+            }}
+          >
+            Add all monitors to this maintenance window
+          </Typography>
+        </Stack>
+      ),
+    },
   ];
 
   return (
@@ -127,22 +212,27 @@ const CreateNewMaintenanceWindow = () => {
           </Typography>
         </Box>
         <Stack
+          className="maintenance-options"
           gap={5}
           paddingY={4}
           paddingX={8}
+          paddingBottom={10}
           sx={{
             border: "1px solid var(--env-var-color-16)",
             borderRadius: "var(--env-var-radius-1)",
           }}
-          className="maintenance-options"
         >
           {configOptions.map((item, index) => (
             <Stack key={index} display="-webkit-inline-box">
-              {configOptionTitle(item.title, item.description)}
+              {item.title && configOptionTitle(item.title, item.description)}
               {item.component && item.component}
             </Stack>
           ))}
         </Stack>
+        <Stack justifyContent="end" direction="row" marginTop={3}>
+          <Button sx={sxButtons} level="tertiary" label="Cancel" />
+          <Button sx={sxButtons} level="primary" label="Create" />
+        </Stack>
       </Stack>
     </div>
   );

From 9fddfb26462a7f27dcd2761e3a13785396768faf Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Mon, 5 Aug 2024 21:25:21 +0330
Subject: [PATCH 2/8] bg height and spacing fixed

---
 Client/src/Layouts/HomeLayout/index.css                        | 2 +-
 Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index d30ed9462..595c2b67a 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -10,7 +10,7 @@
   grid-template-columns: var(--env-var-side-bar-width) auto;
   grid-template-rows: var(--env-var-nav-bar-height) auto;
   background-color: var(--env-var-color-30);
-  height: 100vh;
+  min-height: 100vh;
 }
 
 .home-layout aside {
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index b60b263a6..8d92cee4d 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -170,7 +170,7 @@ const CreateNewMaintenanceWindow = () => {
             sx={{
               fontSize: "var(--env-var-font-size-small)",
               borderBottom: "1px dashed var(--env-var-color-3)",
-              paddingBottom: 1,
+              paddingBottom: "4px",
             }}
           >
             Add all monitors to this maintenance window

From 1a796ded25c9733a65d8608386f0883e35c9fc41 Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Mon, 5 Aug 2024 21:41:28 +0330
Subject: [PATCH 3/8] spacing fixed

---
 Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index 8d92cee4d..b1f97aec0 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -168,6 +168,7 @@ const CreateNewMaintenanceWindow = () => {
           />
           <Typography
             sx={{
+              width: "fit-content",
               fontSize: "var(--env-var-font-size-small)",
               borderBottom: "1px dashed var(--env-var-color-3)",
               paddingBottom: "4px",

From 0664acd50a341193331ba9287c8a81b2f7c0c13b Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Tue, 6 Aug 2024 18:22:54 +0330
Subject: [PATCH 4/8] fixes

---
 .../CreateMaintenanceWindow/index.css         | 64 +++++++++----------
 .../CreateMaintenanceWindow/index.jsx         | 22 ++++---
 2 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
index 04960d08b..9855c89bb 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
@@ -1,18 +1,13 @@
-.maintenance-options {
-  > .MuiStack-root {
-    > .MuiStack-root.select-wrapper,
-    .field {
-      width: 380px;
-    }
-  }
+.maintenance-options .MuiStack-root .MuiStack-root.select-wrapper,
+.maintenance-options .MuiStack-root .field {
+  width: 60%;
+  max-width: 380px;
 }
 
-.date-picker,
-.time-picker {
-  .MuiOutlinedInput-root {
-    height: 34px;
-    font-size: var(--env-var-font-size-medium);
-  }
+.date-picker .MuiOutlinedInput-root,
+.time-picker .MuiOutlinedInput-root {
+  height: 34px;
+  font-size: var(--env-var-font-size-medium);
 }
 
 .date-picker .MuiOutlinedInput-root {
@@ -27,23 +22,28 @@
   width: 20px;
 }
 
-.duration-config {
-  .field-text .MuiTextField-root,
-  .field {
-    width: 70px;
-    min-width: 70px;
-    max-width: 70px;
-  }
-
-  > .MuiStack-root.select-wrapper {
-    width: 100px;
-
-    > .MuiInputBase-root:has(> .MuiSelect-select) {
-      min-width: 100px;
-    }
-  }
-
-  .select-wrapper .select-component > .MuiSelect-select {
-    text-transform: none;
-  }
+.duration-config .field-text .MuiTextField-root,
+.duration-config .field {
+  width: 70px;
+  min-width: 70px;
+  max-width: 70px;
+}
+
+.duration-config > .MuiStack-root.select-wrapper {
+  width: 100px;
+}
+
+.duration-config
+  > .MuiStack-root.select-wrapper
+  > .MuiInputBase-root:has(> .MuiSelect-select) {
+  width: 100px;
+  min-width: 100px;
+}
+
+.duration-config > .select-wrapper .select-component > .MuiSelect-select {
+  text-transform: none;
+}
+
+.maintenance-options .add-monitors-fields .field.field-text {
+  width: 100%;
 }
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index b1f97aec0..286d7798f 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -47,10 +47,10 @@ const configOptionTitle = (title, description) => {
 };
 
 const timeFrames = [
-  { _id: "seconds", name: "seconds" },
-  { _id: "minutes", name: "minutes" },
-  { _id: "hours", name: "hours" },
-  { _id: "days", name: "days" },
+  { _id: 1, name: "seconds" },
+  { _id: 2, name: "minutes" },
+  { _id: 3, name: "hours" },
+  { _id: 4, name: "days" },
 ];
 
 const sxButtons = {
@@ -64,8 +64,8 @@ const CreateNewMaintenanceWindow = () => {
     date: dayjs(),
     startTime: dayjs(),
     duration: {
-      value: "60",
-      unit: "minutes",
+      magnitude: "",
+      unit: 1,
     },
     friendlyName: "",
     AddMonitors: "",
@@ -133,8 +133,8 @@ const CreateNewMaintenanceWindow = () => {
           <Field
             id="duration-value"
             placeholder="60"
-            onChange={(e) => handleChange(e, "duration")}
-            value={values.duration.value}
+            onChange={(e) => handleChange(e, "duration.magnitude")}
+            value={values["duration.unit"]}
           />
           <Select
             onChange={(e) => handleChange(e, "duration.unit")}
@@ -159,7 +159,11 @@ const CreateNewMaintenanceWindow = () => {
     {
       title: "Add monitors",
       component: (
-        <Stack gap={2}>
+        <Stack
+          className="add-monitors-fields"
+          sx={{ width: "60%", maxWidth: "380px" }}
+          gap={2}
+        >
           <Field
             id="add-monitors"
             placeholder="Start typing to search for current monitors"

From acf13ad78ed2abb70a62f9cdf7242baf27fc13e0 Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Tue, 6 Aug 2024 18:41:00 +0330
Subject: [PATCH 5/8] fixes

---
 .../Maintenance/CreateMaintenanceWindow/index.jsx  | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index 286d7798f..a31fc3385 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -63,10 +63,8 @@ const CreateNewMaintenanceWindow = () => {
     repeat: 1,
     date: dayjs(),
     startTime: dayjs(),
-    duration: {
-      magnitude: "",
-      unit: 1,
-    },
+    duration: "60",
+    unit: "minutes",
     friendlyName: "",
     AddMonitors: "",
   });
@@ -133,14 +131,14 @@ const CreateNewMaintenanceWindow = () => {
           <Field
             id="duration-value"
             placeholder="60"
-            onChange={(e) => handleChange(e, "duration.magnitude")}
-            value={values["duration.unit"]}
+            onChange={(e) => handleChange(e, "duration")}
+            value={values.duration}
           />
           <Select
-            onChange={(e) => handleChange(e, "duration.unit")}
+            onChange={(e) => handleChange(e, "unit")}
             id="duration-unit"
             items={timeFrames}
-            value={values.duration.unit}
+            value={values.unit}
           />
         </Stack>
       ),

From 064bec458cce1cb3f49838b295cc786ac6f0c46a Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Wed, 7 Aug 2024 22:46:48 +0330
Subject: [PATCH 6/8] fixes

---
 .../Maintenance/CreateMaintenanceWindow/index.css   |  6 ++++++
 .../Maintenance/CreateMaintenanceWindow/index.jsx   | 13 ++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
index 9855c89bb..531a2df88 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
@@ -47,3 +47,9 @@
 .maintenance-options .add-monitors-fields .field.field-text {
   width: 100%;
 }
+
+.MuiPopover-paper.MuiMenu-paper.select-dropdown
+  .MuiMenu-list
+  .MuiButtonBase-root {
+  text-transform: none;
+}
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index a31fc3385..3eda3e4af 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -47,10 +47,9 @@ const configOptionTitle = (title, description) => {
 };
 
 const timeFrames = [
-  { _id: 1, name: "seconds" },
-  { _id: 2, name: "minutes" },
-  { _id: 3, name: "hours" },
-  { _id: 4, name: "days" },
+  { _id: "minutes", name: "minutes" },
+  { _id: "hours", name: "hours" },
+  { _id: "days", name: "days" },
 ];
 
 const sxButtons = {
@@ -63,7 +62,7 @@ const CreateNewMaintenanceWindow = () => {
     repeat: 1,
     date: dayjs(),
     startTime: dayjs(),
-    duration: "60",
+    durationOptions: "60",
     unit: "minutes",
     friendlyName: "",
     AddMonitors: "",
@@ -131,8 +130,8 @@ const CreateNewMaintenanceWindow = () => {
           <Field
             id="duration-value"
             placeholder="60"
-            onChange={(e) => handleChange(e, "duration")}
-            value={values.duration}
+            onChange={(e) => handleChange(e, "durationOptions")}
+            value={values.durationOptions}
           />
           <Select
             onChange={(e) => handleChange(e, "unit")}

From 0ae29e13a5823f889da50ed65d02e44c116e7add Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Thu, 8 Aug 2024 09:13:46 +0330
Subject: [PATCH 7/8] fixes

---
 .../Maintenance/CreateMaintenanceWindow/index.jsx    | 12 ++++++------
 Client/src/index.css                                 |  1 +
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index 3eda3e4af..e4e244b6c 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -46,7 +46,7 @@ const configOptionTitle = (title, description) => {
   );
 };
 
-const timeFrames = [
+const durationOptions = [
   { _id: "minutes", name: "minutes" },
   { _id: "hours", name: "hours" },
   { _id: "days", name: "days" },
@@ -62,7 +62,7 @@ const CreateNewMaintenanceWindow = () => {
     repeat: 1,
     date: dayjs(),
     startTime: dayjs(),
-    durationOptions: "60",
+    duration: "60",
     unit: "minutes",
     friendlyName: "",
     AddMonitors: "",
@@ -107,7 +107,6 @@ const CreateNewMaintenanceWindow = () => {
     },
     {
       title: "Start time",
-      description: "Your pings won’t be sent in this time frame.",
       component: (
         <LocalizationProvider
           className="time-localization-provider"
@@ -130,13 +129,13 @@ const CreateNewMaintenanceWindow = () => {
           <Field
             id="duration-value"
             placeholder="60"
-            onChange={(e) => handleChange(e, "durationOptions")}
-            value={values.durationOptions}
+            onChange={(e) => handleChange(e, "duration")}
+            value={values.duration}
           />
           <Select
             onChange={(e) => handleChange(e, "unit")}
             id="duration-unit"
-            items={timeFrames}
+            items={durationOptions}
             value={values.unit}
           />
         </Stack>
@@ -222,6 +221,7 @@ const CreateNewMaintenanceWindow = () => {
           sx={{
             border: "1px solid var(--env-var-color-16)",
             borderRadius: "var(--env-var-radius-1)",
+            backgroundColor: "var(--env-var-color-0)",
           }}
         >
           {configOptions.map((item, index) => (
diff --git a/Client/src/index.css b/Client/src/index.css
index 7f66b6ebd..9156c6945 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -17,6 +17,7 @@
 
   --env-var-font-familt-1: "Roboto", "Helvetica", "Arial", sans-serif;
 
+  --env-var-color-0: #fff;
   --env-var-color-1: #101828;
   --env-var-color-2: #475467;
   --env-var-color-3: #1570ef;

From 2a3bb928772fa4dc440fbc2066e1083566d2bd22 Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Fri, 9 Aug 2024 11:09:28 +0330
Subject: [PATCH 8/8] animations and ripple effects removed

---
 .../CreateMaintenanceWindow/index.css         | 16 +++++++++++
 .../CreateMaintenanceWindow/index.jsx         | 27 ++++++++++++++-----
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
index 531a2df88..0d3026c78 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
@@ -53,3 +53,19 @@
   .MuiButtonBase-root {
   text-transform: none;
 }
+
+.date-picker
+  .MuiOutlinedInput-root
+  .MuiInputAdornment-outlined
+  .MuiIconButton-root {
+  outline: none;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+.create-maintenance-window .MuiStack-root .MuiStack-root > button {
+  width: 110px;
+  height: 34px;
+}
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index e4e244b6c..187d9c63d 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -52,11 +52,6 @@ const durationOptions = [
   { _id: "days", name: "days" },
 ];
 
-const sxButtons = {
-  width: 110,
-  height: 34,
-};
-
 const CreateNewMaintenanceWindow = () => {
   const [values, setValues] = useState({
     repeat: 1,
@@ -232,8 +227,26 @@ const CreateNewMaintenanceWindow = () => {
           ))}
         </Stack>
         <Stack justifyContent="end" direction="row" marginTop={3}>
-          <Button sx={sxButtons} level="tertiary" label="Cancel" />
-          <Button sx={sxButtons} level="primary" label="Create" />
+          <Button
+            sx={{
+              "&:hover": {
+                backgroundColor: "transparent",
+                boxShadow: "none",
+              },
+            }}
+            level="tertiary"
+            label="Cancel"
+          />
+          <Button
+            sx={{
+              "&:hover": {
+                backgroundColor: "#1570EF",
+                boxShadow: "none",
+              },
+            }}
+            level="primary"
+            label="Create"
+          />
         </Stack>
       </Stack>
     </div>