Updates to rendering

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

@@ -43,22 +43,24 @@ export function ThemeCard({
 			pos={'relative'}
 			ref={hoverRef}
 		>
-			<DeleteItemModal
-				modalOpened={modalOpened}
-				handleClose={closeModal}
-				handleDelete={() => handleDelete(cardTheme, 'api/themes')}
-				title={'Delete Theme'}
-				body={
-					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
-						<Text>Are you sure you want to delete this theme?</Text>
-						<Text
-							className={textClasses.deleteItem}
-							classNames={textClasses}
-						>{`"${cardTheme.name}"`}</Text>
-						<Text c='red'>This action cannot be undone!</Text>
-					</Stack>
-				}
-			/>
+			{modalOpened && (
+				<DeleteItemModal
+					modalOpened={modalOpened}
+					handleClose={closeModal}
+					handleDelete={() => handleDelete(cardTheme, 'api/themes')}
+					title={'Delete Theme'}
+					body={
+						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+							<Text>Are you sure you want to delete this theme?</Text>
+							<Text
+								className={textClasses.deleteItem}
+								classNames={textClasses}
+							>{`"${cardTheme.name}"`}</Text>
+							<Text c='red'>This action cannot be undone!</Text>
+						</Stack>
+					}
+				/>
+			)}
 			<Text
 				style={{
 					position: 'absolute',

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

@@ -98,25 +98,30 @@ export function Themes() {
 			setIsLoading(false);
 		}
 	}, [debouncedSearch]);
+
 	return (
 		<Stack>
-			<ThemeModal
-				opened={themeModalOpened}
-				selectedTheme={selectedTheme}
-				setSelectedTheme={setSelectedTheme}
-				backgroundList={backgroundList}
-				isNew={isNew}
-				setIsNew={setIsNew}
-				allThemes={allThemes}
-				closeThemeModal={closeThemeModal}
-				themePlaylists={themePlaylists}
-			/>
-			<BackgroundModal
-				backgroundModalOpened={backgroundModalOpened}
-				closeModal={closeBackgroundModal}
-				backgroundList={backgroundList}
-				inUseBackgrounds={inUseBackgrounds}
-			/>
+			{themeModalOpened && (
+				<ThemeModal
+					opened={themeModalOpened}
+					selectedTheme={selectedTheme}
+					setSelectedTheme={setSelectedTheme}
+					backgroundList={backgroundList}
+					isNew={isNew}
+					setIsNew={setIsNew}
+					allThemes={allThemes}
+					closeThemeModal={closeThemeModal}
+					themePlaylists={themePlaylists}
+				/>
+			)}
+			{backgroundModalOpened && (
+				<BackgroundModal
+					backgroundModalOpened={backgroundModalOpened}
+					closeModal={closeBackgroundModal}
+					backgroundList={backgroundList}
+					inUseBackgrounds={inUseBackgrounds}
+				/>
+			)}
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={handleNewTheme}