Updates to theme builder

src/components/Applications/AppItem.tsx

@@ -7,6 +7,7 @@ import { FiAlertCircle } from 'react-icons/fi';
 import * as si from 'react-icons/si';
 import * as vsc from 'react-icons/vsc';
 import { actionIconClasses, boxClasses, textClasses } from 'styles';
+import type { Theme } from 'types';
 
 export function AppItem({
 	url,
@@ -15,6 +16,7 @@ export function AppItem({
 	enabled,
 	scale,
 	linksActive,
+	selectedTheme,
 }: {
 	url: string;
 	icon: string;
@@ -22,6 +24,7 @@ export function AppItem({
 	enabled: number | null;
 	scale: number;
 	linksActive: boolean;
+	selectedTheme?: Theme;
 }) {
 	const { ref, width, height } = useElementSize();
 	const allIcons: any = { ...fa6, ...vsc, ...si };
@@ -32,6 +35,17 @@ export function AppItem({
 	const validUrl =
 		url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
 
+	const filter = () => {
+		if (selectedTheme && selectedTheme.appShadowsEnabled === 1) {
+			return 'drop-shadow(2px 2px color-mix(in srgb, var(--mantine-color-accent-0), transparent 30%))';
+		}
+		if (!selectedTheme && theme.appShadowsEnabled === 1) {
+			return 'drop-shadow(2px 2px color-mix(in srgb, var(--mantine-color-accent-0), transparent 30%))';
+		}
+
+		return 'none';
+	};
+
 	return (
 		<Box
 			component='a'
@@ -99,9 +113,7 @@ export function AppItem({
 						style={{
 							height: scale * 32,
 							width: scale * 32,
-							filter:
-								theme.appShadowsEnabled === 1 &&
-								'drop-shadow(2px 2px color-mix(in srgb, var(--mantine-color-accent-0), transparent 30%))',
+							filter: filter(),
 						}}
 					/>
 				)}