Further UI Updates

client/src/components/owner-detail-form/owner-detail-form.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Form, Input, Switch } from "antd";
+import { Form, Input, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
@@ -13,20 +13,7 @@ export default function OwnerDetailFormComponent({ form, loading }) {
   const { getFieldValue } = form;
   return (
     <div>
-      <div className="imex-flex-row imex-flex-row__flex-space-around">
-        <Button
-          className="imex-flex-row__margin-large"
-          type="primary"
-          key="submit"
-          loading={loading}
-          htmlType="submit"
-        >
-          {t("general.actions.save")}
-        </Button>
-        <div className="imex-flex-row__grow imex-flex-row__margin-large">
-          <FormFieldsChanged form={form} />
-        </div>
-      </div>
+      <FormFieldsChanged form={form} />
 
       <LayoutFormRow header={t("owners.forms.name")}>
         <Form.Item label={t("owners.fields.ownr_title")} name="ownr_title">

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -1,4 +1,4 @@
-import { Form, notification } from "antd";
+import { Button, Form, notification, PageHeader } from "antd";
 import React, { useState } from "react";
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
@@ -37,15 +37,29 @@ function OwnerDetailFormContainer({ owner, refetch }) {
   };
 
   return (
-    <Form
-      form={form}
-      onFinish={handleFinish}
-      autoComplete="off"
-      layout="vertical"
-      initialValues={owner}
-    >
-      <OwnerDetailFormComponent loading={loading} form={form} />
-    </Form>
+    <>
+      <PageHeader
+        title={t("menus.header.owners")}
+        extra={
+          <Button
+            type="primary"
+            loading={loading}
+            onClick={() => form.submit()}
+          >
+            {t("general.actions.save")}
+          </Button>
+        }
+      />
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        autoComplete="off"
+        layout="vertical"
+        initialValues={owner}
+      >
+        <OwnerDetailFormComponent loading={loading} form={form} />
+      </Form>
+    </>
   );
 }
 export default OwnerDetailFormContainer;