Further UI Updates

client/src/components/jobs-available-scan/jobs-available-scan.component.jsx

@@ -1,5 +1,5 @@
 import { DownloadOutlined, SyncOutlined } from "@ant-design/icons";
-import { Button, Input, notification, Space, Table } from "antd";
+import { Button, Card, Input, notification, Space, Table } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -37,9 +37,11 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
     });
     if (response.data.success) {
       //Came through
-      if(refetch) refetch()
+      if (refetch) refetch();
     } else {
-      notification["error"]({ message: t("jobs.errors.scanimport", {message: response.data.error}) });
+      notification["error"]({
+        message: t("jobs.errors.scanimport", { message: response.data.error }),
+      });
     }
     setLoading(false);
   };
@@ -120,40 +122,37 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
     : [];
 
   return (
-    <Table
-      loading={loading}
-      title={() => {
-        return (
-          <div className="imex-table-header">
-            <Space>
-              <strong>{t("jobs.labels.diskscan")}</strong>
-              <Button
-                loading={loading}
-                disabled={!partnerVersion}
-                onClick={() => {
-                  scanEstimates();
-                }}
-              >
-                <SyncOutlined />
-              </Button>
-            </Space>
-            <div className="imex-table-header__search">
-              <Input.Search
-                placeholder={t("general.labels.search")}
-                onChange={(e) => {
-                  setSearchText(e.currentTarget.value);
-                }}
-              />
-            </div>
-          </div>
-        );
-      }}
-      size="small"
-      pagination={{ position: "top" }}
-      columns={columns}
-      rowKey="id"
-      dataSource={data}
-      onChange={handleTableChange}
-    />
+    <Card
+      title={t("jobs.labels.diskscan")}
+      extra={
+        <Space wrap>
+          <Button
+            loading={loading}
+            disabled={!partnerVersion}
+            onClick={() => {
+              scanEstimates();
+            }}
+          >
+            <SyncOutlined />
+          </Button>
+
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onChange={(e) => {
+              setSearchText(e.currentTarget.value);
+            }}
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={{ position: "top" }}
+        columns={columns}
+        rowKey="id"
+        dataSource={data}
+        onChange={handleTableChange}
+      />
+    </Card>
   );
 }