modified: files to ios26 ui/ux

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