modified: files to ios26 ui/ux

app/stackStyles/showDetailStyles.tsx

@@ -1,10 +1,20 @@
-import { StyleSheet } from "react-native";
 import { Colors } from "@/constants/colors";
+import { Dimensions, StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
   mainContainer: {
     flex: 1,
-    backgroundColor: Colors.header,
+    backgroundColor: Colors.background,
+    paddingTop: Dimensions.get("screen").height * 0.1,
+  },
+  logoContainer: {
+    alignItems: "center",
+    paddingTop: 8,
+    paddingBottom: 4,
+  },
+  showLogo: {
+    width: 100,
+    height: 80,
   },
   showImage: {
     width: 200,
@@ -14,136 +24,168 @@ const styles = StyleSheet.create({
     bottom: 10,
   },
   showMainInfoSection: {
-    width: "auto",
-    height: "auto",
     alignSelf: "center",
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
-    bottom: 25,
+    gap: 8,
+    marginBottom: 8,
   },
   showInfoText: {
-    color: Colors.textSecondary,
-    fontSize: 14,
+    color: "rgba(255,255,255,0.7)",
+    fontSize: 13,
+    fontWeight: "500",
   },
   dot: {
     width: 4,
     height: 4,
-    borderRadius: 3,
-    backgroundColor: Colors.textSecondary,
-    marginHorizontal: 7,
-    marginTop: 2,
+    borderRadius: 2,
+    backgroundColor: "rgba(255,255,255,0.3)",
+    marginHorizontal: 6,
   },
   showBannerLogoContainer: {
     width: "100%",
-    height: 200,
+    height: 220,
     alignSelf: "center",
-    borderTopLeftRadius: 80,
-    borderTopRightRadius: 80,
-    marginTop: 15,
+    marginTop: 8,
   },
   showBannerLogo: {
     width: "100%",
     height: "100%",
-    borderTopLeftRadius: 30,
-    borderTopRightRadius: 30,
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28,
   },
   infoContainner: {
     width: "100%",
     minHeight: "auto",
     paddingHorizontal: 20,
-    paddingVertical: 15,
-    backgroundColor: Colors.background,
+    paddingVertical: 14,
+    backgroundColor: "transparent",
     flexDirection: "row",
-    gap: 20,
+    gap: 6,
   },
   infoLabel: {
-    fontWeight: "300",
-    color: Colors.textSecondary,
-    fontSize: 16,
+    fontWeight: "500",
+    color: "rgba(255,255,255,0.5)",
+    fontSize: 15,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    overflow: "hidden",
+    letterSpacing: 0.3,
   },
   participantsDetailsContainer: {
     width: "100%",
-    height: "100%",
-    backgroundColor: Colors.card,
+    minHeight: 200,
+    backgroundColor: "transparent",
+  },
+  participantWrapper: {
+    width: (Dimensions.get("window").width - 32 - 24) / 3,
+    alignItems: "center",
+    marginBottom: 16,
   },
   participantContainer: {
-    height: 160,
-    width: 110,
-    backgroundColor: Colors.primary,
-    borderRadius: 10,
-    marginBottom: 30,
+    width: "100%",
+    aspectRatio: 0.72,
+    borderRadius: 16,
+    overflow: "hidden",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 4,
   },
   participantSection: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 15,
-    paddingLeft: 15,
-    paddingTop: 15,
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingTop: 12,
   },
   seasonsSection: {
     width: "100%",
-    minHeight: 40,
-    backgroundColor: Colors.card,
+    minHeight: 50,
+    backgroundColor: "transparent",
     flexDirection: "row",
     alignItems: "center",
-    gap: 10,
+    gap: 12,
     paddingHorizontal: 20,
+    paddingVertical: 8,
   },
   seasonList: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10,
-    paddingLeft: 5,
-    paddingRight: 5,
+    gap: 8,
+    paddingLeft: 4,
+    paddingRight: 8,
   },
   seasonContainer: {
-    width: 35,
-    height: 35,
-    borderRadius: 5,
-    backgroundColor: "hsl(0, 0%, 20%)",
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "rgba(255,255,255,0.08)",
     justifyContent: "center",
     alignItems: "center",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(255,255,255,0.06)",
   },
   seasonLabel: {
     color: Colors.text,
-    fontWeight: "bold",
+    fontWeight: "700",
+    fontSize: 14,
   },
   participantLabel: {
     color: Colors.text,
-    fontWeight: "500",
+    fontWeight: "600",
     textAlign: "center",
-    fontSize: 11,
-    marginTop: 10,
+    fontSize: 12,
+    marginTop: 6,
+    letterSpacing: 0.1,
+    width: "100%",
   },
   seasonsLabel: {
-    color: Colors.textSecondary,
-    fontWeight: "500",
-    fontSize: 16,
+    color: "rgba(255,255,255,0.6)",
+    fontWeight: "600",
+    fontSize: 15,
+    letterSpacing: 0.2,
   },
   detailTitle: {
-    color: Colors.text,
-    fontSize: 14,
-    fontWeight: "bold",
+    color: "rgba(255,255,255,0.95)",
+    fontSize: 15,
+    fontWeight: "700",
     marginTop: 10,
     marginLeft: 20,
     marginBottom: 5,
+    letterSpacing: 0.2,
   },
   detailLabel: {
-    color: Colors.textSecondary,
+    color: "rgba(255,255,255,0.6)",
     fontSize: 14,
-    lineHeight: 20,
+    lineHeight: 22,
     width: "90%",
-    fontWeight: "300",
+    fontWeight: "400",
     marginLeft: 20,
     marginTop: 5,
   },
   startDate: {
-    color: Colors.textSecondary,
-    fontSize: 16,
+    color: "rgba(255,255,255,0.5)",
+    fontSize: 14,
     textAlign: "center",
-    marginTop: 15,
-    fontStyle: "italic",
+    marginTop: 14,
+    fontWeight: "500",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  sectionLoading: {
+    width: "100%",
+    paddingVertical: 40,
+    justifyContent: "center",
+    alignItems: "center",
   },
 });
 export default styles;