UI Updates.

client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Input, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -121,7 +121,7 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
       sorter: (a, b) => a.clm_total - b.clm_total,
 
       render: (text, record) => (
-        <div style={{ display: "flex" }}>
+        <Space wrap>
           <JobExportButton
             jobId={record.id}
             disabled={!!record.date_exported}
@@ -129,7 +129,7 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
           <Link to={`/manage/jobs/${record.id}/close`}>
             <Button>{t("jobs.labels.viewallocations")}</Button>
           </Link>
-        </div>
+        </Space>
       ),
     },
   ];
@@ -166,28 +166,26 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
     : jobs;
 
   return (
-    <div>
+    <Card
+      extra={
+        <Space wrap>
+          <JobsExportAllButton
+            jobIds={selectedJobs}
+            disabled={transInProgress || selectedJobs.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedJobs}
+          />
+          <Input.Search
+            value={state.search}
+            onChange={handleSearch}
+            placeholder={t("general.labels.search")}
+            allowClear
+          />
+        </Space>
+      }
+    >
       <Table
         loading={loading}
-        title={() => {
-          return (
-            <div className="imex-table-header">
-              <JobsExportAllButton
-                jobIds={selectedJobs}
-                disabled={transInProgress || selectedJobs.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedJobs}
-              />
-              <Input.Search
-                className="imex-table-header__search"
-                value={state.search}
-                onChange={handleSearch}
-                placeholder={t("general.labels.search")}
-                allowClear
-              />
-            </div>
-          );
-        }}
         dataSource={dataSource}
         pagination={{ position: "top" }}
         columns={columns}
@@ -206,6 +204,6 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
           type: "checkbox",
         }}
       />
-    </div>
+    </Card>
   );
 }