final: added personHistory

app/stackStyles/participantStyles.tsx

@@ -7,15 +7,15 @@ const styles = StyleSheet.create({
   },
   closeIcon: {
     position: "absolute",
-    top: Dimensions.get("window").height * 0.07,
+    top: Dimensions.get("window").height * 0.065,
     right: 15,
   },
   participantName: {
     color: "white",
-    fontSize: 24,
+    fontSize: 20,
     fontWeight: "600",
     textAlign: "center",
-    marginTop: Dimensions.get("window").height * 0.075,
+    marginTop: Dimensions.get("window").height * 0.06,
   },
   participantImage: {
     width: "100%",
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
   },
   performedShowsSection: {
     width: "100%",
-    height: Dimensions.get("window").height,
+    height: "100%",
     backgroundColor: "hsl(221, 39%, 0%)",
     marginTop: 20,
   },
@@ -60,14 +60,7 @@ const styles = StyleSheet.create({
     marginTop: 15,
     marginLeft: 15,
   },
-  showContainer: {
-    width: "85%",
-    height: 180,
-    backgroundColor: "hsl(336, 79%, 63%)",
-    borderRadius: 10,
-    alignSelf: "center",
-    marginTop: 15,
-  },
+
   showImage: {
     width: "100%",
     height: "100%",
@@ -94,14 +87,89 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     textAlign: "center",
-    marginTop: 10,
+    marginTop: 15,
   },
   showSeason: {
     color: "hsl(0, 0%, 80%)",
     fontSize: 12,
     fontWeight: "400",
     textAlign: "center",
-    marginTop: 3,
+    marginTop: 5,
+  },
+  showContainer: {
+    width: Dimensions.get("window").width - 75,
+    height: 200,
+    borderRadius: 15,
+    marginTop: 20,
+    alignItems: "center",
+    backgroundColor: "hsl(336, 79%, 63%)",
+  },
+
+  card: {
+    width: Dimensions.get("window").width - 75,
+    alignItems: "center",
+  },
+
+  horizontalLine: {
+    height: 50,
+    width: 2,
+    backgroundColor: "hsl(0, 0%, 70%)",
+    marginTop: 10,
+    alignSelf: "center",
+  },
+  partnerLabel: {
+    color: "hsl(0, 0%, 80%)",
+    fontSize: 12,
+    fontWeight: "400",
+    textAlign: "center",
+    marginTop: 10,
+  },
+  participantContainer: {
+    width: "auto",
+    height: "auto",
+    borderRadius: 15,
+    marginTop: 15,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "hsl(221, 39%, 12%)",
+    padding: 10,
+  },
+
+  participantLabel: {
+    color: "white",
+    fontSize: 12,
+  },
+  participantRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+
+    alignItems: "center",
+    justifyContent: "flex-start",
+  },
+
+  participantChip: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 12,
+    backgroundColor: "hsl(221, 39%, 18%)",
+    maxWidth: 160,
+  },
+  participantChipText: {
+    color: "hsl(0, 0%, 85%)",
+    fontSize: 11,
+  },
+
+  moreChip: {
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 12,
+    backgroundColor: "hsl(221, 39%, 28%)",
+  },
+  moreChipText: {
+    color: "white",
+    fontSize: 11,
+    fontWeight: "600",
   },
 });