From 375db82c84d94fd6d41a266d547f24467a93d052 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Wed, 22 Nov 2023 16:43:08 -0500
Subject: [PATCH] :bug: Update migration wave form & modal styles (#1563)

Resolves https://issues.redhat.com/browse/MTA-742

---------

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 .../components/migration-wave-form.tsx        | 122 ++++++++----------
 .../pages/migration-waves/migration-waves.tsx |   2 +-
 2 files changed, 58 insertions(+), 66 deletions(-)

diff --git a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
index 337d071c8c..3788539a75 100644
--- a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
+++ b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
@@ -11,8 +11,6 @@ import {
   Grid,
   GridItem,
   DatePicker,
-  Level,
-  LevelItem,
 } from "@patternfly/react-core";
 
 import { useFetchStakeholders } from "@app/queries/stakeholders";
@@ -289,71 +287,65 @@ export const WaveForm: React.FC<WaveFormProps> = ({
             fieldId="name"
           />
         </GridItem>
-        <Level>
-          <LevelItem>
-            <GridItem span={5}>
-              <HookFormPFGroupController
-                control={control}
-                name="startDateStr"
-                label="Potential Start Date"
-                fieldId="startDateStr"
-                isRequired
-                renderInput={({ field: { value, name, onChange } }) => (
-                  <DatePicker
-                    aria-label={name}
-                    onChange={(e, val) => {
-                      onChange(val);
-                      trigger("endDateStr"); // Validation of endDateStr depends on startDateStr
-                    }}
-                    placeholder="MM/DD/YYYY"
-                    value={value}
-                    dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
-                    dateParse={(val) => dayjs(val).toDate()}
-                    validators={[startDateRangeValidator]}
-                    appendTo={() =>
-                      document.getElementById(
-                        "create-edit-migration-wave-modal"
-                      ) as HTMLElement
-                    }
-                  />
-                )}
+        <GridItem span={3}>
+          <HookFormPFGroupController
+            control={control}
+            name="startDateStr"
+            label="Potential Start Date"
+            fieldId="startDateStr"
+            isRequired
+            renderInput={({ field: { value, name, onChange } }) => (
+              <DatePicker
+                aria-label={name}
+                onChange={(e, val) => {
+                  onChange(val);
+                  trigger("endDateStr"); // Validation of endDateStr depends on startDateStr
+                }}
+                placeholder="MM/DD/YYYY"
+                value={value}
+                dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
+                dateParse={(val) => dayjs(val).toDate()}
+                validators={[startDateRangeValidator]}
+                appendTo={() => document.body}
               />
-            </GridItem>
-          </LevelItem>
-          <LevelItem>
-            <GridItem span={2}>to</GridItem>
-          </LevelItem>
-          <LevelItem>
-            <GridItem span={5}>
-              <HookFormPFGroupController
-                control={control}
-                name="endDateStr"
-                label="Potential End Date"
-                fieldId="endDateStr"
-                isRequired
-                renderInput={({ field: { value, name, onChange } }) => (
-                  <DatePicker
-                    aria-label={name}
-                    onChange={(e, val) => {
-                      onChange(val);
-                    }}
-                    placeholder="MM/DD/YYYY"
-                    value={value}
-                    dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
-                    dateParse={(val) => dayjs(val).toDate()}
-                    validators={[endDateRangeValidator]}
-                    appendTo={() =>
-                      document.getElementById(
-                        "create-edit-migration-wave-modal"
-                      ) as HTMLElement
-                    }
-                    isDisabled={!!formErrors.startDateStr}
-                  />
-                )}
+            )}
+          />
+        </GridItem>
+        <GridItem
+          span={1}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          to
+        </GridItem>
+
+        <GridItem span={8}>
+          <HookFormPFGroupController
+            control={control}
+            name="endDateStr"
+            label="Potential End Date"
+            fieldId="endDateStr"
+            isRequired
+            renderInput={({ field: { value, name, onChange } }) => (
+              <DatePicker
+                aria-label={name}
+                onChange={(e, val) => {
+                  onChange(val);
+                }}
+                placeholder="MM/DD/YYYY"
+                value={value}
+                dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
+                dateParse={(val) => dayjs(val).toDate()}
+                validators={[endDateRangeValidator]}
+                appendTo={() => document.body}
+                isDisabled={!!formErrors.startDateStr}
               />
-            </GridItem>
-          </LevelItem>
-        </Level>
+            )}
+          />
+        </GridItem>
         <GridItem span={12}>
           <HookFormPFGroupController
             control={control}
diff --git a/client/src/app/pages/migration-waves/migration-waves.tsx b/client/src/app/pages/migration-waves/migration-waves.tsx
index a88365a2a2..586f526b7e 100644
--- a/client/src/app/pages/migration-waves/migration-waves.tsx
+++ b/client/src/app/pages/migration-waves/migration-waves.tsx
@@ -584,7 +584,7 @@ export const MigrationWaves: React.FC = () => {
                 what: t("terms.migrationWave").toLowerCase(),
               })
         }
-        variant={ModalVariant.small}
+        variant={ModalVariant.medium}
         isOpen={isWaveModalOpen}
         onClose={closeWaveModal}
       >