diff --git a/src/components/metadata/SeriesContent.tsx b/src/components/metadata/SeriesContent.tsx index ec86b3cf..d93b5290 100644 --- a/src/components/metadata/SeriesContent.tsx +++ b/src/components/metadata/SeriesContent.tsx @@ -334,15 +334,48 @@ export const SeriesContent: React.FC = ({ style={[ styles.episodeCardHorizontal, isTablet && styles.episodeCardHorizontalTablet, - // Add subtle highlight border only + // Enhanced border styling { borderWidth: 2, - borderColor: currentTheme.colors.primary + '40', // 40% opacity for subtle effect + borderColor: 'transparent', // Make base border transparent + // Add gradient border effect using shadow + shadowColor: currentTheme.colors.primary, + shadowOffset: { width: 0, height: 0 }, + shadowOpacity: 0.6, + shadowRadius: 8, + elevation: 12, } ]} onPress={() => onSelectEpisode(episode)} activeOpacity={0.85} > + {/* Gradient Border Container */} + + + + {/* Background Image */} = ({ )} - {/* More Options Button */} - - - ); @@ -701,6 +730,7 @@ const styles = StyleSheet.create({ height: 200, position: 'relative', width: '100%', + backgroundColor: 'transparent', }, episodeCardHorizontalTablet: { height: 180, @@ -810,17 +840,6 @@ const styles = StyleSheet.create({ borderWidth: 2, borderColor: '#fff', }, - moreButton: { - position: 'absolute', - top: 12, - right: 12, - width: 32, - height: 32, - borderRadius: 16, - alignItems: 'center', - justifyContent: 'center', - backgroundColor: 'rgba(0,0,0,0.3)', - }, // Season Selector Styles seasonSelectorWrapper: {