Fixed taskbar blur

src/components/apps/file-explorer/directory-list/DirectoryList.module.css

@@ -65,6 +65,6 @@
 	opacity: 25%;
 	position: absolute;
 	border-radius: var(--border-radius-0);
-	background-color: var(--blue-b);
+	background-color: var(--blue-1);
 	border: 0.25rem solid var(--blue-0);
 }

src/components/taskbar/Taskbar.module.css

@@ -7,21 +7,30 @@
 	left: 0;
 	width: 100%;
 	height: var(--taskbar-height);
-	backdrop-filter: var(--taskbar-filter);
 }
 
-.Taskbar::after {
+.Taskbar::after,
-	opacity: var(--taskbar-opacity);
+.Taskbar::before {
 	content: "";
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	left: 0;
 	right: 0;
+	pointer-events: none;
+}
+
+.Taskbar::after {
+	opacity: var(--taskbar-opacity);
 	background-color: var(--taskbar-color);
 	z-index: -2;
 }
 
+.Taskbar::before {
+	backdrop-filter: var(--taskbar-filter);
+	z-index: -3;
+}
+
 .Taskbar button {
 	display: flex;
 	align-items: center;
@@ -138,4 +147,63 @@
 	width: 0.5rem;
 	padding: 0;
 	margin-left: 1rem;
+}
+
+.Menu-outer {
+	position: absolute;
+	right: 0;
+	bottom: 100%;
+	height: auto !important;
+	overflow: hidden;
+}
+
+.Menu-outer:not(.Active) {
+	pointer-events: none;
+}
+
+.Menu-inner {
+	opacity: 1;
+	display: flex;
+	border-top-left-radius: var(--border-radius-1);
+	border-top-right-radius: var(--border-radius-1);
+	border-bottom-left-radius: var(--border-radius-1);
+	transform: none;
+	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+	overflow: hidden;
+	resize: horizontal;
+}
+
+.Menu-outer:not(.Active) .Menu-inner {
+	opacity: 0;
+	transform: translateY(100px);
+}
+
+.Menu-inner::after,
+.Menu-outer::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	border-radius: inherit;
+	pointer-events: none;
+}
+
+.Menu-inner::after {
+	opacity: var(--taskbar-menu-opacity);
+	background-color: var(--taskbar-menu-color);
+	z-index: -2;
+}
+
+.Menu-outer::after {
+	opacity: 1;
+	transition: opacity 200ms ease-in-out, top 200ms ease-in-out;
+	backdrop-filter: var(--taskbar-filter);
+	z-index: -3;
+}
+
+.Menu-outer:not(.Active)::after {
+	opacity: 0;
+	top: 100px;
 }

src/components/taskbar/menus/HomeMenu.module.css

@@ -1,45 +1,13 @@
 .Container-outer {
-	position: absolute;
+	right: unset;
 	left: 0;
-	bottom: 100%;
-	height: auto !important;
-	overflow: hidden;
 }
 
 .Container-inner {
-	opacity: 1;
-	display: flex;
 	min-width: 16rem;
 	max-width: 32rem;
-	border-top-left-radius: 0.5rem;
+	border-bottom-left-radius: 0;
-	border-top-right-radius: 0.5rem;
+	border-bottom-right-radius: var(--border-radius-1);
-	border-bottom-right-radius: 0.5rem;
-	backdrop-filter: var(--taskbar-filter);
-	transform: none;
-	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
-	overflow: hidden;
-	resize: horizontal;
-}
-
-.Container-inner::after {
-	opacity: var(--taskbar-menu-opacity);
-	content: "";
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background-color: var(--taskbar-menu-color);
-	z-index: -2;
-}
-
-.Container-outer:not(.Active) {
-	pointer-events: none;
-}
-
-.Container-outer:not(.Active) .Container-inner {
-	opacity: 0;
-	transform: translateY(100px);
 }
 
 .Buttons {

src/components/taskbar/menus/HomeMenu.tsx

@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./HomeMenu.module.css";
 import appStyles from "./AppList.module.css";
+import taskbarStyles from "../Taskbar.module.css";
 import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons";
 import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
 import AppsManager from "../../../features/apps/appsManager";
@@ -29,9 +30,9 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
 		setTabIndex(active ? 0 : -1);
 	}, [active]);
 
-	const classNames = [styles["Container-outer"]];
+	const classNames = [styles["Container-outer"], taskbarStyles["Menu-outer"]];
 	if (active)
-		classNames.push(styles.Active);
+		classNames.push(taskbarStyles.Active);
 
 	let onlyAltKey = false;
 	const onKeyDown = (event: KeyboardEvent) => {
@@ -61,7 +62,7 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
 
 	return (
 		<div className={classNames.join(" ")}>
-			<div className={styles["Container-inner"]}>
+			<div className={`${styles["Container-inner"]} ${taskbarStyles["Menu-inner"]}`}>
 				<div className={styles.Buttons}>
 					<button title="Shut Down" tabIndex={tabIndex} onClick={() => { closeViewport(true); }}>
 						<FontAwesomeIcon icon={faPowerOff}/>

src/components/taskbar/menus/SearchMenu.module.css

@@ -17,9 +17,9 @@
 	min-width: 13rem;
 	max-width: 19rem;
 	padding: 0.5rem;
-	border-top-left-radius: 0.5rem;
+	border-top-left-radius: var(--border-radius-1);
-	border-top-right-radius: 0.5rem;
+	border-top-right-radius: var(--border-radius-1);
-	border-bottom-right-radius: 0.5rem;
+	border-bottom-right-radius: var(--border-radius-1);
 	backdrop-filter: var(--taskbar-filter);
 	transform: none;
 	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;

src/components/taskbar/menus/UtilMenu.module.css

@@ -9,9 +9,9 @@
 .Container-inner {
 	opacity: 1;
 	display: flex;
-	border-top-left-radius: 0.5rem;
+	border-top-left-radius: var(--border-radius-1);
-	border-top-right-radius: 0.5rem;
+	border-top-right-radius: var(--border-radius-1);
-	border-bottom-left-radius: 0.5rem;
+	border-bottom-left-radius: var(--border-radius-1);
 	backdrop-filter: var(--taskbar-filter);
 	transform: none;
 	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;

src/hooks/themes/themes.tsx

@@ -13,10 +13,10 @@ export function ThemeProvider({ children }: ThemeProviderProps): ReactElement {
 	const themeSettings = settingsManager.get(SettingsManager.VIRTUAL_PATHS.theme);
 
 	useEffect(() => {
-		void themeSettings.get("theme", (value: string) => { setTheme(parseInt(value)); });
+		void themeSettings.get("theme", (value: string) => { setTheme(parseInt(value) || 0); });
 	}, [themeSettings]);
 
-	return <div className={`${THEMES[theme]}-theme`}>
+	return <div className={`${THEMES[theme ?? 0]}-theme`}>
 		{children}
 	</div>;
 }