From f41bba740d47e0e22c185225ccb75e16cfe98b1e Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Wed, 18 Jun 2025 18:30:37 +0530
Subject: [PATCH] Enhance SeriesContent component with improved styling and
 layout adjustments

This update introduces several enhancements to the SeriesContent component, including the addition of a subtle highlight border for episode cards, refined gradient overlay colors, and new badge styles for episode numbers and runtime. The layout has been optimized for better readability and visual appeal, ensuring a more cohesive presentation of episode information. These changes aim to enhance the overall user experience by providing clearer and more attractive content displays.
---
 src/components/metadata/SeriesContent.tsx | 59 +++++++++++++++++------
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/components/metadata/SeriesContent.tsx b/src/components/metadata/SeriesContent.tsx
index e1f98c3a..ec86b3cf 100644
--- a/src/components/metadata/SeriesContent.tsx
+++ b/src/components/metadata/SeriesContent.tsx
@@ -333,7 +333,12 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
         key={episode.id}
         style={[
           styles.episodeCardHorizontal,
-          isTablet && styles.episodeCardHorizontalTablet
+          isTablet && styles.episodeCardHorizontalTablet,
+          // Add subtle highlight border only
+          { 
+            borderWidth: 2,
+            borderColor: currentTheme.colors.primary + '40', // 40% opacity for subtle effect
+          }
         ]}
         onPress={() => onSelectEpisode(episode)}
         activeOpacity={0.85}
@@ -345,21 +350,24 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
           contentFit="cover"
         />
         
-        {/* Gradient Overlay */}
+        {/* Standard Gradient Overlay */}
         <LinearGradient
           colors={[
-            'rgba(0,0,0,0.1)',
-            'rgba(0,0,0,0.3)', 
-            'rgba(0,0,0,0.8)',
+            'rgba(0,0,0,0.05)',
+            'rgba(0,0,0,0.2)', 
+            'rgba(0,0,0,0.6)',
+            'rgba(0,0,0,0.85)',
             'rgba(0,0,0,0.95)'
           ]}
-          locations={[0, 0.3, 0.7, 1]}
+          locations={[0, 0.2, 0.5, 0.8, 1]}
           style={styles.episodeGradient}
         >
           {/* Content Container */}
           <View style={styles.episodeContent}>
             {/* Episode Number Badge */}
-            <Text style={styles.episodeNumberHorizontal}>{episodeString}</Text>
+            <View style={styles.episodeNumberBadgeHorizontal}>
+              <Text style={styles.episodeNumberHorizontal}>{episodeString}</Text>
+            </View>
             
             {/* Episode Title */}
             <Text style={styles.episodeTitleHorizontal} numberOfLines={2}>
@@ -374,9 +382,11 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
             {/* Metadata Row */}
             <View style={styles.episodeMetadataRowHorizontal}>
               {episode.runtime && (
-                <Text style={styles.runtimeTextHorizontal}>
-                  {formatRuntime(episode.runtime)}
-                </Text>
+                <View style={styles.runtimeContainerHorizontal}>
+                  <Text style={styles.runtimeTextHorizontal}>
+                    {formatRuntime(episode.runtime)}
+                  </Text>
+                </View>
               )}
               {episode.vote_average > 0 && (
                 <View style={styles.ratingContainerHorizontal}>
@@ -395,7 +405,10 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
               <View 
                 style={[
                   styles.progressBarHorizontal,
-                  { width: `${progressPercent}%`, backgroundColor: currentTheme.colors.primary }
+                  { 
+                    width: `${progressPercent}%`, 
+                    backgroundColor: currentTheme.colors.primary,
+                  }
                 ]} 
               />
             </View>
@@ -403,14 +416,16 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
           
           {/* Completed Badge */}
           {progressPercent >= 95 && (
-            <View style={[styles.completedBadgeHorizontal, { backgroundColor: currentTheme.colors.primary }]}>
+            <View style={[styles.completedBadgeHorizontal, { 
+              backgroundColor: currentTheme.colors.primary,
+            }]}>
               <MaterialIcons name="check" size={16} color="#fff" />
             </View>
           )}
           
-          {/* More Options */}
+          {/* More Options Button */}
           <TouchableOpacity style={styles.moreButton} activeOpacity={0.7}>
-            <MaterialIcons name="more-horiz" size={24} color="rgba(255,255,255,0.8)" />
+            <MaterialIcons name="more-horiz" size={24} color="rgba(255,255,255,0.9)" />
           </TouchableOpacity>
         </LinearGradient>
       </TouchableOpacity>
@@ -708,6 +723,14 @@ const styles = StyleSheet.create({
     padding: 12,
     paddingBottom: 16,
   },
+  episodeNumberBadgeHorizontal: {
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+    marginBottom: 6,
+    alignSelf: 'flex-start',
+  },
   episodeNumberHorizontal: {
     color: 'rgba(255,255,255,0.8)',
     fontSize: 10,
@@ -736,6 +759,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 8,
   },
+  runtimeContainerHorizontal: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    paddingHorizontal: 5,
+    paddingVertical: 2,
+    borderRadius: 3,
+  },
   runtimeTextHorizontal: {
     color: 'rgba(255,255,255,0.8)',
     fontSize: 11,