Updates to theme builder

package-lock.json

@@ -26,8 +26,8 @@
 			},
 			"devDependencies": {
 				"@types/node": "^24.1.0",
-				"@types/react": "^19.1.8",
+				"@types/react": "^19.1.9",
-				"@types/react-dom": "^19.1.6",
+				"@types/react-dom": "^19.1.7",
 				"@vitejs/plugin-react": "^4.7.0",
 				"@vitest/coverage-v8": "^3.2.4",
 				"@vitest/ui": "^3.2.4",
@@ -1856,9 +1856,9 @@
 			}
 		},
 		"node_modules/@types/react": {
-			"version": "19.1.8",
+			"version": "19.1.9",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
-			"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
+			"integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
 			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1866,9 +1866,9 @@
 			}
 		},
 		"node_modules/@types/react-dom": {
-			"version": "19.1.6",
+			"version": "19.1.7",
-			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
+			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz",
-			"integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
+			"integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==",
 			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {

package.json

@@ -28,8 +28,8 @@
 	},
 	"devDependencies": {
 		"@types/node": "^24.1.0",
-		"@types/react": "^19.1.8",
+		"@types/react": "^19.1.9",
-		"@types/react-dom": "^19.1.6",
+		"@types/react-dom": "^19.1.7",
 		"@vitejs/plugin-react": "^4.7.0",
 		"@vitest/coverage-v8": "^3.2.4",
 		"@vitest/ui": "^3.2.4",

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:
+							filter: filter(),
-								theme.appShadowsEnabled === 1 &&
-								'drop-shadow(2px 2px color-mix(in srgb, var(--mantine-color-accent-0), transparent 30%))',
 						}}
 					/>
 				)}

src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx

@@ -155,8 +155,8 @@ export function ThemeEditor({
 							color={selectedTheme.primaryColor}
 							bd={`1px solid ${selectedTheme.primaryColor}`}
 							pos={'absolute'}
-							top={'6.25rem'}
+							top={'11.5rem'}
-							left={'1.5rem'}
+							left={'8.5rem'}
 						/>
 					</Tooltip>
 					<Tooltip
@@ -191,7 +191,7 @@ export function ThemeEditor({
 							color={selectedTheme.backgroundColor}
 							bd={`1px solid ${selectedTheme.primaryColor}`}
 							pos={'absolute'}
-							bottom={'10rem'}
+							bottom={'4rem'}
 							right={'3.5rem'}
 						/>
 					</Tooltip>
@@ -251,7 +251,7 @@ export function ThemeEditor({
 				</Stack>
 				<Stack
 					w={isMobile ? '100%' : '28%'}
-					h={'436px'}
+					h={'450px'}
 					p={'1rem'}
 					style={{
 						borderRadius: '1rem',
@@ -263,6 +263,7 @@ export function ThemeEditor({
 							<Text
 								className={textClasses.sectionTitle}
 								classNames={textClasses}
+								c={'var(--mantine-color-background-0)'}
 								style={{
 									textShadow: theme.textShadowsEnabled
 										? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'

src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx

@@ -1,6 +1,6 @@
 import { Group, Select, Stack, Text } from '@mantine/core';
 import { AppItem } from 'components';
-import { selectClasses } from 'styles';
+import { selectClasses, textClasses } from 'styles';
 import type { Theme } from 'types';
 
 export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
@@ -23,8 +23,14 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 				borderRadius: '10px',
 				border: '2px solid var(--mantine-color-primary-0)',
 				padding: '1rem',
+				'--mantine-color-primary-0': selectedTheme?.primaryColor,
+				'--mantine-color-accent-0': selectedTheme?.accentColor,
+				'--mantine-color-background-0': selectedTheme?.backgroundColor,
+				'--mantine-color-border-0': selectedTheme?.borderColor,
+				'--mantine-color-search-0': selectedTheme?.searchColor,
 			}}
 			align='center'
+			gap={0}
 		>
 			<Select
 				disabled
@@ -51,19 +57,28 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 				leftSection={'Google Search'}
 				rightSection={<div />}
 			/>
+			<Text
+				className={textClasses.greeting}
+				classNames={textClasses}
+				p={0}
+				m={0}
+				w={'100%'}
+				style={{
+					textShadow: selectedTheme.textShadowsEnabled
+						? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
+						: undefined,
+				}}
+			>
+				Hello World!
+			</Text>
 			<Stack gap={0} w={'100%'}>
 				<Text
-					pl={'1.5rem'}
+					className={textClasses.sectionTitle}
+					classNames={textClasses}
 					style={{
-						textDecoration: 'underline',
+						boxShadow: selectedTheme.textShadowsEnabled
-						fontSize: '1.25rem',
+							? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-						fontWeight: 200,
+							: undefined,
-						fontStyle: 'italic',
-						height: '10px',
-						textTransform: 'uppercase',
-						marginTop: '1.25rem',
-						marginBottom: '1.25rem',
-						color: selectedTheme?.primaryColor,
 					}}
 				>
 					Applications
@@ -78,8 +93,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 						gridRowGap: '5px',
 						gridTemplateColumns: '1fr 1fr 1fr',
 						gridTemplateRows: '64px',
-						padding: '1rem',
+						padding: 0,
-						paddingTop: 0,
 						justifyContent: 'center',
 						alignContent: 'center',
 					}}
@@ -87,11 +101,6 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 				>
 					<Group
 						style={{
-							'--mantine-color-primary-0': selectedTheme?.primaryColor,
-							'--mantine-color-accent-0': selectedTheme?.accentColor,
-							'--mantine-color-background-0': selectedTheme?.backgroundColor,
-							'--mantine-color-border-0': selectedTheme?.borderColor,
-							'--mantine-color-search-0': selectedTheme?.searchColor,
 							display: 'grid',
 							gridTemplateColumns: '1fr 1fr 1fr',
 						}}
@@ -105,6 +114,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 							enabled={1}
 							scale={1}
 							linksActive={false}
+							selectedTheme={selectedTheme}
 						/>
 						<AppItem
 							url='https://google.com'
@@ -113,6 +123,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 							enabled={1}
 							scale={1}
 							linksActive={false}
+							selectedTheme={selectedTheme}
 						/>
 						<AppItem
 							url='https://google.com'
@@ -121,23 +132,21 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 							enabled={1}
 							scale={1}
 							linksActive={false}
+							selectedTheme={selectedTheme}
 						/>
 					</Group>
 				</Stack>
 			</Stack>
 			<Stack gap={0} w={'100%'}>
 				<Text
-					pl={'1.5rem'}
+					className={textClasses.sectionTitle}
+					classNames={textClasses}
+					mb={'-.5rem'}
+					mt={0}
 					style={{
-						textDecoration: 'underline',
+						boxShadow: selectedTheme.textShadowsEnabled
-						fontSize: '1.25rem',
+							? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-						fontWeight: 200,
+							: undefined,
-						fontStyle: 'italic',
-						height: '10px',
-						textTransform: 'uppercase',
-						marginTop: '1.25rem',
-						marginBottom: '1.25rem',
-						color: selectedTheme?.primaryColor,
 					}}
 				>
 					Bookmarks