spiff up process models new form

src/routes/ProcessGroupNew.tsx

@@ -40,7 +40,7 @@ export default function ProcessGroupNew() {
     <main style={{ padding: '1rem 0' }}>
       <ProcessBreadcrumb />
       <h2>Add Process Group</h2>
-      <form onSubmit={addProcessGroup}>
+      <Form onSubmit={addProcessGroup}>
         <Form.Group className="mb-3" controlId="formDisplayName">
           <Form.Label>Display Name:</Form.Label>
           <Form.Control
@@ -63,7 +63,7 @@ export default function ProcessGroupNew() {
         <Button variant="primary" type="submit">
           Submit
         </Button>
-      </form>
+      </Form>
     </main>
   );
 }

src/routes/ProcessModelNew.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import { slugifyString } from '../helpers';
 import HttpService from '../services/HttpService';
@@ -45,23 +47,18 @@ export default function ProcessModelNew() {
     <main style={{ padding: '1rem 0' }}>
       <ProcessBreadcrumb />
       <h2>Add Process Model</h2>
-      <form onSubmit={addProcessModel}>
+      <Form onSubmit={addProcessModel}>
-        <label htmlFor="display_name">
+        <Form.Group className="mb-3" controlId="formDisplayName">
-          Display Name:
+          <Form.Label>Display Name:</Form.Label>
-          <input
+          <Form.Control
-            name="display_name"
-            id="display_name"
             type="text"
             value={displayName}
             onChange={(e) => onDisplayNameChanged(e.target.value)}
           />
-        </label>
+        </Form.Group>
-        <br />
+        <Form.Group className="mb-3" controlId="formIdentifier">
-        <label htmlFor="id">
+          <Form.Label>ID:</Form.Label>
-          ID:
+          <Form.Control
-          <input
-            name="id"
-            id="id"
             type="text"
             value={identifier}
             onChange={(e) => {
@@ -69,10 +66,11 @@ export default function ProcessModelNew() {
               setIdHasBeenUpdatedByUser(true);
             }}
           />
-        </label>
+        </Form.Group>
-        <br />
+        <Button variant="primary" type="submit">
-        <button type="submit">Submit</button>
+          Submit
-      </form>
+        </Button>
+      </Form>
     </main>
   );
 }