updated

app/showDetails.tsx

@@ -4,6 +4,7 @@ import ShowInfo from "@/components/ui/ShowInfo";
 import ParticipantDetails from "@/components/ParticipantDeatails";
 import React from "react";
 import { useSeasonContext } from "@/contexts/SeasonContext";
+import { getShowColors } from "@/constants/colors";
 import {
   Dimensions,
   Image,
@@ -12,7 +13,6 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import * as WebBrowser from "expo-web-browser";
 import styles from "./stackStyles/showDetailStyles";
 
 export default function ShowDetails() {
@@ -23,6 +23,8 @@ export default function ShowDetails() {
     genres,
     streamingService,
     id,
+    startDate,
+    endDate,
     logoUri,
   } = useLocalSearchParams();
   const [selectedParticipants, setSelectedParticipants] =
@@ -37,6 +39,8 @@ export default function ShowDetails() {
   const [pLoading, setPLoading] = React.useState(false);
   const [pError, setPError] = React.useState<string | null>(null);
 
+  const { tabColor, seasonColor } = getShowColors(Number(id));
+
   React.useEffect(() => {
     if (!showId) return;
     let active = true;
@@ -85,6 +89,8 @@ export default function ShowDetails() {
           seasons={seasonCount}
           participants={participants.length}
           streamingService={streamingService as string}
+          startDate={startDate as string}
+          endDate={endDate as string | null}
         />
 
         <View style={styles.showBannerLogoContainer}>
@@ -103,7 +109,7 @@ export default function ShowDetails() {
                 styles.infoLabel,
                 {
                   fontWeight: selectedParticipants ? "bold" : "normal",
-                  color: selectedParticipants ? "#199edb" : "hsl(0, 0%, 65%)",
+                  color: selectedParticipants ? tabColor : "hsl(0, 0%, 65%)",
                 },
               ]}
             >
@@ -142,7 +148,7 @@ export default function ShowDetails() {
                         {
                           backgroundColor:
                             selectedSeason === season
-                              ? "#199edb"
+                              ? seasonColor
                               : "hsl(0, 0%, 20%)",
                         },
                       ]}
@@ -172,7 +178,10 @@ export default function ShowDetails() {
               {participants.map((p) => (
                 <TouchableOpacity
                   key={p.id}
-                  style={styles.participantContainer}
+                  style={[
+                    styles.participantContainer,
+                    { backgroundColor: tabColor },
+                  ]}
                   onPress={() =>
                     router.push({
                       pathname: "/participant",
@@ -190,6 +199,8 @@ export default function ShowDetails() {
                       height: "100%",
                       borderRadius: 10,
                     }}
+                    resizeMode="cover"
+                    blurRadius={p.imageUri.includes("pravatar") ? 16 : 0}
                   />
                   <Text style={styles.participantLabel} numberOfLines={2}>
                     {p.name}