Added callback for onPress for the SongCardInfos and replaced the button to have the play icon more centered but some state issue

front/components/V2/SongCardInfo.tsx

@@ -199,7 +199,6 @@ const SongCardInfo = (props: SongCardInfoProps) => {
 							</View>
 						</View>
 					</PresenceTransition>
-					{/* icon bu=outon appear in the middle of the card after the first presencetransition is done */}
 					<PresenceTransition
 						style={{
 							width: '100%',
@@ -224,7 +223,7 @@ const SongCardInfo = (props: SongCardInfoProps) => {
 								alignItems: 'center',
 							}}
 						>
-							<Button
+							<Pressable
 								onHoverIn={() => {
 									setIsPlayHovered(true);
 								}}
@@ -233,16 +232,37 @@ const SongCardInfo = (props: SongCardInfoProps) => {
 								}}
 								borderRadius={100}
 								marginBottom={35}
-								leftIcon={
-									<Ionicons
-										name="play-outline"
-										color={'white'}
-										size={20}
-										rounded="sm"
-									/>
-								}
 								onPress={props.onPlay}
-							/>
+							>
+								{({ isPressed, isHovered }) => (
+									<View
+										style={{
+											width: 40,
+											height: 40,
+											borderRadius: 100,
+											display: 'flex',
+											justifyContent: 'center',
+											alignItems: 'center',
+											backgroundColor: (() => {
+												if (isPressed) {
+													return 'rgba(96, 117, 249, 1)';
+												} else if (isHovered) {
+													return 'rgba(96, 117, 249, 0.9)';
+												} else {
+													return 'rgba(96, 117, 249, 0.7)';
+												}
+											})(),
+										}}
+									>
+										<Ionicons
+											name="play-outline"
+											color={'white'}
+											size={20}
+											rounded="sm"
+										/>
+									</View>
+								)}
+							</Pressable>
 						</View>
 					</PresenceTransition>
 				</>

front/views/V2/HomeView.tsx

@@ -5,6 +5,7 @@ import { useQuery } from '../../Queries';
 import HomeMainSongCard from '../../components/V2/HomeMainSongCard';
 import SongCardInfo from '../../components/V2/SongCardInfo';
 import API from '../../API';
+import { useNavigation } from '../../Navigation';
 
 const bigSideRatio = 1000;
 const smallSideRatio = 618;
@@ -42,6 +43,7 @@ const HomeView = () => {
 	const songsQuery = useQuery(API.getSongSuggestions);
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isPhone = screenSize === 'small';
+	const navigation = useNavigation();
 
 	return (
 		<View
@@ -163,7 +165,10 @@ const HomeView = () => {
 							key={song.id}
 							song={song}
 							onPress={() => {
-								console.log('SongCardInfo pressed');
+								navigation.navigate('Song', { songId: song.id });
+							}}
+							onPlay={() => {
+								console.log('play');
 							}}
 						/>
 					))}