Style fixes

src/pages/homepage/components/Search/Search.tsx

@@ -135,14 +135,14 @@ export default function Search({
 
 	const handleKeyUp = (item: any) => {
 		if (item.code === 'Escape') {
-			if (dropdownOpened) {
-				closeDropdown();
-			}
 			setListIndex(0);
 			setSearchValue('');
 			setProviderLabel('Google Search');
 			setProviderPrefix('/g');
 			setPlaceholderValue('');
+			if (dropdownOpened) {
+				closeDropdown();
+			}
 		}
 		if (item.code === 'ArrowDown' && !dropdownOpened) {
 			setListIndex(0);
@@ -323,7 +323,7 @@ export default function Search({
 
 	return (
 		<>
-			{dropdownOpened && <Overlay pos={'absolute'} h={'100%'} w={'100%'} blur={1} />}
+			{dropdownOpened && <Overlay pos={'absolute'} h={'100%'} w={'100%'} blur={5} />}
 			<Stack
 				style={{
 					height: '100px',
@@ -349,7 +349,7 @@ export default function Search({
 					nothingFoundMessage={
 						<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
 					}
-					data-active={searchValue !== ''}
+					data-active={placeholderValue !== ''}
 					dropdownOpened={dropdownOpened}
 					comboboxProps={{
 						transitionProps: { transition: 'fade', duration: 200 },

src/pages/homepage/components/SettingsButton/ThemingCard.tsx

@@ -101,7 +101,7 @@ function ThemingCard() {
 								);
 								handleThemeChange(filteredThemes, false);
 							} else if (currentThemePlaylist === 'All') {
-								handleThemeChange(allThemes, false);
+								handleThemeChange(allThemes, true);
 							} else if (currentThemePlaylist === 'Backgrounds') {
 								handleThemeChange(
 									allThemes.filter(

src/styles/Select.module.css

@@ -45,7 +45,7 @@
 .dropdown {
 	border: none !important;
 	background-color: var(--mantine-color-search-0) !important;
-	backdrop-filter: blur(5px) !important;
+	backdrop-filter: blur(15px) brightness(1.75) !important;
 }
 
 .options {
@@ -117,7 +117,10 @@
 		border-top-right-radius: .25em;
 		border-bottom-left-radius: .25em;
 		border-bottom-right-radius: .25em;
+		transition: all 0.4s ease;
+		transition: backdrop-filter 0s;
 		&[data-active="true"] {
+			backdrop-filter: blur(15px) brightness(1.75) !important;
 			background-color: var(--mantine-color-search-0);
 			border-color: var(--mantine-color-border-0);
 			outline: none;