Themes modal udpated

src/pages/settings/components/Applications.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 ApplicationColumns from "../../../DataTable/columns/ApplicationColumns";
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import { textClasses } from "../../../styles";
 const ApplicationSettings = () => {
-    const endpoint = "api/apps";
+	const endpoint = "api/apps";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
 	const [applicationData, setApplicationData] = 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) {
-            setApplicationData(data);
-        }
-    })
+	useEffect(() => {
+		if (isFetched) {
+			setApplicationData(data);
+		}
+	});
 
-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        exitCreatingMode,
-      }) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Application created successfully");
-        })
-        exitCreatingMode();
-      };
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        table,
-      }) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Application updated successfully");
-        });
-        table.setEditingRow(null);
-      };
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		exitCreatingMode,
+	}) => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Application created successfully");
+		});
+		exitCreatingMode();
+	};
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		table,
+	}) => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Application updated successfully");
+		});
+		table.setEditingRow(null);
+	};
 
 	return (
-        <Stack>
-            <h2>Applications</h2>
-            <DataTable
-                tableName="Applications"
-                columns={ApplicationColumns()}
-                tableData={applicationData}
-                isFetching={isFetching}
-                isLoading={isLoading}
-                onCreatingRowSave={handleCreateRow}
-                onEditingRowSave={handleEditRow}
-            />
-        </Stack>
-    )
+		<Stack>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Applications
+			</Text>
+			<DataTable
+				tableName="Applications"
+				columns={ApplicationColumns()}
+				tableData={applicationData}
+				isFetching={isFetching}
+				isLoading={isLoading}
+				onCreatingRowSave={handleCreateRow}
+				onEditingRowSave={handleEditRow}
+			/>
+		</Stack>
+	);
 };
 export default ApplicationSettings;

src/pages/settings/components/Bookmarks.tsx

@@ -1,13 +1,14 @@
 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 { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
 import BookmarkColumns from "../../../DataTable/columns/BookmarkColumns";
+import { textClasses } from "../../../styles";
 const BookmarkSettings = () => {
-    const endpoint = "api/links";
-    const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+	const endpoint = "api/links";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
 	const {
@@ -17,16 +18,16 @@ const BookmarkSettings = () => {
 		isFetched: groupDataisFetched,
 	} = useQueryAPI({ endpoint: "api/categories" });
 	const [bookmarkData, setBookmarkData] = useState<any>([]);
-    const [groups, setGroups] = useState([]);
-    const [fullyFetched, setFullyFetched] = useState(false);
-    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
-    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+	const [groups, setGroups] = useState([]);
+	const [fullyFetched, setFullyFetched] = useState(false);
+	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
+	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
 
-    useEffect(() => {
-        if(isFetched) {
-            setBookmarkData(data);
-        }
-    })
+	useEffect(() => {
+		if (isFetched) {
+			setBookmarkData(data);
+		}
+	});
 
 	useEffect(() => {
 		if (groupDataisFetched) {
@@ -38,39 +39,40 @@ const BookmarkSettings = () => {
 		}
 	}, [groupDataisFetched]);
 
-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        exitCreatingMode,
-      }) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Application created successfully");
-        })
-        exitCreatingMode();
-      };
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        table,
-      }) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Application updated successfully");
-        });
-        table.setEditingRow(null);
-      };
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		exitCreatingMode,
+	}) => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Application created successfully");
+		});
+		exitCreatingMode();
+	};
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		table,
+	}) => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Application updated successfully");
+		});
+		table.setEditingRow(null);
+	};
 
 	return (
-        <Stack>
-            <h2>Bookmarks</h2>
-            <DataTable
-                tableName="Applications"
-                columns={BookmarkColumns(groups, groupData)}
-                tableData={bookmarkData}
-                isFetching={isFetching}
-                isLoading={isLoading}
-                onCreatingRowSave={handleCreateRow}
-                onEditingRowSave={handleEditRow}
-            />
-        </Stack>
-    )
+		<Stack>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Bookmarks
+			</Text>
+			<DataTable
+				tableName="Applications"
+				columns={BookmarkColumns(groups, groupData)}
+				tableData={bookmarkData}
+				isFetching={isFetching}
+				isLoading={isLoading}
+				onCreatingRowSave={handleCreateRow}
+				onEditingRowSave={handleEditRow}
+			/>
+		</Stack>
+	);
 };
 export default BookmarkSettings;

src/pages/settings/components/Categories.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 CategoryColumns from "../../../DataTable/columns/CategoryColumns";
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import { textClasses } from "../../../styles";
 const CategorySettings = () => {
-    const endpoint = "api/categories";
+	const endpoint = "api/categories";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
 	const [categoryData, setCategoryData] = 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) {
-            setCategoryData(data);
-        }
-    })
+	useEffect(() => {
+		if (isFetched) {
+			setCategoryData(data);
+		}
+	});
 
-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        exitCreatingMode,
-      }) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Category created successfully");
-        })
-        exitCreatingMode();
-      };
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        table,
-      }) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Category updated successfully");
-        });
-        table.setEditingRow(null);
-      };
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		exitCreatingMode,
+	}) => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Category created successfully");
+		});
+		exitCreatingMode();
+	};
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		table,
+	}) => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Category updated successfully");
+		});
+		table.setEditingRow(null);
+	};
 
 	return (
-        <Stack>
-            <h2>Categories</h2>
-            <DataTable
-                tableName="Categories"
-                columns={CategoryColumns()}
-                tableData={categoryData}
-                isFetching={isFetching}
-                isLoading={isLoading}
-                onCreatingRowSave={handleCreateRow}
-                onEditingRowSave={handleEditRow}
-            />
-        </Stack>
-    )
+		<Stack>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Categories
+			</Text>
+			<DataTable
+				tableName="Categories"
+				columns={CategoryColumns()}
+				tableData={categoryData}
+				isFetching={isFetching}
+				isLoading={isLoading}
+				onCreatingRowSave={handleCreateRow}
+				onEditingRowSave={handleEditRow}
+			/>
+		</Stack>
+	);
 };
 export default CategorySettings;

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;

src/pages/settings/components/Personalization.tsx

@@ -1,58 +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 PersonalizationColumns from "../../../DataTable/columns/PersonalizationColumns";
 import { toast } from "react-toastify";
 import type { MRT_TableOptions } from "mantine-react-table";
+import { textClasses } from "../../../styles";
+import { Text } from "@mantine/core";
 const PersonalizationSettings = () => {
-    const endpoint = "api/personaldata";
+	const endpoint = "api/personaldata";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
 	const [personalData, setPersonalData] = 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) {
-            setPersonalData(data);
-        }
-    })
+	useEffect(() => {
+		if (isFetched) {
+			setPersonalData(data);
+		}
+	});
 
-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        exitCreatingMode,
-      }) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Personalization created successfully");
-        })
-        exitCreatingMode();
-      };
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        table,
-      }) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Personalization updated successfully");
-        });
-        table.setEditingRow(null);
-      };
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		exitCreatingMode,
+	}) => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Personalization created successfully");
+		});
+		exitCreatingMode();
+	};
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		table,
+	}) => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Personalization updated successfully");
+		});
+		table.setEditingRow(null);
+	};
 
 	return (
-        <>
-            <h2>Personalization</h2>
-            <DataTable
-                tableName="Personalization"
-                columns={PersonalizationColumns()}
-                tableData={personalData}
-                isFetching={isFetching}
-                isLoading={isLoading}
-                onCreatingRowSave={handleCreateRow}
-                onEditingRowSave={handleEditRow}
-            />
-        </>
-    )
+		<>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Personalization
+			</Text>
+			<DataTable
+				tableName="Personalization"
+				columns={PersonalizationColumns()}
+				tableData={personalData}
+				isFetching={isFetching}
+				isLoading={isLoading}
+				onCreatingRowSave={handleCreateRow}
+				onEditingRowSave={handleEditRow}
+			/>
+		</>
+	);
 };
 export default PersonalizationSettings;

src/pages/settings/components/SearchProviders.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 SearchProviderColumns from "../../../DataTable/columns/SearchProviderColumns";
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import { textClasses } from "../../../styles";
 const SearchProviderSettings = () => {
-    const endpoint = "api/providers";
+	const endpoint = "api/providers";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
 	const [providerData, setProviderData] = 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) {
-            setProviderData(data);
-        }
-    })
+	useEffect(() => {
+		if (isFetched) {
+			setProviderData(data);
+		}
+	});
 
-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        exitCreatingMode,
-      }) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Search provider created successfully");
-        })
-        exitCreatingMode();
-      };
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
-        values,
-        table,
-      }) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
-            toast.success("Search provider updated successfully");
-        });
-        table.setEditingRow(null);
-      };
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		exitCreatingMode,
+	}) => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Search provider created successfully");
+		});
+		exitCreatingMode();
+	};
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
+		values,
+		table,
+	}) => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
+			toast.success("Search provider updated successfully");
+		});
+		table.setEditingRow(null);
+	};
 
 	return (
-        <Stack>
-            <h2>Search Providers</h2>
-            <DataTable
-                tableName="Categories"
-                columns={SearchProviderColumns()}
-                tableData={providerData}
-                isFetching={isFetching}
-                isLoading={isLoading}
-                onCreatingRowSave={handleCreateRow}
-                onEditingRowSave={handleEditRow}
-            />
-        </Stack>
-    )
+		<Stack>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Search Providers
+			</Text>
+			<DataTable
+				tableName="Categories"
+				columns={SearchProviderColumns()}
+				tableData={providerData}
+				isFetching={isFetching}
+				isLoading={isLoading}
+				onCreatingRowSave={handleCreateRow}
+				onEditingRowSave={handleEditRow}
+			/>
+		</Stack>
+	);
 };
 export default SearchProviderSettings;

src/pages/settings/components/ThemeModalContent.tsx

@@ -0,0 +1,250 @@
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Stack, Group, Text, Box } from "@mantine/core";
+import { useState } from "react";
+import { stackClasses } from "../../../styles";
+
+export default function ThemeModalContent({ selectedTheme }: any) {
+	const ExampleApp = (previewTheme: any) => {
+		const [textDecoration, setTextDecoration] = useState<string>("none");
+		return (
+			<Box
+				component="a"
+				onMouseOver={() => setTextDecoration("underline")}
+				onMouseOut={() => setTextDecoration("none")}
+				className={stackClasses.appItemBox}
+			>
+				<Stack
+					style={{
+						height: "64px",
+						marginRight: "1em",
+						marginLeft: "1em",
+						paddingTop: "15px",
+					}}
+				>
+					<Icon
+						style={{ color: previewTheme.theme.colortextpri }}
+						icon={`mdi:check`}
+						height={32}
+						width={32}
+					/>
+				</Stack>
+				<Stack
+					style={{
+						display: "flex",
+						flexDirection: "column",
+						justifyContent: "center",
+						flex: 1,
+						overflow: "hidden",
+						gap: 0,
+					}}
+				>
+					<Text
+						style={{
+							fontWeight: 400,
+							fontSize: 11,
+							fontStyle: "normal",
+							color: previewTheme.theme.colortextpri,
+							fontFamily:
+								"-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important",
+							margin: 0,
+						}}
+					>
+						{"Example App"}
+					</Text>
+					<Text
+						style={{
+							fontWeight: 400,
+							fontSize: 11,
+							fontStyle: "italic",
+							color: previewTheme.theme.colortextacc,
+							fontFamily:
+								"-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important",
+							margin: 0,
+							textDecoration: textDecoration,
+						}}
+					>
+						{"https://www.example.com"}
+					</Text>
+				</Stack>
+			</Box>
+		);
+	};
+	return (
+		<Stack
+			style={{
+				width: "100%",
+				backgroundColor: selectedTheme.colorbackground,
+				borderRadius: "10px",
+			}}
+		>
+			<Group
+				justify="center"
+				style={{
+					color: selectedTheme.colortextpri,
+					paddingTop: "1rem",
+				}}
+			>
+				{selectedTheme.name}
+			</Group>
+			<Text
+				pl={"1.5rem"}
+				style={{
+					textDecoration: "underline",
+					fontSize: "20px",
+					fontWeight: 200,
+					fontStyle: "italic",
+					height: "10px",
+					textTransform: "uppercase",
+					marginTop: "20px",
+					marginBottom: "20px",
+					color: selectedTheme.colortextpri,
+				}}
+			>
+				Applications
+			</Text>
+			<Stack
+				style={{
+					background: selectedTheme.colorbackground,
+					gap: ".25rem",
+					backgroundSize: "cover",
+					borderBottom: "0px solid",
+					display: "grid",
+					gridColumnGap: "5px",
+					gridRowGap: "5px",
+					gridTemplateColumns: "1fr 1fr 1fr",
+					gridTemplateRows: "64px",
+					padding: "1rem",
+					paddingTop: "0rem",
+					justifyContent: "center",
+					alignContent: "center",
+				}}
+			>
+				<ExampleApp theme={selectedTheme} />
+				<ExampleApp theme={selectedTheme} />
+				<ExampleApp theme={selectedTheme} />
+			</Stack>
+			<Text
+				pl={"1.5rem"}
+				style={{
+					textDecoration: "underline",
+					fontSize: "20px",
+					fontWeight: 200,
+					fontStyle: "italic",
+					height: "10px",
+					textTransform: "uppercase",
+					marginTop: "20px",
+					marginBottom: "20px",
+					color: selectedTheme.colortextpri,
+				}}
+			>
+				Bookmarks
+			</Text>
+			<Stack
+				style={{
+					display: "flex",
+					flexDirection: "row",
+					flexWrap: "nowrap",
+					gridColumnGap: "20px",
+					gridRowGap: "0px",
+					gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
+					gridTemplateRows: "auto",
+				}}
+			>
+				<Stack
+					style={{
+						width: "100%",
+						marginBottom: "0em",
+						display: "block",
+						lineHeight: "1.5rem",
+						padding: "1rem",
+						paddingTop: "0rem",
+					}}
+				>
+					<Text
+						style={{
+							fontSize: "14px",
+							fontWeight: 400,
+							height: "10px",
+							width: "auto",
+							color: selectedTheme.colortextacc,
+							textTransform: "uppercase",
+							marginTop: "20px",
+							marginBottom: "20px",
+						}}
+					>
+						Example Category
+					</Text>
+					<Text
+						style={{
+							display: "block",
+							fontSize: "14px",
+							lineHeight: 2,
+							color: selectedTheme.colortextpri,
+						}}
+						component="a"
+					>
+						{"Link 1"}
+					</Text>
+					<Text
+						style={{
+							display: "block",
+							fontSize: "14px",
+							lineHeight: 2,
+							color: selectedTheme.colortextpri,
+						}}
+						component="a"
+					>
+						{"Link 2"}
+					</Text>
+				</Stack>
+				<Stack
+					style={{
+						width: "100%",
+						marginBottom: "0em",
+						display: "block",
+						lineHeight: "1.5rem",
+						padding: "1rem",
+						paddingTop: "0rem",
+					}}
+				>
+					<Text
+						style={{
+							fontSize: "14px",
+							fontWeight: 400,
+							height: "10px",
+							width: "auto",
+							color: selectedTheme.colortextacc,
+							textTransform: "uppercase",
+							marginTop: "20px",
+							marginBottom: "20px",
+						}}
+					>
+						Example Category
+					</Text>
+					<Text
+						style={{
+							display: "block",
+							fontSize: "14px",
+							lineHeight: 2,
+							color: selectedTheme.colortextpri,
+						}}
+						component="a"
+					>
+						{"Link 1"}
+					</Text>
+					<Text
+						style={{
+							display: "block",
+							fontSize: "14px",
+							lineHeight: 2,
+							color: selectedTheme.colortextpri,
+						}}
+						component="a"
+					>
+						{"Link 2"}
+					</Text>
+				</Stack>
+			</Stack>
+		</Stack>
+	);
+}

src/pages/settings/components/Themes.tsx

@@ -1,87 +1,160 @@
 import { useEffect, useState } from "react";
 import { useQueryAPI } from "../../../hooks/useAPI";
-import { ActionIcon, Button, ColorPicker, ColorSwatch, Group, Modal, SimpleGrid, Stack } from "@mantine/core";
-import AppItem from "../../homepage/components/AppItem";
+import {
+	ActionIcon,
+	Button,
+	Card,
+	ColorPicker,
+	ColorSwatch,
+	Divider,
+	Group,
+	Modal,
+	SimpleGrid,
+	Stack,
+	Text,
+} from "@mantine/core";
 import { FiEdit } from "react-icons/fi";
 import { useDisclosure, useLocalStorage } from "@mantine/hooks";
-import '@mantine/core/styles/ModalBase.css';
-import '@mantine/core/styles/Modal.css';
-function ThemesSettings() {
-    const [opened, { open, close }] = useDisclosure(false);
-    const [value, setValue] = useLocalStorage<any>({ key: 'theme', defaultValue: {} });
+import "@mantine/core/styles/ModalBase.css";
+import "@mantine/core/styles/Modal.css";
+import { actionIconClasses, modalClasses, textClasses } from "../../../styles";
+import ThemeModalContent from "./ThemeModalContent";
+function ThemesSettings({ theme }: any) {
+	const [opened, { open, close }] = useDisclosure(false);
+    const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
+    const [colorValue, onChange] = useState('#000000');
+	const [value, setValue] = useLocalStorage<any>({
+		key: "theme",
+		defaultValue: {},
+	});
 	const { data, isFetched } = useQueryAPI({
 		endpoint: "api/themes",
 	});
 	const [themesList, setThemesList] = useState([]);
-    const [selectedTheme, setSelectedTheme] = useState<any>({});
+	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	useEffect(() => {
 		if (isFetched) {
 			setThemesList(data);
 		}
 	}, [isFetched]);
 
-    const handleOpen = (theme: any) => {
-        setSelectedTheme(theme);
-        open();
-    }
+	const handleOpen = (theme: any) => {
+		setSelectedTheme(theme);
+		open();
+	};
+
+    const handleClose = () => {
+        close();
+        closePicker();
+    };
 
 	return (
-        <>
-            <Modal.Root opened={opened} onClose={close}>
-                <Modal.Overlay />
-                <Modal.Content>
-                <Modal.Header>
-                    <Modal.Title>Edit Theme</Modal.Title>
-                    <Modal.CloseButton />
-                </Modal.Header>
-                    <Modal.Body>
-                        <Stack style={{ backgroundColor: selectedTheme.colorbackground, borderRadius: '10px' }}>
-                            <Group justify="center" style={{ color: selectedTheme.colortextpri }}>{selectedTheme.name}</Group>
-                            <AppItem
-								name={'Example App'}
-								url={'https://example.com'}
-								icon={'mdi:apps'}
-								category={'Default'}
-							/>
-                        </Stack>
-                    </Modal.Body>
-                </Modal.Content>
-            </Modal.Root>
-            <Stack h={'100%'} w={'100%'}>
-                <h2>Themes</h2>
-                <SimpleGrid cols={5}>
-                    {themesList.map((theme: any) => (
-                        <Stack key={theme.name}>
-                            <Button
-                                style={{
-                                    backgroundColor: theme.colorbackground,
-                                    border: `solid ${theme.colorborder}`,
-                                    color: theme.colortextpri,
-                                }}
-                                data-theme={theme.name}
-                                onClick={() => {
-                                    setValue(theme.name)
-                                }}
-                            >
-                                {theme.name}
-                            </Button>
-                            <Group justify="space-between">
-                                <Group className="theme-palette">
-                                    <ColorSwatch color={theme.colorbackground} />
-                                    <ColorSwatch color={theme.colorsearchbackground} />
-                                    <ColorSwatch color={theme.colortextpri} />
-                                    <ColorSwatch color={theme.colortextacc} />
-                                    <ColorSwatch color={theme.colorborder} />
+		<>
+			<Modal.Root
+				size={"50%"}
+				style={{
+					"--color-text-pri": theme.colortextpri,
+					"--color-text-acc": theme.colortextacc,
+					"--color-background": theme.colorbackground,
+					"--color-border": theme.colorborder,
+					"--color-search-background": theme.colorsearchbackground,
+				}}
+				className={modalClasses.editThemeModal}
+				classNames={modalClasses}
+				opened={opened}
+				onClose={handleClose}
+			>
+				<Modal.Overlay />
+				<Modal.Content>
+					<Modal.Header>
+						<Modal.Title>Edit Theme</Modal.Title>
+						<Modal.CloseButton />
+					</Modal.Header>
+					<Modal.Body p={"2rem"}>
+						<ThemeModalContent selectedTheme={selectedTheme} />
+                        <Divider color="black" my="sm" />
+                        <Group w={"100%"} h={"100%"} gap={0}>
+                            <Stack w={"50%"}>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Primary Color</Text>
+                                    <ColorSwatch onClick={openPicker} radius={"sm"} w={"100px"} color={selectedTheme.colortextpri} />
                                 </Group>
-                                <ActionIcon
-                                    onClick={() => handleOpen(theme)}
-                                ><FiEdit/></ActionIcon>
-                            </Group>
-                        </Stack>
-                    ))}
-                </SimpleGrid>
-            </Stack>
-        </>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Accent Color</Text>
+                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colortextacc} />
+                                </Group>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Background Color</Text>
+                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorbackground} />
+                                </Group>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Border Color</Text>
+                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorborder} />
+                                </Group>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Search Background Color</Text>
+                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorsearchbackground} />
+                                </Group>
+                            </Stack>
+                            <Stack h={"100%"} w={'50%'} align="center" justify="center">
+                                {pickerOpen ? (
+                                    <>
+                                        <ColorPicker value={colorValue} onChange={onChange}/>
+                                        <Group><Text c={'black'}>{colorValue}</Text><Button onClick={() => {setSelectedTheme({ ...selectedTheme, colorbackground: colorValue }); closePicker();}} c={'white'} bg={'forestgreen'}>Save</Button></Group>
+                                    </>
+                                ) : (
+                                    <Card bg={'#0002'} h={"100%"} w={"90%"}>
+                                        <Text c="black">
+                                            Pick a swatch to edit the color.
+                                        </Text>
+                                    </Card>
+                                )}
+                            </Stack>
+                        </Group>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal.Root>
+			<Stack h={"100%"} w={"100%"}>
+				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+					Themes
+				</Text>
+				<SimpleGrid cols={5}>
+					{themesList.map((theme: any) => (
+						<Stack key={theme.name}>
+							<Button
+								style={{
+									backgroundColor: theme.colorbackground,
+									border: `solid ${theme.colorborder}`,
+									color: theme.colortextpri,
+								}}
+								data-theme={theme.name}
+								onClick={() => {
+									setValue(theme.name);
+								}}
+							>
+								{theme.name}
+							</Button>
+							<Group justify="space-between">
+								<Group className="theme-palette">
+									<ColorSwatch color={theme.colorbackground} />
+									<ColorSwatch color={theme.colorsearchbackground} />
+									<ColorSwatch color={theme.colortextpri} />
+									<ColorSwatch color={theme.colortextacc} />
+									<ColorSwatch color={theme.colorborder} />
+								</Group>
+								<ActionIcon
+									className={actionIconClasses.editButton}
+									classNames={actionIconClasses}
+									onClick={() => handleOpen(theme)}
+								>
+									<FiEdit />
+								</ActionIcon>
+							</Group>
+						</Stack>
+					))}
+				</SimpleGrid>
+			</Stack>
+		</>
 	);
 }
 export default ThemesSettings;