UI Updates.

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

@@ -1,4 +1,4 @@
-import { Input, Table } from "antd";
+import { Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -123,13 +123,11 @@ export default function AccountingPayablesTableComponent({
       sorter: (a, b) => a.clm_total - b.clm_total,
 
       render: (text, record) => (
-        <div>
-          <PaymentExportButton
-            paymentId={record.id}
-            disabled={transInProgress || !!record.exportedat}
-            loadingCallback={setTransInProgress}
-          />
-        </div>
+        <PaymentExportButton
+          paymentId={record.id}
+          disabled={transInProgress || !!record.exportedat}
+          loadingCallback={setTransInProgress}
+        />
       ),
     },
   ];
@@ -152,28 +150,26 @@ export default function AccountingPayablesTableComponent({
     : payments;
 
   return (
-    <div>
+    <Card
+      extra={
+        <Space wrap>
+          <PaymentsExportAllButton
+            paymentIds={selectedPayments}
+            disabled={transInProgress || selectedPayments.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedPayments}
+          />
+          <Input
+            value={state.search}
+            onChange={handleSearch}
+            placeholder={t("general.labels.search")}
+            allowClear
+          />
+        </Space>
+      }
+    >
       <Table
         loading={loading}
-        title={() => {
-          return (
-            <div className="imex-table-header">
-              <PaymentsExportAllButton
-                paymentIds={selectedPayments}
-                disabled={transInProgress || selectedPayments.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedPayments}
-              />
-              <Input
-                className="imex-table-header__search"
-                value={state.search}
-                onChange={handleSearch}
-                placeholder={t("general.labels.search")}
-                allowClear
-              />
-            </div>
-          );
-        }}
         dataSource={dataSource}
         pagination={{ position: "top", pageSize: 50 }}
         columns={columns}
@@ -192,6 +188,6 @@ export default function AccountingPayablesTableComponent({
           type: "checkbox",
         }}
       />
-    </div>
+    </Card>
   );
 }