Style updates

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

@@ -11,7 +11,7 @@ import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
-import ThemeMiniCard from './ThemeMiniCard';
+import ThemePreviewMiddleware from './ThemePreivewMiddleware';
 import TimeOfDay from './TimeOfDay';
 
 function ThemePlaylistModal({
@@ -45,6 +45,7 @@ function ThemePlaylistModal({
 	if (selectedPlaylist?.name === undefined) {
 		setSelectedPlaylist(defaultPlaylist);
 	}
+
 	return (
 		<Modal.Root
 			size={'50%'}
@@ -100,31 +101,15 @@ function ThemePlaylistModal({
 									allThemes?.map((miniTheme: Theme) => {
 										const newThemeList = themeList;
 										return (
-											<Group
+											<ThemePreviewMiddleware
 												key={miniTheme.id}
-												style={{
-													cursor: 'pointer',
-													filter:
-														newThemeList && !newThemeList?.includes(miniTheme.id)
-															? 'saturate(0)'
-															: undefined,
-												}}
-												onClick={() => {
-													const newSelectedPlaylist = { ...selectedPlaylist };
-													if (themeList?.includes(miniTheme.id)) {
-														newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
-													} else {
-														newThemeList.push(miniTheme.id);
-													}
-													newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
-													setSelectedPlaylist(newSelectedPlaylist);
-												}}
-											>
-												<ThemeMiniCard
-													allThemes={allThemes}
-													item={Number(miniTheme.id)}
-												/>
-											</Group>
+												newThemeList={newThemeList}
+												miniTheme={miniTheme}
+												themeList={themeList}
+												allThemes={allThemes}
+												selectedPlaylist={selectedPlaylist}
+												setSelectedPlaylist={setSelectedPlaylist}
+											/>
 										);
 									})}
 							</SimpleGrid>