fix elements align and add close button

Signed-off-by: Ricardo M G da Silva <[email protected]>

Author: TejInaco

src/components/Dialogs/ContributeToCatalog.tsx

@@ -607,6 +607,8 @@ const ContributeToCatalog = forwardRef((props, ref) => {
         hasSubmit={true}
         leftButton={workflowState > 1 ? "Previous" : "Close"}
         rightButton={workflowState < 3 ? "Next" : "Close"}
+        auxiliaryButton={workflowState === 2}
+        onHandleEventAuxiliaryButton={close}
         title={"Contribute your TM to a TM Catalog"}
         description={
           "Fullfil the form below to contribute your TM to the Catalog specified in the endpoint at the end."

src/components/Dialogs/DialogTemplate.tsx

@@ -23,6 +23,8 @@ interface DialogTemplateProps {
   onHandleEventRightButton?: () => void;
   hasSubmit?: boolean;
   className?: string;
+  auxiliaryButton?: boolean;
+  onHandleEventAuxiliaryButton?: () => void;
 }
 
 const DialogTemplate: React.FC<DialogTemplateProps> = (props) => {
@@ -36,6 +38,9 @@ const DialogTemplate: React.FC<DialogTemplateProps> = (props) => {
 
   const rightText = props.rightButton ?? "Submit";
   const onHandleEventRightButton = props.onHandleEventRightButton ?? (() => {});
+  const auxiliaryButton = props.auxiliaryButton ?? false;
+  const onHandleEventAuxiliaryButton =
+    props.onHandleEventAuxiliaryButton ?? (() => {});
   const hasSubmit = props.hasSubmit ?? true;
   const className = props.className ?? "lg:w-[40%]";
 
@@ -72,18 +77,30 @@ const DialogTemplate: React.FC<DialogTemplateProps> = (props) => {
                 onClick={() => onHandleEventLeftButton()}
                 variant="primary"
                 type="button"
-                className="mr-1"
+                className="ml-2"
               >
                 {leftText}
               </BaseButton>
             )}
+            {auxiliaryButton && (
+              <BaseButton
+                id="closeButton"
+                onClick={() => onHandleEventAuxiliaryButton()}
+                variant="primary"
+                type="button"
+                className="ml-2 flex"
+              >
+                Close
+              </BaseButton>
+            )}
+
             {hasSubmit && (
               <BaseButton
                 id="rightButton"
                 onClick={() => onHandleEventRightButton()}
                 variant="primary"
                 type="button"
-                className="flex"
+                className="ml-2 flex"
               >
                 {rightText}
               </BaseButton>

src/components/Dialogs/base/FormCatalogFields.tsx

@@ -64,7 +64,7 @@ const FormCatalogFields: React.FC<IFormCatalogFieldsProps> = ({
           Add fields for Cataloging to ensure quality and discoverability of
           Thing Models
         </h1>
-        <div className="w-[70%] flex-row px-4">
+        <div className="mx-auto w-[70%] flex-col px-4">
           <DialogTextField
             label="Model*"
             placeholder="The Manufacturer Part Number (MPN) of the product, or the product to which the offer refers."

src/components/Dialogs/base/FormCatalogTmEndpoints.tsx

@@ -58,7 +58,7 @@ const FormCatalogTmEndpoints: React.FC<IFormCatalogTMEndpoints> = ({
         <h1 className="font-bold">
           Add the TM Catalog Endpoint and Repository URL
         </h1>
-        <div className="w-[70%] px-4">
+        <div className="mx-auto w-[70%] flex-col px-4">
           <DialogTextField
             label="TM Catalog Endpoint"
             placeholder="TM Catalog Endpoint:..."