modified: files to ios26 ui/ux

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",
   },
 });