modified: files to ios26 ui/ux

components/ui/ShowCard.tsx

@@ -5,7 +5,6 @@ type ShowCardProps = {
   imageUri: string;
   streamingServicesUris: string[];
   liveBadgeText?: string;
-  liveBadgeContainerStyle?: object;
   genres: string[];
   title: string;
   onPress?: () => void;
@@ -15,139 +14,144 @@ const ShowCard = ({
   imageUri,
   streamingServicesUris,
   liveBadgeText,
-  liveBadgeContainerStyle,
   genres,
   onPress,
   title,
 }: ShowCardProps) => {
   return (
-    <TouchableOpacity
-      style={styles.showContainer}
-      activeOpacity={0.3}
-      onPress={onPress}
-    >
+    <TouchableOpacity style={styles.card} activeOpacity={0.8} onPress={onPress}>
       <Image
-        source={{
-          uri: imageUri,
-        }}
-        style={[StyleSheet.absoluteFillObject, { borderRadius: 35 }]}
+        source={{ uri: imageUri }}
+        style={[StyleSheet.absoluteFillObject, { borderRadius: 18 }]}
       />
 
-      <View style={{ flexDirection: 'row', width: '100%', justifyContent: 'flex-end', padding: 10, gap: 5}}>
-        {streamingServicesUris.length > 0 && streamingServicesUris.map((service) => (
-          <Image
-            key={service}
-            source={{
-              uri: service,
-            }}
-            style={{ height: 45, width: 45, resizeMode: 'contain', borderRadius: 100}}
-          />
+      {/* Gradient-like overlay at bottom */}
+      <View style={styles.bottomGradient} />
 
-        ))}
+      {/* Streaming service icons */}
+      <View style={styles.serviceRow}>
+        {streamingServicesUris.length > 0 &&
+          streamingServicesUris.map((service) => (
+            <Image
+              key={service}
+              source={{ uri: service }}
+              style={styles.serviceIcon}
+            />
+          ))}
       </View>
 
+      {/* Live badge */}
       {liveBadgeText && (
-        <View style={liveBadgeContainerStyle}>
+        <View style={styles.liveBadge}>
+          <View style={styles.liveDot} />
           <Text style={styles.liveBadgeText}>{liveBadgeText}</Text>
         </View>
       )}
 
-      <View style={styles.titleSection}>
-        <Text
-          style={{
-            color: "white",
-            fontWeight: "bold",
-            fontSize: 12,
-          }}
-        >
+      {/* Bottom info */}
+      <View style={styles.bottomInfo}>
+        <Text style={styles.title} numberOfLines={1}>
           {title}
         </Text>
-      </View>
-      <View style={styles.genreSection}>
-        {genres.map((genre) => (
-          <Text key={genre} style={styles.genreLabel}>
-            {genre}
-          </Text>
-        ))}
+        {genres.length > 0 && (
+          <View style={styles.genreRow}>
+            {genres.slice(0, 3).map((genre) => (
+              <Text key={genre} style={styles.genreTag}>
+                {genre}
+              </Text>
+            ))}
+          </View>
+        )}
       </View>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
-  showContainer: {
+  card: {
     width: "100%",
-    height: 220,
+    height: 200,
+    borderRadius: 18,
+    marginTop: 14,
+    overflow: "hidden",
+    backgroundColor: "rgba(255,255,255,0.06)",
+  },
+  bottomGradient: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 18,
     backgroundColor: "transparent",
-    alignSelf: "center",
-    borderRadius: 35,
-    marginTop: 20,
-    borderWidth: 1.5,
-    borderColor: "hsl(221, 39%, 15%)",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.18,
-    shadowRadius: 1.0,
-    elevation: 1,
+    // A dark gradient from bottom for readability
+    // Using a semi-transparent overlay at bottom
   },
-  streamingServiceIcon: {
-    width: 45,
-    height: 45,
-    marginLeft: "auto",
-    marginRight: 15,
-    borderWidth: 1,
-    borderColor: "white",
-    borderRadius: 15,
-    marginTop: 15,
+  serviceRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    padding: 10,
+    gap: 6,
   },
-  liveBadgeContainer: {
+  serviceIcon: {
+    height: 34,
+    width: 34,
+    borderRadius: 17,
+    resizeMode: "contain",
+    backgroundColor: "rgba(0,0,0,0.3)",
+  },
+  liveBadge: {
     position: "absolute",
-    top: 15,
-    left: 20,
-    backgroundColor: "red",
-    borderRadius: 10,
-    paddingVertical: 5,
+    top: 12,
+    left: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    backgroundColor: "rgba(0,0,0,0.55)",
+    paddingVertical: 4,
     paddingHorizontal: 10,
+    borderRadius: 12,
+  },
+  liveDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 4,
+    backgroundColor: "#ff3b30",
   },
   liveBadgeText: {
     color: "white",
-    fontWeight: "bold",
+    fontWeight: "700",
+    fontSize: 11,
+    letterSpacing: 0.5,
   },
-  genreSection: {
+  bottomInfo: {
     position: "absolute",
-    bottom: 15,
-    left: 20,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 14,
+    paddingBottom: 12,
+    paddingTop: 24,
+    backgroundColor: "rgba(0,0,0,0.45)",
+  },
+  title: {
+    color: "white",
+    fontWeight: "700",
+    fontSize: 16,
+    letterSpacing: 0.2,
+  },
+  genreRow: {
     flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly",
-    gap: 5,
+    gap: 6,
+    marginTop: 5,
+    flexWrap: "wrap",
   },
-  genreLabel: {
-    color: "red",
-    fontWeight: "bold",
-    fontSize: 10,
-    paddingVertical: 5,
-    paddingHorizontal: 10,
-    borderRadius: 10,
-    fontStyle: "italic",
-    backgroundColor: "rgba(255, 255, 255, 1)",
+  genreTag: {
+    color: "rgba(255,255,255,0.8)",
+    fontSize: 11,
+    fontWeight: "500",
+    paddingVertical: 2,
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    backgroundColor: "rgba(255,255,255,0.15)",
     overflow: "hidden",
   },
-  titleSection: {
-    width: "auto",
-    height: 45,
-    paddingHorizontal: 20,
-    backgroundColor: "rgba(0, 0, 0, 0.6)",
-    position: "absolute",
-    top: 50,
-    justifyContent: "center",
-    alignItems: "flex-start",
-    borderTopRightRadius: 15,
-    borderBottomRightRadius: 15,
-  },
 });
 
 export default ShowCard;