UI Updates.

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Input, Space, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -175,7 +175,23 @@ export function PaymentsListPaginated({
   };
 
   return (
-    <div>
+    <Card
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onSearch={(value) => {
+              search.search = value;
+              history.push({ search: queryString.stringify(search) });
+            }}
+            enterButton
+          />
+        </Space>
+      }
+    >
       <Table
         loading={loading}
         scroll={{ x: true }}
@@ -189,26 +205,8 @@ export function PaymentsListPaginated({
         rowKey="id"
         dataSource={payments}
         onChange={handleTableChange}
-        title={() => {
-          return (
-            <div className="imex-table-header">
-              <Button onClick={() => refetch()}>
-                <SyncOutlined />
-              </Button>
-              <Input.Search
-                className="imex-table-header__search"
-                placeholder={t("general.labels.search")}
-                onSearch={(value) => {
-                  search.search = value;
-                  history.push({ search: queryString.stringify(search) });
-                }}
-                enterButton
-              />
-            </div>
-          );
-        }}
       />
-    </div>
+    </Card>
   );
 }