From d3436fc4cf5ca4ce327ecd0b08b107f72b3a10ce Mon Sep 17 00:00:00 2001
From: pooja-jaiswal_navi <pooja.jaiswal@navi.com>
Date: Wed, 10 Jan 2024 16:37:57 +0530
Subject: [PATCH] TP-53587 | button alignment

---
 .../partials/CreateIncident.module.scss       | 30 +++++++++++++++----
 .../Dashboard/partials/CreateIncidentForm.tsx | 27 ++++++++++++++++-
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/Pages/Dashboard/partials/CreateIncident.module.scss b/src/Pages/Dashboard/partials/CreateIncident.module.scss
index 8c240e3..146ad62 100644
--- a/src/Pages/Dashboard/partials/CreateIncident.module.scss
+++ b/src/Pages/Dashboard/partials/CreateIncident.module.scss
@@ -58,17 +58,35 @@
   margin: 20px 0 0 40px;
 }
 
-.create,
-.cancel {
+@mixin button-styles {
+  cursor: pointer;
+  height: 36px;
+}
+.button-wrapper {
   @include button-styles;
+  bottom: 0;
+  position: fixed;
+  display: flex;
+  margin-bottom: 24px;
+  gap: 24px;
+}
+.create {
   width: 231px;
+  height: 36px;
+}
+.cancel {
+  width: 231px;
+  height: 36px;
+  margin-left: 20px;
 }
-
 .footer-wrapper {
-  @include flex-center;
-  margin-top: 380px;
+  position: relative;
+}
+.hr {
+  width: 100%;
+  background-color: var(--navi-color-gray-border);
+  margin-top: calc(100% - (36px + 36px));
 }
-
 .incident-wrapper,
 .Description-wrapper,
 .severity-picker,
diff --git a/src/Pages/Dashboard/partials/CreateIncidentForm.tsx b/src/Pages/Dashboard/partials/CreateIncidentForm.tsx
index 6b2019f..7f97b14 100644
--- a/src/Pages/Dashboard/partials/CreateIncidentForm.tsx
+++ b/src/Pages/Dashboard/partials/CreateIncidentForm.tsx
@@ -265,7 +265,7 @@ const CreateIncidentForm: React.FC<CreateIncidentFormProps> = ({
         />
       </div>
 
-      <div className={styles['footer-wrapper']}>
+      {/* <div className={styles['footer-wrapper']}>
         <div className={styles['cancel']}>
           <Button variant="secondary" fullWidth onClick={clearDrawer}>
             Cancel
@@ -281,6 +281,31 @@ const CreateIncidentForm: React.FC<CreateIncidentFormProps> = ({
             Create incident
           </Button>
         </div>
+      </div> */}
+      <div className={styles['footer-wrapper']}>
+        <div className={styles['horizontal-line']}>
+          <hr className={styles['hr']}></hr>{' '}
+        </div>
+        <div className={styles['button-wrapper']}>
+          <Button
+            variant="secondary"
+            className={styles['cancel']}
+            fullWidth
+            onClick={clearDrawer}
+          >
+            Cancel
+          </Button>
+
+          <Button
+            variant="primary"
+            fullWidth
+            className={styles['create']}
+            onClick={createIncidentHandler}
+            disabled={isDisabled()}
+          >
+            Create incident
+          </Button>
+        </div>
       </div>
     </div>
   );