update: gemini fixes

app/tabStyles/indexStyles.tsx

@@ -1,29 +1,36 @@
+import { Colors } from "@/constants/colors";
 import { StyleSheet } from "react-native";
 
+const shadow = {
+  shadowColor: "#000",
+  shadowOffset: {
+    width: 0,
+    height: 2,
+  },
+  shadowOpacity: 0.25,
+  shadowRadius: 3.84,
+  elevation: 5,
+};
+
 export default StyleSheet.create({
   mainContainer: {
     flex: 1,
-    backgroundColor: "hsl(221, 39%, 11%)",
-    // paddingHorizontal: 10,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 15,
   },
   header: {
-    height: 125,
-    backgroundColor: "hsl(221, 39%, 12%)",
+    minHeight: 125,
+    backgroundColor: Colors.header,
     alignItems: "center",
     justifyContent: "center",
     borderBottomWidth: 1,
-    borderBottomColor: "hsl(221, 39%, 15%)",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 3,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
+    borderRadius: 25,
+    marginBottom: 15,
+    borderBottomColor: Colors.border,
+    ...shadow,
   },
   title: {
-    color: "white",
+    color: Colors.text,
     fontSize: 38,
     fontWeight: "bold",
     marginTop: "auto",
@@ -33,38 +40,37 @@ export default StyleSheet.create({
     position: "absolute",
     top: 15,
     left: 20,
-    backgroundColor: "red",
+    backgroundColor: Colors.red,
     borderRadius: 10,
     paddingVertical: 5,
     paddingHorizontal: 10,
   },
   filterSection: {
     width: "100%",
-    height: 70,
+    minHeight: 70,
     marginTop: 20,
   },
   searchContainer: {
     width: "100%",
     height: 60,
     marginHorizontal: "auto",
-    backgroundColor: "hsl(221, 39%, 8%)",
+    backgroundColor: Colors.card,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     borderRadius: 20,
     paddingHorizontal: 20,
-
     marginTop: 15,
     borderWidth: 1.5,
-    borderColor: "hsl(221, 39%, 15%)",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
+    borderColor: Colors.border,
+    ...shadow,
+  },
+  searchInput: {
+    fontSize: 18,
+    fontWeight: "500",
+    color: "hsl(221, 39%, 80%)",
+    width: "90%",
+    height: "100%",
   },
   searchLabel: {
     color: "hsl(221, 39%, 80%)",
@@ -79,24 +85,16 @@ export default StyleSheet.create({
     height: "auto",
     paddingBottom: 15,
     borderRadius: 20,
-    backgroundColor: "hsl(221, 39%, 8%)",
+    backgroundColor: Colors.card,
     borderWidth: 1.5,
-    borderColor: "hsl(221, 39%, 15%)",
+    borderColor: Colors.border,
     marginHorizontal: "auto",
     alignSelf: "center",
     marginTop: 15,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-    // opacity: 0.9,
+    ...shadow,
   },
   suggestionTitle: {
-    color: "hsl(0, 0%, 60%)",
+    color: Colors.textSecondary,
     fontSize: 14,
     marginLeft: 15,
     marginTop: 15,
@@ -116,10 +114,10 @@ export default StyleSheet.create({
     height: 20,
     borderRadius: 10,
     borderWidth: 1.5,
-    borderColor: "hsl(0, 0%, 90%)",
+    borderColor: Colors.text,
   },
   suggestionLabel: {
-    color: "white",
+    color: Colors.text,
     fontSize: 12,
     fontWeight: "500",
     marginLeft: 10,
@@ -136,7 +134,7 @@ export default StyleSheet.create({
     marginTop: 5,
   },
   tagLabel: {
-    color: "white",
+    color: Colors.text,
     marginRight: 5,
   },
   tagContainer: {
@@ -164,6 +162,23 @@ export default StyleSheet.create({
     justifyContent: "center",
     marginRight: 10,
   },
-  personName: { color: "white", fontSize: 16, fontWeight: "600" },
+  personName: { color: Colors.text, fontSize: 16, fontWeight: "600" },
   personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
+  sectionContainer: {
+    width: "100%",
+    paddingHorizontal: 10,
+    marginBottom: 12,
+  },
+  sectionTitle: {
+    color: Colors.text,
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 6,
+  },
+  centerText: {
+    color: Colors.text,
+    fontSize: 16,
+    textAlign: "center",
+    marginTop: 14,
+  },
 });