modified: files to ios26 ui/ux

2026-03-11 13:43:06 +11:00
parent 44e3558681
commit c67e60a57b
23 changed files with 2310 additions and 1618 deletions
--- a/components/ui/ParticipantDeatails.tsx
+++ b/components/ui/ParticipantDeatails.tsx
@@ -1,3 +1,4 @@
+import { BlurView } from "expo-blur";
 import { StyleSheet, Text, View } from "react-native";

 type ParticipantDetailsProps = {
@@ -14,41 +15,77 @@ const ParticipantDetails = ({
  streamingService,
 }: ParticipantDetailsProps) => {
  return (
-    <View style={styles.participantsDetailsContainer}>
-      <Text style={styles.detailTitle}>Beschreibung:</Text>
-      <Text style={styles.detailLabel}>{description}</Text>
-      <Text style={styles.detailTitle}>Konzept:</Text>
-      <Text style={styles.detailLabel}>{concept}</Text>
-      <Text style={styles.detailTitle}>Genres:</Text>
-      <Text style={styles.detailLabel}>{genres.join(', ')}</Text>
-      <Text style={styles.detailTitle}>Produktion:</Text>
-      <Text style={styles.detailLabel}>{streamingService}</Text>
+    <View style={styles.container}>
+      <BlurView intensity={20} tint="dark" style={styles.card}>
+        <Text style={styles.detailTitle}>Beschreibung</Text>
+        <Text style={styles.detailLabel}>{description}</Text>
+      </BlurView>
+      <BlurView intensity={20} tint="dark" style={styles.card}>
+        <Text style={styles.detailTitle}>Konzept</Text>
+        <Text style={styles.detailLabel}>{concept}</Text>
+      </BlurView>
+      <BlurView intensity={20} tint="dark" style={styles.card}>
+        <Text style={styles.detailTitle}>Genres</Text>
+        <View style={styles.genreRow}>
+          {genres.map((g) => (
+            <View key={g} style={styles.genrePill}>
+              <Text style={styles.genrePillText}>{g}</Text>
+            </View>
+          ))}
+        </View>
+      </BlurView>
+      <BlurView intensity={20} tint="dark" style={styles.card}>
+        <Text style={styles.detailTitle}>Produktion</Text>
+        <Text style={styles.detailLabel}>{streamingService}</Text>
+      </BlurView>
    </View>
  );
 };

 const styles = StyleSheet.create({
-  participantsDetailsContainer: {
+  container: {
    width: "100%",
-    height: "100%",
-    backgroundColor: "hsl(221, 39%, 2%)",
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 20,
+    gap: 12,
+    backgroundColor: "transparent",
+  },
+  card: {
+    borderRadius: 20,
+    overflow: "hidden",
+    padding: 18,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(255,255,255,0.08)",
  },
  detailTitle: {
-    color: "hsl(0, 0%, 100%)",
-    fontSize: 14,
-    fontWeight: "bold",
-    marginTop: 10,
-    marginLeft: 20,
-    marginBottom: 5,
+    color: "rgba(255,255,255,0.95)",
+    fontSize: 15,
+    fontWeight: "700",
+    marginBottom: 8,
+    letterSpacing: 0.2,
  },
  detailLabel: {
-    color: "hsl(0, 0%, 80%)",
+    color: "rgba(255,255,255,0.65)",
    fontSize: 14,
-    lineHeight: 20,
-    width: "90%",
-    fontWeight: "300",
-    marginLeft: 20,
-    marginTop: 5,
+    lineHeight: 22,
+    fontWeight: "400",
+  },
+  genreRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+  },
+  genrePill: {
+    backgroundColor: "rgba(255,255,255,0.1)",
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
+  genrePillText: {
+    color: "rgba(255,255,255,0.8)",
+    fontSize: 13,
+    fontWeight: "500",
  },
 });

--- a/components/ui/ShowCard.tsx
+++ b/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;
--- a/components/ui/ShowInfo.tsx
+++ b/components/ui/ShowInfo.tsx
@@ -1,4 +1,5 @@
-import { View, Text, StyleSheet } from "react-native";
+import { BlurView } from "expo-blur";
+import { StyleSheet, Text, View } from "react-native";

 type ShowInfoProps = {
  seasons: number;
@@ -17,37 +18,42 @@ const ShowInfo = ({
 }: ShowInfoProps) => {
  return (
    <View style={styles.showMainInfoSection}>
-      <Text style={styles.showInfoText}>{seasons} Staffeln</Text>
-      <View style={styles.dot} />
-      <Text style={styles.showInfoText}>{participants} Teilnehmer</Text>
-      <View style={styles.dot} />
-      <Text style={styles.showInfoText}>{streamingService}</Text>
+      <BlurView intensity={25} tint="dark" style={styles.pill}>
+        <Text style={styles.showInfoText}>{seasons} Staffeln</Text>
+      </BlurView>
+      <BlurView intensity={25} tint="dark" style={styles.pill}>
+        <Text style={styles.showInfoText}>{participants} Teilnehmer</Text>
+      </BlurView>
+      <BlurView intensity={25} tint="dark" style={styles.pill}>
+        <Text style={styles.showInfoText}>{streamingService}</Text>
+      </BlurView>
    </View>
  );
 };

 const styles = StyleSheet.create({
  showMainInfoSection: {
-    width: "auto",
-    height: "auto",
    alignSelf: "center",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
-    top: 20,
-    marginBottom: 20,
+    gap: 8,
+    marginTop: 8,
+    marginBottom: 12,
+  },
+  pill: {
+    paddingHorizontal: 14,
+    paddingVertical: 7,
+    borderRadius: 20,
+    overflow: "hidden",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(255,255,255,0.1)",
  },
  showInfoText: {
-    color: "hsl(0, 0%, 80%)",
-    fontSize: 14,
-  },
-  dot: {
-    width: 4,
-    height: 4,
-    borderRadius: 3,
-    backgroundColor: "hsl(0, 0%, 80%)",
-    marginHorizontal: 7,
-    marginTop: 2,
+    color: "rgba(255,255,255,0.85)",
+    fontSize: 13,
+    fontWeight: "500",
+    letterSpacing: 0.2,
  },
 });

--- a/components/ui/StackHeader.tsx
+++ b/components/ui/StackHeader.tsx
@@ -1,4 +1,5 @@
 import Feather from "@expo/vector-icons/Feather";
+import { BlurView } from "expo-blur";
 import { router, useLocalSearchParams } from "expo-router";
 import React from "react";
 import {
@@ -15,48 +16,51 @@ export default function StackHeader() {
  const logoUriString = Array.isArray(logoUri) ? logoUri[0] : logoUri;

  return (
-    <View style={styles.header}>
+    <BlurView intensity={60} tint="dark" style={styles.header}>
      <TouchableOpacity onPress={() => router.back()}>
-        <Feather name="arrow-left" size={26} color="white" />
+        <BlurView intensity={40} tint="light" style={styles.backButton}>
+          <Feather
+            name="chevron-left"
+            size={22}
+            color="rgba(255,255,255,0.95)"
+          />
+        </BlurView>
      </TouchableOpacity>
      <Image style={styles.logo} source={{ uri: logoUriString }} />
-      {/* <TouchableOpacity>
-        <Feather name="share" size={26} color="white" />
-      </TouchableOpacity> */}
-    </View>
+      <View style={{ width: 40 }} />
+    </BlurView>
  );
 }

 const styles = StyleSheet.create({
  header: {
-    height: 150,
-    backgroundColor: "hsl(221, 39%, 12%)",
+    height: 140,
    alignItems: "center",
    justifyContent: "space-between",
    flexDirection: "row",
-    borderBottomWidth: 1,
-    paddingTop: Dimensions.get("window").height * 0.065,
-    paddingHorizontal: 20,
-
-    borderBottomColor: "hsl(221, 39%, 15%)",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 3,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
+    paddingTop: Dimensions.get("window").height * 0.06,
+    paddingHorizontal: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "rgba(255,255,255,0.08)",
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    overflow: "hidden",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(255,255,255,0.18)",
  },
  logo: {
    width: 100,
    height: 100,
    resizeMode: "contain",
-    marginLeft: 10,
  },
  title: {
    color: "white",
    fontSize: 14,
-    fontWeight: "bold",
+    fontWeight: "600",
  },
 });