Further UI Updates

client/src/components/jobs-notes/jobs.notes.component.jsx

@@ -5,7 +5,7 @@ import {
   EyeInvisibleFilled,
   WarningFilled,
 } from "@ant-design/icons";
-import { Button, Table } from "antd";
+import { Button, Card, Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -110,28 +110,32 @@ export function JobNotesComponent({
   ];
 
   return (
-    <div>
+    <Card
+      title={t("jobs.labels.notes")}
+      extra={
+        <Button
+          onClick={() => {
+            setNoteUpsertContext({
+              actions: { refetch: refetch },
+              context: {
+                jobId: jobId,
+              },
+            });
+          }}
+        >
+          {t("notes.actions.new")}
+        </Button>
+      }
+    >
       <NoteUpsertModal />
-      <Button
-        onClick={() => {
-          setNoteUpsertContext({
-            actions: { refetch: refetch },
-            context: {
-              jobId: jobId,
-            },
-          });
-        }}
-      >
-        {t("notes.actions.new")}
-      </Button>
+
       <Table
         loading={loading}
-        pagination={{ position: "bottom" }}
         columns={columns}
         rowKey="id"
         dataSource={data}
       />
-    </div>
+    </Card>
   );
 }
 export default connect(mapStateToProps, mapDispatchToProps)(JobNotesComponent);