From 64cf136850185aafe9b2b62a92f0930727af8f2a Mon Sep 17 00:00:00 2001
From: m4x809 <github@j-pet.de>
Date: Sat, 25 Oct 2025 01:41:23 +0200
Subject: [PATCH] Refactor AlbumCard and AlbumDetail components to enhance view
 transitions

- Wrapped album title and release date in span elements to apply view transition names, improving animation consistency.
- Updated styling for album title and release date to maintain visual integrity with dynamic theming.
---
 src/Components/AlbumCard.tsx     | 18 +++++++++---------
 src/app/album/[albumId]/page.tsx | 18 +++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/Components/AlbumCard.tsx b/src/Components/AlbumCard.tsx
index ccd5ab5..690063a 100644
--- a/src/Components/AlbumCard.tsx
+++ b/src/Components/AlbumCard.tsx
@@ -72,26 +72,26 @@ export default function AlbumCard({ album }: { album: Album }) {
 						fw={700}
 						className="transition-colors"
 						style={{
-							viewTransitionName: `album-card-title-${album.id}`,
 							color: theme.text.primary,
 						}}
 					>
-						{label}
+						<span style={{ viewTransitionName: `album-card-title-${album.id}` }}>{label}</span>
 					</Text>
 
 					<Text
 						size="sm"
 						style={{
-							viewTransitionName: `album-card-release-date-${album.id}`,
 							color: theme.text.secondary,
 						}}
 					>
-						<span style={{ color: theme.accent.DEFAULT, fontWeight: 600 }}>Released: </span>
-						{new Date(releaseDate).toLocaleDateString("en-US", {
-							year: "numeric",
-							month: "long",
-							day: "numeric",
-						})}
+						<span style={{ viewTransitionName: `album-card-release-date-${album.id}` }}>
+							<span style={{ color: theme.accent.DEFAULT, fontWeight: 600 }}>Released: </span>
+							{new Date(releaseDate).toLocaleDateString("en-US", {
+								year: "numeric",
+								month: "long",
+								day: "numeric",
+							})}
+						</span>
 					</Text>
 
 					<Group gap="xs">
diff --git a/src/app/album/[albumId]/page.tsx b/src/app/album/[albumId]/page.tsx
index 6190517..75d5b07 100644
--- a/src/app/album/[albumId]/page.tsx
+++ b/src/app/album/[albumId]/page.tsx
@@ -79,27 +79,27 @@ export default async function AlbumDetail({ params }: { params: Promise<{ albumI
 							order={1}
 							className="mb-3 text-6xl font-bold"
 							style={{
-								viewTransitionName: `album-card-title-${album.id}`,
 								color: theme.text.primary,
 								textShadow: `0 0 20px ${theme.primary.DEFAULT}80`,
 							}}
 						>
-							{album.label}
+							<span style={{ viewTransitionName: `album-card-title-${album.id}` }}>{album.label}</span>
 						</Title>
 						<Text
 							size="xl"
 							className="mb-4"
 							style={{
-								viewTransitionName: `album-card-release-date-${album.id}`,
 								color: theme.text.secondary,
 							}}
 						>
-							<span style={{ color: theme.accent.DEFAULT, fontWeight: 600 }}>Released: </span>
-							{new Date(album.releaseDate).toLocaleDateString("en-US", {
-								year: "numeric",
-								month: "long",
-								day: "numeric",
-							})}
+							<span style={{ viewTransitionName: `album-card-release-date-${album.id}` }}>
+								<span style={{ color: theme.accent.DEFAULT, fontWeight: 600 }}>Released: </span>
+								{new Date(album.releaseDate).toLocaleDateString("en-US", {
+									year: "numeric",
+									month: "long",
+									day: "numeric",
+								})}
+							</span>
 						</Text>
 						<Text size="md" style={{ color: theme.text.muted, lineHeight: 1.6 }}>
 							{album.description}