Themes modal udpated

src/pages/settings/components/Messages.tsx

@@ -1,59 +1,61 @@
 import { useEffect, useState } from "react";
-import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
 import type { MRT_TableOptions } from "mantine-react-table";
 import MessagesColumns from "../../../DataTable/columns/MessagesColumns";
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import { textClasses } from "../../../styles";
 const MessageSettings = () => {
-    const endpoint = "api/messages";
+	const endpoint = "api/messages";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
 	const [messageData, setMessageData] = useState<any>([]);
 
-    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
-    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
+	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
 
-    useEffect(() => {
-        if(isFetched) {
-            setMessageData(data);
-        }
-    })
+	useEffect(() => {
+		if (isFetched) {
+			setMessageData(data);
+		}
+	});
 
-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        exitCreatingMode,
-      }) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Message created successfully");
-        })
-        exitCreatingMode();
-      };
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        table,
-      }) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Message updated successfully");
-        });
-        table.setEditingRow(null);
-      };
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		exitCreatingMode,
+	}) => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Message created successfully");
+		});
+		exitCreatingMode();
+	};
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		table,
+	}) => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Message updated successfully");
+		});
+		table.setEditingRow(null);
+	};
 
 	return (
-        <Stack>
-            <h2>Messages</h2>
-            <DataTable
-                tableName="Messages"
-                columns={MessagesColumns()}
-                tableData={messageData}
-                isFetching={isFetching}
-                isLoading={isLoading}
-                onCreatingRowSave={handleCreateRow}
-                onEditingRowSave={handleEditRow}
-            />
-        </Stack>
-    )
+		<Stack>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Messages
+			</Text>
+			<DataTable
+				tableName="Messages"
+				columns={MessagesColumns()}
+				tableData={messageData}
+				isFetching={isFetching}
+				isLoading={isLoading}
+				onCreatingRowSave={handleCreateRow}
+				onEditingRowSave={handleEditRow}
+			/>
+		</Stack>
+	);
 };
 export default MessageSettings;