Working Reflection

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

@@ -63,6 +63,7 @@ export function ThemePlaylistStack({
 	}, 75);
 
 	return (
+		<Reflection reflectionStart={75} reflectionEnd={100} shadowOpacity={0.25}>
 			<Stack
 				gap={0}
 				w={300}
@@ -100,7 +101,6 @@ export function ThemePlaylistStack({
 					/>
 				)}
 				{cardPlaylist?.name === 'Time of Day' ? (
-				<Reflection>
 					<Stack
 						w='100%'
 						h='200px'
@@ -178,9 +178,7 @@ export function ThemePlaylistStack({
 							/>
 						</Parallax>
 					</Stack>
-				</Reflection>
 				) : (
-				<Reflection>
 					<Stack
 						w='100%'
 						h='200px'
@@ -232,16 +230,9 @@ export function ThemePlaylistStack({
 								);
 							})}
 					</Stack>
-				</Reflection>
 				)}
 
-			<Group
-				w={'100%'}
-				pos={'absolute'}
-				justify='space-between'
-				bottom={0}
-				style={{ zIndex: 1000 }}
-			>
+				<Group w={'100%'} pos={'absolute'} justify='space-between' bottom={0}>
 					<Text
 						style={{
 							paddingRight: '.25rem',
@@ -253,7 +244,7 @@ export function ThemePlaylistStack({
 					>
 						{cardPlaylist.name}
 					</Text>
-				<Group gap={0}>
+					<Group gap={0} style={{ zIndex: 1000 }}>
 						{!defaultLists.includes(cardPlaylist.name) && (
 							<ActionIcon
 								style={{
@@ -288,5 +279,6 @@ export function ThemePlaylistStack({
 					</Group>
 				</Group>
 			</Stack>
+		</Reflection>
 	);
 }