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/discovery/PersonRow.tsx
+++ b/components/discovery/PersonRow.tsx
@@ -1,7 +1,7 @@
-import { FontAwesome } from "@expo/vector-icons";
+import Feather from "@expo/vector-icons/Feather";
 import { router } from "expo-router";
 import React from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";

 export type PersonLite = {
  id?: number;
@@ -24,66 +24,110 @@ const calcAge = (birthDate?: string | null): number | null => {

 type Props = {
  person: any;
-  onPress?: () => void;
+  isFirst?: boolean;
+  isLast?: boolean;
 };

-export default function PersonRow({ person }: Props) {
+export default function PersonRow({ person, isFirst, isLast }: Props) {
  const age = calcAge(person.birthDate);
  const id = person.personId ?? person.id;
+  const imageUrl = person.imageUrl ?? person.imageUri ?? null;
+  const isPravatar = imageUrl?.includes("pravatar");

  const goToPerson = React.useCallback(
    (id: number) => {
-      console.log("go to person", id);
      router.push({
        pathname: "/participant",
-        params: { participantId: String(id), name: person.name },
+        params: {
+          participantId: String(id),
+          name: person.name,
+          imageUri: imageUrl || "",
+        },
      });
    },
-    [person.name]
+    [person.name, imageUrl],
  );

  return (
    <TouchableOpacity
-      onPress={() => {
-        goToPerson(Number(id));
-      }}
-      style={styles.personRow}
+      onPress={() => goToPerson(Number(id))}
+      style={[
+        styles.personRow,
+        isFirst && styles.firstRow,
+        isLast && styles.lastRow,
+      ]}
+      activeOpacity={0.6}
    >
      <View style={styles.avatarCircle}>
-        <FontAwesome name="user" size={22} color="#ccc" />
+        {imageUrl && !isPravatar ? (
+          <Image
+            source={{ uri: imageUrl }}
+            style={styles.avatarImage}
+            resizeMode="cover"
+          />
+        ) : (
+          <Feather name="user" size={20} color="rgba(255,255,255,0.7)" />
+        )}
      </View>
-      <View style={{ flex: 1 }}>
-        <Text style={styles.personName}>
-          {person.name || "Unbekannt"}
-          {age != null ? ` (${age})` : ""}
-        </Text>
-        {/* <Text style={styles.personMeta}>aus: unterschiedlichen Shows</Text> */}
+      <View style={styles.content}>
+        <View style={{ flex: 1 }}>
+          <Text style={styles.personName}>{person.name || "Unbekannt"}</Text>
+          {age != null && <Text style={styles.personMeta}>{age} Jahre</Text>}
+        </View>
+        <Feather name="chevron-right" size={16} color="rgba(255,255,255,0.3)" />
      </View>
-      <FontAwesome name="chevron-right" size={14} color="#888" />
    </TouchableOpacity>
  );
 }

 const styles = StyleSheet.create({
  personRow: {
-    width: "100%",
    flexDirection: "row",
    alignItems: "center",
-    backgroundColor: "#1b1e2b",
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-    marginBottom: 8,
+    backgroundColor: "rgba(255,255,255,0.06)",
+    paddingLeft: 16,
+    minHeight: 56,
+  },
+  firstRow: {
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+  },
+  lastRow: {
+    borderBottomLeftRadius: 10,
+    borderBottomRightRadius: 10,
  },
  avatarCircle: {
-    width: 40,
-    height: 40,
-    borderRadius: 999,
-    backgroundColor: "#2a2f45",
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: "rgba(255,255,255,0.1)",
    alignItems: "center",
    justifyContent: "center",
-    marginRight: 10,
+    marginRight: 12,
+    overflow: "hidden",
+  },
+  avatarImage: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+  content: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingRight: 16,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "rgba(255,255,255,0.08)",
+  },
+  personName: {
+    color: "white",
+    fontSize: 17,
+    fontWeight: "400",
+  },
+  personMeta: {
+    color: "rgba(255,255,255,0.5)",
+    fontSize: 14,
+    marginTop: 1,
  },
-  personName: { color: "white", fontSize: 16, fontWeight: "600" },
-  personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
 });
--- a/components/discovery/TagChip.tsx
+++ b/components/discovery/TagChip.tsx
@@ -1,20 +1,45 @@
-import { FontAwesome } from "@expo/vector-icons";
+import Feather from "@expo/vector-icons/Feather";
 import React from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

-export default function TagChip({ icon, label, onPress }: { icon: any; label: string; onPress: () => void }) {
+export default function TagChip({
+  icon: _icon,
+  label,
+  onPress,
+}: {
+  icon: any;
+  label: string;
+  onPress: () => void;
+}) {
  return (
-    <TouchableOpacity onPress={onPress}>
+    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <View style={styles.tag}>
-        <FontAwesome name={icon} size={16} color="#bbb" style={{ marginRight: 6 }} />
        <Text style={styles.tagLabel}>{label}</Text>
-        <FontAwesome name="times-circle" size={16} color="#bbb" style={{ marginLeft: 6 }} />
+        <Feather
+          name="x"
+          size={14}
+          color="rgba(255,255,255,0.5)"
+          style={{ marginLeft: 4 }}
+        />
      </View>
    </TouchableOpacity>
  );
 }

 const styles = StyleSheet.create({
-  tag: { flexDirection: "row", alignItems: "center", backgroundColor: "#333", borderRadius: 999, paddingHorizontal: 10, paddingVertical: 6, marginRight: 8, marginBottom: 8 },
-  tagLabel: { color: "white" },
+  tag: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(255,255,255,0.12)",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    marginRight: 8,
+    marginBottom: 8,
+  },
+  tagLabel: {
+    color: "white",
+    fontSize: 15,
+    fontWeight: "400",
+  },
 });
--- 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",
  },
 });