🐛 Update migration wave styles

Signed-off-by: ibolton336 <[email protected]>
konveyor · Nov 21, 2023 · 9b58b4d · 9b58b4d
1 parent d215b73
commit 9b58b4d
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 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
@@ -11,8 +11,6 @@ import {
   Grid,
   GridItem,
   DatePicker,
-  Level,
-  LevelItem,
 } from "@patternfly/react-core";
 
 import { useFetchStakeholders } from "@app/queries/stakeholders";
@@ -289,71 +287,62 @@ 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={6}>
+          <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>
-          </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={6}>
+          <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>
-          </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
@@ -584,9 +584,10 @@ export const MigrationWaves: React.FC = () => {
                 what: t("terms.migrationWave").toLowerCase(),
               })
         }
-        variant={ModalVariant.small}
+        variant={ModalVariant.medium}
         isOpen={isWaveModalOpen}
         onClose={closeWaveModal}
+        style={{ minHeight: "62vh" }}
       >
         <WaveForm
           migrationWave={migrationWaveToEdit ? migrationWaveToEdit : undefined}