Small fix

src/components/AddItemModal.tsx

@@ -26,6 +26,7 @@ export function AddItemModal({
 			closeOnEscape
 			closeOnClickOutside
 			centered
+			keepMounted={false}
 		>
 			<Modal.Overlay />
 			<Modal.Content h={'auto'}>

src/components/DeleteItemModal.tsx

@@ -27,6 +27,7 @@ export function DeleteItemModal({
 			closeOnEscape
 			closeOnClickOutside
 			centered
+			keepMounted={false}
 		>
 			<Modal.Overlay />
 			<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>

src/components/HelpModal/HelpModal.tsx

@@ -32,6 +32,7 @@ export function HelpModal({
 			}}
 			closeOnEscape
 			closeOnClickOutside
+			keepMounted={false}
 		>
 			<Modal.Overlay />
 			<Modal.Content>

src/components/WeatherModal/WeatherModal.tsx

@@ -49,6 +49,7 @@ export function WeatherModal({
 			}}
 			closeOnEscape
 			closeOnClickOutside
+			keepMounted={false}
 		>
 			<Modal.Overlay />
 			<Modal.Content>

src/pages/settings/components/Theming/Backgrounds/BackgroundLightbox.tsx

@@ -10,7 +10,8 @@ export function BackgroundLightbox({
 	background: string;
 }) {
 	return (
-		<Modal.Root opened={opened} onClose={close} size={'auto'} centered zIndex={250}>
+		<Modal.Root opened={opened} onClose={close} size={'auto'} centered zIndex={250}
+			keepMounted={false}>
 			<Group
 				px={'1rem'}
 				onClick={close}

src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylistModal.tsx

@@ -49,6 +49,7 @@ export function ThemePlaylistModal({
 				handleClose();
 				setThemeList('[]');
 			}}
+			keepMounted={false}
 		>
 			<Modal.Overlay />
 			<Modal.Content>

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

@@ -164,6 +164,7 @@ export function ThemeModal({
 			}}
 			fullScreen={isMobile}
 			centered
+			keepMounted={false}
 		>
 			<Modal.Overlay />
 			<Modal.Content>
@@ -206,7 +207,7 @@ export function ThemeModal({
 										<Stack
 											justify='center'
 											align='center'
-											bg={'var(--mantine-color-accent-0)'}
+											bg={'var(--mantine-color-primary-0)'}
 											px={'1rem'}
 											py={'3rem'}
 											style={{ borderRadius: '8px' }}
@@ -236,15 +237,17 @@ export function ThemeModal({
 												style={{
 													backgroundColor: 'transparent',
 													boxShadow: '3px 3px var(--mantine-color-border-0)',
+													overflow: 'visible',
 												}}
 												styles={{
 													label: {
-														backgroundColor: 'var(--mantine-color-primary-0)',
+														backgroundColor: 'var(--mantine-color-background-0)',
+														color: 'var(--mantine-color-primary-0)',
 														height: 'min-content',
 														padding: '.5rem',
 														borderRadius: 4,
 														position: 'absolute',
-														bottom: '0',
+														bottom: '-16px',
 														fontSize: '1rem',
 													},
 												}}
@@ -263,25 +266,13 @@ export function ThemeModal({
 											justify='center'
 											align='center'
 											pos={'relative'}
-											bg={'var(--mantine-color-accent-0)'}
+											bg={'var(--mantine-color-primary-0)'}
 											px={'1rem'}
 											py={'3rem'}
 											style={{ borderRadius: '8px' }}
 										>
 											<ThemeCard
-												cardTheme={{
+												cardTheme={{...allThemes[Math.floor(Math.random() * allThemes.length)], randomEnabled: 1}}
-													id: undefined,
-													name: 'Theme',
-													backgroundImage: 'none',
-													backgroundColor: '#263238',
-													searchColor: '#AABBC320',
-													primaryColor: '#AABBC3',
-													accentColor: '#aeea00',
-													borderColor: '#aeea00',
-													randomEnabled: 1,
-													textShadowsEnabled: 0,
-													appShadowsEnabled: 0,
-												}}
 												handleOpen={() => {}}
 												allThemes={[]}
 												themePlaylists={[]}
@@ -302,7 +293,7 @@ export function ThemeModal({
 													display: 'flex',
 												}}
 											/>
-											<FaArrowRight size={35} style={{ position: 'absolute' }} />
+											<FaArrowRight size={45} style={{ color: 'var(--mantine-color-background-0)', position: 'absolute', stroke: 'var(--mantine-color-accent-0)', strokeWidth: 25 }} />
 											<Button
 												pos={'absolute'}
 												w={'275px'}
@@ -310,15 +301,17 @@ export function ThemeModal({
 												style={{
 													backgroundColor: 'transparent',
 													boxShadow: '3px 3px var(--mantine-color-border-0)',
+													overflow: 'visible',
 												}}
 												styles={{
 													label: {
-														backgroundColor: 'var(--mantine-color-primary-0)',
+														backgroundColor: 'var(--mantine-color-background-0)',
+														color: 'var(--mantine-color-primary-0)',
 														height: 'min-content',
 														padding: '.5rem',
 														borderRadius: 4,
 														position: 'absolute',
-														bottom: '0',
+														bottom: '-16px',
 														fontSize: '1rem',
 													},
 												}}