From 1ef065947be057dd2389fb74f1e76eb45801ea41 Mon Sep 17 00:00:00 2001
From: pooja-jaiswal_navi <pooja.jaiswal@navi.com>
Date: Fri, 12 Jan 2024 14:06:10 +0530
Subject: [PATCH] TP-53587 | Footer button alignment fixed for create incident

---
 .../partials/CreateIncident.module.scss       |  28 ++-
 .../Dashboard/partials/CreateIncidentForm.tsx | 183 ++++++++----------
 2 files changed, 95 insertions(+), 116 deletions(-)

diff --git a/src/Pages/Dashboard/partials/CreateIncident.module.scss b/src/Pages/Dashboard/partials/CreateIncident.module.scss
index 146ad62..57552f7 100644
--- a/src/Pages/Dashboard/partials/CreateIncident.module.scss
+++ b/src/Pages/Dashboard/partials/CreateIncident.module.scss
@@ -33,13 +33,9 @@
 
 .drawer {
   width: 550px !important;
-}
 
-.header {
-  padding: 16px !important;
-
-  > span {
-    @include flex-center;
+  > div {
+    padding: 10px 0px 10px 0px !important;
   }
 }
 
@@ -69,23 +65,23 @@
   display: flex;
   margin-bottom: 24px;
   gap: 24px;
+  border-top: 1px solid var(--navi-drawer-divider-color);
+  padding-top: 20px;
+  width: 100%;
 }
 .create {
-  width: 231px;
+  width: 242px;
   height: 36px;
 }
 .cancel {
-  width: 231px;
+  width: 242px;
   height: 36px;
   margin-left: 20px;
 }
 .footer-wrapper {
   position: relative;
-}
-.hr {
   width: 100%;
-  background-color: var(--navi-color-gray-border);
-  margin-top: calc(100% - (36px + 36px));
+  box-sizing: border-box;
 }
 .incident-wrapper,
 .Description-wrapper,
@@ -93,9 +89,11 @@
 .Team-wrapper {
   @include wrapper-styles;
 }
-
+.form-wrapper {
+  margin: 10px 10px 0px 10px;
+}
 .severity-wrapper {
-  width: calc(100% - 156px);
+  width: calc(100% - 163px);
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -137,7 +135,7 @@
 .select-picker-item {
   min-width: 352px;
   margin-top: 2px;
-  margin-left: 14px;
+  margin-left: 24px;
 }
 
 .arrow-down {
diff --git a/src/Pages/Dashboard/partials/CreateIncidentForm.tsx b/src/Pages/Dashboard/partials/CreateIncidentForm.tsx
index 7f97b14..3f077e8 100644
--- a/src/Pages/Dashboard/partials/CreateIncidentForm.tsx
+++ b/src/Pages/Dashboard/partials/CreateIncidentForm.tsx
@@ -176,116 +176,97 @@ const CreateIncidentForm: React.FC<CreateIncidentFormProps> = ({
 
   return (
     <div>
-      <div className={styles['incident-wrapper']}>
-        <div className={styles['incident-name']}>Incident title</div>
-        <TextArea
-          name="title"
-          placeholder="Enter incident title"
-          containerClassName={styles.textarea}
-          rows={3}
-          onChange={handleTitleChange as any}
-          value={state.title}
-          fullWidth
-          error={
-            !state.isTitleValid
-              ? `Title should be less than ${LIMITS.title.max} characters`
-              : ''
-          }
-          size="large"
-        />
-      </div>
-      <div className={styles['severity-picker']}>
-        <div className={styles['name-wrapper']}>Choose severity</div>
-        <div className={styles['severity-wrapper']}>
-          {state.severity.map((severityOption: SelectPickerOptionProps) => (
-            <Chip
-              key={severityOption.value}
-              label={severityOption.label}
-              size="medium"
-              onChipClick={() => handleSeverityChange(severityOption as any)}
-              selected={severityOption === state.selectedSeverity}
-            />
-          ))}
+      <div className={styles['form-wrapper']}>
+        <div className={styles['incident-wrapper']}>
+          <div className={styles['incident-name']}>Incident title</div>
+          <TextArea
+            name="title"
+            placeholder="Enter incident title"
+            containerClassName={styles.textarea}
+            rows={3}
+            onChange={handleTitleChange as any}
+            value={state.title}
+            fullWidth
+            error={
+              !state.isTitleValid
+                ? `Title should be less than ${LIMITS.title.max} characters`
+                : ''
+            }
+            size="large"
+          />
         </div>
-      </div>
-      <div className={styles['Team-wrapper']}>
-        <div className={styles['name-wrapper']}>Choose team</div>
-
-        <div className={styles['team-div']} onClick={handleDivClick}>
-          <div className={styles['select-team']}>
-            <Typography
-              variant="p3"
-              color={
-                state.selectedTeam.length === 0
-                  ? 'var(--navi-color-gray-c2)'
-                  : 'var(--navi-color-gray-c1)'
-              }
-            >
-              {state.selectedTeam.length === 0
-                ? 'Select team'
-                : ` ${state.selectedTeam.label}`}
-            </Typography>
-            <ArrowDownSolidIcon
-              color="var(--navi-color-gray-c3)"
-              className={styles['arrow-down']}
-            />
+        <div className={styles['severity-picker']}>
+          <div className={styles['name-wrapper']}>Choose severity</div>
+          <div className={styles['severity-wrapper']}>
+            {state.severity.map((severityOption: SelectPickerOptionProps) => (
+              <Chip
+                key={severityOption.value}
+                label={severityOption.label}
+                size="medium"
+                onChipClick={() => handleSeverityChange(severityOption as any)}
+                selected={severityOption === state.selectedSeverity}
+              />
+            ))}
           </div>
         </div>
-        <div className={styles['select-picker-style']}>
-          {state.openSelect && (
-            <div className={styles['select-picker']} ref={ref}>
-              <SelectPicker
-                options={getTeams(state.teams)}
-                placeholder="Select team"
-                onSelectionChange={handleTeamChange}
-                multiSelect={false}
-                showSearchBar
-                wrapperClasses={styles['select-picker-item']}
+        <div className={styles['Team-wrapper']}>
+          <div className={styles['name-wrapper']}>Choose team</div>
+
+          <div className={styles['team-div']} onClick={handleDivClick}>
+            <div className={styles['select-team']}>
+              <Typography
+                variant="p3"
+                color={
+                  state.selectedTeam.length === 0
+                    ? 'var(--navi-color-gray-c2)'
+                    : 'var(--navi-color-gray-c1)'
+                }
+              >
+                {state.selectedTeam.length === 0
+                  ? 'Select team'
+                  : ` ${state.selectedTeam.label}`}
+              </Typography>
+              <ArrowDownSolidIcon
+                color="var(--navi-color-gray-c3)"
+                className={styles['arrow-down']}
               />
             </div>
-          )}
+          </div>
+          <div className={styles['select-picker-style']} ref={ref}>
+            {state.openSelect && (
+              <div className={styles['select-picker']}>
+                <SelectPicker
+                  options={getTeams(state.teams)}
+                  placeholder="Select team"
+                  onSelectionChange={handleTeamChange}
+                  multiSelect={false}
+                  showSearchBar
+                  wrapperClasses={styles['select-picker-item']}
+                />
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-      <div className={styles['Description-wrapper']}>
-        <div className={styles['Desc-name']}>Description</div>
-        <TextArea
-          name="title"
-          placeholder="Enter incident description"
-          containerClassName={styles.textarea}
-          rows={7}
-          value={state.description}
-          onChange={handleDescriptionChange as any}
-          error={
-            !state.isDescriptionValid
-              ? `Description should be less than ${LIMITS.description.max} characters`
-              : ''
-          }
-          fullWidth
-          size="large"
-        />
-      </div>
-
-      {/* <div className={styles['footer-wrapper']}>
-        <div className={styles['cancel']}>
-          <Button variant="secondary" fullWidth onClick={clearDrawer}>
-            Cancel
-          </Button>
-        </div>
-        <div className={styles['create']}>
-          <Button
-            variant="primary"
+        <div className={styles['Description-wrapper']}>
+          <div className={styles['Desc-name']}>Description</div>
+          <TextArea
+            name="title"
+            placeholder="Enter incident description"
+            containerClassName={styles.textarea}
+            rows={7}
+            value={state.description}
+            onChange={handleDescriptionChange as any}
+            error={
+              !state.isDescriptionValid
+                ? `Description should be less than ${LIMITS.description.max} characters`
+                : ''
+            }
             fullWidth
-            onClick={() => createIncidentHandler()}
-            disabled={isDisabled()}
-          >
-            Create incident
-          </Button>
+            size="large"
+          />
         </div>
-      </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"