More styling

src/pages/homepage/components/Search.tsx

@@ -10,12 +10,19 @@ export default function Search() {
 	const [providerURL, setProviderURL] = useState(
 		"https://www.google.com/search?q=",
 	);
+	const [value, setValue] = useState("");
 
 	const handleKeyPress = (item: any) => {
-		const option =
+		let option = ''
+		let subtext = ''
+		if (item.target.value.startsWith("/")) {
+			option =
 			item.target.value.substr(1, item.target.value.indexOf(" ") - 1) ||
 			item.target.value.substr(1);
-		const subtext = item.target.value.substr(2 + option.length);
+			subtext = item.target.value.substr(2 + option.length);
+		} else {
+			subtext = item.target.value;
+		}
 		if (item.key === "Enter") {
 			if (item.target.value.startsWith("/")) {
 				open(`${providerURL}${subtext}`, "_self");
@@ -63,25 +70,25 @@ export default function Search() {
 				classNames={textInputClasses}
 				spellCheck="true"
 				leftSection={providerLabel}
+				value={value}
+				data-active={value !== ''}
 				onChange={(item: any) => {
+					setValue(item.currentTarget.value)
 					if (item.target.value.startsWith("/")) {
-						setProviderLabel(
-							providers?.find(
-								(p: any) => p.prefix === item.target.value.split(" ")[0],
-							).name,
-						);
-						setProviderURL(
-							providers?.find(
-								(p: any) => p.prefix === item.target.value.split(" ")[0],
-							).url,
-						);
+						const provider = providers?.find(
+							(p: any) => p.prefix === item.target.value.split(" ")[0],
+						)
+						setProviderLabel(provider?.name || "Invalid Search");
+						setProviderURL(provider?.url);
 					} else {
 						setProviderLabel("Google Search");
 						setProviderURL("https://www.google.com/search?q=");
 					}
 				}}
 				onKeyUp={(item: any) => {
-					handleKeyPress(item);
+					if(providerLabel !== "Invalid Search"){
+						handleKeyPress(item);
+					}
 				}}
 			/>
 		</Stack>

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,