modified: files to ios26 ui/ux

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

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