From 3394d93757288555a3ca0fb90595909091ab85f6 Mon Sep 17 00:00:00 2001
From: Kshitij Tandon <tandonks@amazon.com>
Date: Mon, 2 Sep 2024 08:43:13 +0530
Subject: [PATCH] Resolved P0 items identified in demo

Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
---
 .../CreateTransformSteps.tsx                  |  2 +-
 .../CreateTransformForm.tsx                   |  7 ++++-
 .../CreateTransformForm.test.tsx.snap         | 26 +++++++++----------
 .../Transforms/TransformDetails.tsx           |  2 +-
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx b/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
index 8f5404825..3f1b18711 100644
--- a/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
+++ b/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
@@ -36,7 +36,7 @@ const setOfSteps = (step: number) => {
 
 const CreateTransformSteps = ({ step }: CreateTransformStepsProps) => (
   <div style={{ paddingLeft: "10px" }}>
-    <EuiSteps steps={setOfSteps(step)} headingElement="h6" />
+    <EuiSteps steps={setOfSteps(step)} headingElement="h6" titleSize="xs" />
   </div>
 );
 
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
index a63a1de82..300516a85 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
@@ -677,7 +677,12 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           submitError={submitError}
           useUpdatedUX={useUpdatedUX}
         />
-        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
+        <EuiFlexGroup
+          alignItems="center"
+          justifyContent="flexEnd"
+          style={useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}
+          gutterSize="s"
+        >
           <EuiFlexItem grow={false}>
             <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="createTransformCancelButton">
               Cancel
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
index 4c19bd55a..ecba2cdc0 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
@@ -24,13 +24,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
               class="euiSteps"
             >
               <div
-                class="euiStep"
+                class="euiStep euiStep--small"
               >
                 <div
                   class="euiStep__titleWrapper"
                 >
                   <span
-                    class="euiStepNumber euiStep__circle"
+                    class="euiStepNumber euiStep__circle euiStepNumber--small"
                   >
                     <span
                       class="euiScreenReaderOnly"
@@ -45,7 +45,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     </span>
                   </span>
                   <h6
-                    class="euiTitle euiTitle--small euiStep__title"
+                    class="euiTitle euiTitle--xsmall euiStep__title"
                   >
                     Set up indices
                   </h6>
@@ -55,13 +55,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                 />
               </div>
               <div
-                class="euiStep euiStep-isDisabled"
+                class="euiStep euiStep--small euiStep-isDisabled"
               >
                 <div
                   class="euiStep__titleWrapper"
                 >
                   <span
-                    class="euiStepNumber euiStepNumber--disabled euiStep__circle"
+                    class="euiStepNumber euiStepNumber--disabled euiStep__circle euiStepNumber--small"
                   >
                     <span
                       class="euiScreenReaderOnly"
@@ -76,7 +76,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     </span>
                   </span>
                   <h6
-                    class="euiTitle euiTitle--small euiStep__title"
+                    class="euiTitle euiTitle--xsmall euiStep__title"
                   >
                     Define transforms
                   </h6>
@@ -86,13 +86,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                 />
               </div>
               <div
-                class="euiStep euiStep-isDisabled"
+                class="euiStep euiStep--small euiStep-isDisabled"
               >
                 <div
                   class="euiStep__titleWrapper"
                 >
                   <span
-                    class="euiStepNumber euiStepNumber--disabled euiStep__circle"
+                    class="euiStepNumber euiStepNumber--disabled euiStep__circle euiStepNumber--small"
                   >
                     <span
                       class="euiScreenReaderOnly"
@@ -107,7 +107,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     </span>
                   </span>
                   <h6
-                    class="euiTitle euiTitle--small euiStep__title"
+                    class="euiTitle euiTitle--xsmall euiStep__title"
                   >
                     Specify schedule
                   </h6>
@@ -117,13 +117,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                 />
               </div>
               <div
-                class="euiStep euiStep-isDisabled"
+                class="euiStep euiStep--small euiStep-isDisabled"
               >
                 <div
                   class="euiStep__titleWrapper"
                 >
                   <span
-                    class="euiStepNumber euiStepNumber--disabled euiStep__circle"
+                    class="euiStepNumber euiStepNumber--disabled euiStep__circle euiStepNumber--small"
                   >
                     <span
                       class="euiScreenReaderOnly"
@@ -138,7 +138,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     </span>
                   </span>
                   <h6
-                    class="euiTitle euiTitle--small euiStep__title"
+                    class="euiTitle euiTitle--xsmall euiStep__title"
                   >
                     Review and create
                   </h6>
@@ -634,7 +634,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
       />
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
       style="padding: 5px 50px;"
     >
       <div
diff --git a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
index c687019b2..7cdc7a221 100644
--- a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
@@ -442,7 +442,7 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
 
         {isModalOpen && (
           <EuiOverlayMask>
-            <EuiModal onClose={this.closeModal} style={{ padding: "5px 30px" }}>
+            <EuiModal onClose={this.closeModal}>
               <EuiModalHeader>
                 <EuiModalHeaderTitle>{"View JSON of " + id} </EuiModalHeaderTitle>
               </EuiModalHeader>