Further UI Updates.

client/src/components/contracts-list/contracts-list.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Input, 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";
@@ -123,38 +123,39 @@ export default function ContractsList({ loading, contracts, refetch, total }) {
   };
 
   return (
-    <Table
-      loading={loading}
-      title={() => (
-        <div className="imex-table-header">
+    <Card
+      extra={
+        <Space wrap>
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
-          <div>
-            <TimeTicketsDatesSelector />
-          </div>
-          <div className="imex-table-header__search">
-            <Input.Search
-              placeholder={t("general.labels.search")}
-              onSearch={(value) => {
-                search.search = value;
-                history.push({ search: queryString.stringify(search) });
-              }}
-            />
-          </div>
-        </div>
-      )}
-      scroll={{ x: "50%", y: "40rem" }}
-      pagination={{
-        position: "top",
-        pageSize: 25,
-        current: parseInt(page || 1),
-        total: total,
-      }}
-      columns={columns}
-      rowKey="id"
-      dataSource={contracts}
-      onChange={handleTableChange}
-    />
+
+          <TimeTicketsDatesSelector />
+
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onSearch={(value) => {
+              search.search = value;
+              history.push({ search: queryString.stringify(search) });
+            }}
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        scroll={{ x: "50%", y: "40rem" }}
+        pagination={{
+          position: "top",
+          pageSize: 25,
+          current: parseInt(page || 1),
+          total: total,
+        }}
+        columns={columns}
+        rowKey="id"
+        dataSource={contracts}
+        onChange={handleTableChange}
+      />
+    </Card>
   );
 }