update: gemini fixes

app/stackStyles/participantStyles.tsx

@@ -1,9 +1,10 @@
 import { Dimensions, StyleSheet } from "react-native";
+import { Colors } from "@/constants/colors";
 
 const styles = StyleSheet.create({
   mainContainer: {
     flex: 1,
-    backgroundColor: "hsl(221, 39%, 12%)",
+    backgroundColor: Colors.header,
   },
   closeIcon: {
     position: "absolute",
@@ -11,7 +12,7 @@ const styles = StyleSheet.create({
     right: 15,
   },
   participantName: {
-    color: "white",
+    color: Colors.text,
     fontSize: 20,
     fontWeight: "600",
     textAlign: "center",
@@ -27,7 +28,7 @@ const styles = StyleSheet.create({
   },
   participantInfoSection: {
     width: "100%",
-    height: "auto",
+    minHeight: "auto",
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
@@ -35,7 +36,7 @@ const styles = StyleSheet.create({
     marginTop: 5,
   },
   participantInfo: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 16,
     textAlign: "center",
   },
@@ -43,20 +44,20 @@ const styles = StyleSheet.create({
     width: 4,
     height: 4,
     borderRadius: 3,
-    backgroundColor: "hsl(0, 0%, 80%)",
+    backgroundColor: Colors.textSecondary,
     marginHorizontal: 7,
     marginTop: 2,
   },
   performedShowsSection: {
     width: "100%",
     height: "100%",
-    backgroundColor: 'hsl(221, 39%, 16%)',
+    backgroundColor: Colors.background,
     marginTop: 20,
   },
   performedShowsTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     marginTop: 15,
     marginLeft: 15,
   },
@@ -67,7 +68,7 @@ const styles = StyleSheet.create({
     borderRadius: 10,
   },
   showLabel: {
-    color: "white",
+    color: Colors.text,
     fontSize: 14,
     fontWeight: "600",
     textAlign: "center",
@@ -83,14 +84,14 @@ const styles = StyleSheet.create({
     backgroundColor: "#eee",
   },
   showTitle: {
-    color: "white",
+    color: Colors.text,
     fontSize: 12,
     fontWeight: "600",
     textAlign: "center",
     marginTop: 15,
   },
   showSeason: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 12,
     fontWeight: "400",
     textAlign: "center",
@@ -102,7 +103,7 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     marginTop: 20,
     alignItems: "center",
-    backgroundColor: "hsl(336, 79%, 63%)",
+    backgroundColor: Colors.primary,
   },
 
   card: {
@@ -113,12 +114,12 @@ const styles = StyleSheet.create({
   horizontalLine: {
     height: 50,
     width: 2,
-    backgroundColor: "hsl(0, 0%, 70%)",
+    backgroundColor: Colors.textSecondary,
     marginTop: 10,
     alignSelf: "center",
   },
   partnerLabel: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 12,
     fontWeight: "400",
     textAlign: "center",
@@ -126,17 +127,17 @@ const styles = StyleSheet.create({
   },
   participantContainer: {
     width: "auto",
-    height: "auto",
+    minHeight: "auto",
     borderRadius: 15,
     marginTop: 15,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "hsl(221, 39%, 12%)",
+    backgroundColor: Colors.header,
     padding: 10,
   },
 
   participantLabel: {
-    color: "white",
+    color: Colors.text,
     fontSize: 12,
   },
   participantRow: {
@@ -167,7 +168,7 @@ const styles = StyleSheet.create({
     backgroundColor: "hsl(221, 39%, 28%)",
   },
   moreChipText: {
-    color: "white",
+    color: Colors.text,
     fontSize: 11,
     fontWeight: "600",
   },
@@ -175,7 +176,7 @@ const styles = StyleSheet.create({
     width: 50,
     height: 50,
     borderRadius: 20,
-    backgroundColor: "hsl(221, 39%, 12%)",
+    backgroundColor: Colors.header,
     marginLeft: 15,
     marginTop: 15,
     marginBottom: 5,