Further UI Updates

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -1,4 +1,4 @@
-import { Table, Button, Input } from "antd";
+import { Table, Button, Input, Card, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -118,10 +118,10 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       )
     : courtesycars;
   return (
-    <Table
-      loading={loading}
-      title={() => (
-        <div className="imex-table-header">
+    <Card
+      title={t("menus.header.courtesycars")}
+      extra={
+        <Space wrap>
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
@@ -137,14 +137,17 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
             value={searchText}
             enterButton
           />
-        </div>
-      )}
-      size="small"
-      pagination={{ position: "top" }}
-      columns={columns.map((item) => ({ ...item }))}
-      rowKey="id"
-      dataSource={tableData}
-      onChange={handleTableChange}
-    />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={{ position: "top" }}
+        columns={columns.map((item) => ({ ...item }))}
+        rowKey="id"
+        dataSource={tableData}
+        onChange={handleTableChange}
+      />
+    </Card>
   );
 }