More styling

src/pages/settings/components/Themes.tsx

@@ -7,10 +7,8 @@ import {
 	ColorPicker,
 	ColorSwatch,
 	Divider,
-	Grid,
 	Group,
 	Modal,
-	SimpleGrid,
 	Stack,
 	Text,
 	TextInput,
@@ -19,7 +17,7 @@ import { FiEdit, FiPlus, FiSave, FiTrash, FiX } from "react-icons/fi";
 import { useDisclosure, useLocalStorage } from "@mantine/hooks";
 import "@mantine/core/styles/ModalBase.css";
 import "@mantine/core/styles/Modal.css";
-import { actionIconClasses, modalClasses, textClasses } from "../../../styles";
+import { actionIconClasses, buttonClasses, modalClasses, textClasses } from "../../../styles";
 import ThemeModalContent from "./ThemeModalContent";
 import { modals } from "@mantine/modals";
 function ThemesSettings({ theme }: any) {
@@ -84,13 +82,6 @@ function ThemesSettings({ theme }: any) {
 		<>
 			<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}
@@ -281,6 +272,8 @@ function ThemesSettings({ theme }: any) {
 						Themes
 					</Text>
 					<Button
+						className={buttonClasses.tableButton}
+						classNames={buttonClasses}
 						onClick={() => {
 							setSelectedTheme({
 								id: undefined,