BOD-61 Fixed invoice enter modal to simplify + follow new modal pattern.

client/src/pages/contract-detail/contract-detail.page.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Typography } from "antd";
+import { Button, Typography, Row, Col } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -22,28 +22,38 @@ export function ContractDetailPage({
   const { t } = useTranslation();
   return (
     <div>
-      <Typography.Title>{`Agreement ${(contract && contract.agreementnumber) ||
-        ""}`}</Typography.Title>
-      <Button type="primary" htmlType="submit">
-        {t("general.actions.save")}
-      </Button>
-      <Button
-        disabled={contract && contract.status !== "contracts.status.out"}
-        onClick={() => {
-          setCourtesyCarReturnModalContext({
-            actions: { refetch },
-            context: {
-              contractId: contract.id,
-              courtesyCarId: courtesyCar.id
-            }
-          });
-        }}
-      >
-        {t("courtesycars.actions.return")}
-      </Button>
-      <ContractJobBlock job={job} />
-      <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
-      <ContractFormComponent />
+      <Row align="middle">
+        <Typography.Title>{`Agreement ${(contract &&
+          contract.agreementnumber) ||
+          ""} - ${t((contract && contract.status) || "")}`}</Typography.Title>
+        <Button type="primary" htmlType="submit">
+          {t("general.actions.save")}
+        </Button>
+        <Button
+          disabled={contract && contract.status !== "contracts.status.out"}
+          onClick={() => {
+            setCourtesyCarReturnModalContext({
+              actions: { refetch },
+              context: {
+                contractId: contract.id,
+                courtesyCarId: courtesyCar.id
+              }
+            });
+          }}
+        >
+          {t("courtesycars.actions.return")}
+        </Button>
+      </Row>
+
+      <Row>
+        <Col span={4} offset={1}>
+          <ContractJobBlock job={job} />
+          <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
+        </Col>
+        <Col span={18} offset={1}>
+          <ContractFormComponent />
+        </Col>
+      </Row>
     </div>
   );
 }