style: added new screens and designs

2025-10-06 01:16:10 +02:00
parent badf355a2d
commit 8fb418c6f3
12 changed files with 718 additions and 141 deletions
--- a/app/stackStyles/showDetailStyles.tsx
+++ b/app/stackStyles/showDetailStyles.tsx
@@ -0,0 +1,137 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    backgroundColor: "hsl(221, 39%, 12%)",
+  },
+  showImage: {
+    width: 150,
+    height: 150,
+    alignSelf: "center",
+  },
+  showMainInfoSection: {
+    width: "auto",
+    height: "auto",
+    alignSelf: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    bottom: 25,
+  },
+  showInfoText: {
+    color: "hsl(0, 0%, 80%)",
+    fontSize: 14,
+  },
+  dot: {
+    width: 4,
+    height: 4,
+    borderRadius: 3,
+    backgroundColor: "hsl(0, 0%, 80%)",
+    marginHorizontal: 7,
+    marginTop: 2,
+  },
+  showBannerLogoContainer: {
+    width: "100%",
+    height: 200,
+    alignSelf: "center",
+    borderTopLeftRadius: 80,
+    borderTopRightRadius: 80,
+  },
+  showBannerLogo: {
+    width: "100%",
+    height: "100%",
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+  },
+  infoContainner: {
+    width: "100%",
+    height: "auto",
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    backgroundColor: "hsl(221, 39%, 0%)",
+    flexDirection: "row",
+    gap: 20,
+  },
+  infoLabel: {
+    fontWeight: "300",
+    color: "hsl(0, 0%, 80%)",
+    fontSize: 16,
+  },
+  participantsDetailsContainer: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "hsl(221, 39%, 2%)",
+  },
+  participantContainer: {
+    height: 160,
+    width: 110,
+    backgroundColor: "hsl(336, 79%, 63%)",
+    borderRadius: 10,
+  },
+  participantSection: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 15,
+    paddingLeft: 15,
+    paddingTop: 15,
+  },
+  seasonsSection: {
+    width: "100%",
+    height: 40,
+    backgroundColor: "hsl(221, 39%, 2%)",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 20,
+  },
+  seasonList: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingLeft: 5,
+    paddingRight: 5,
+  },
+  seasonContainer: {
+    width: 35,
+    height: 35,
+    borderRadius: 5,
+    backgroundColor: "hsl(0, 0%, 20%)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  seasonLabel: {
+    color: "white",
+    fontWeight: "bold",
+  },
+  participantLabel: {
+    color: "white",
+    fontWeight: "500",
+    textAlign: "center",
+    fontSize: 11,
+    marginTop: 10,
+  },
+  seasonsLabel: {
+    color: "hsl(0, 0%, 80%)",
+    fontWeight: "500",
+    fontSize: 16,
+  },
+  detailTitle: {
+    color: "hsl(0, 0%, 100%)",
+    fontSize: 14,
+    fontWeight: "bold",
+    marginTop: 10,
+    marginLeft: 20,
+    marginBottom: 5,
+  },
+  detailLabel: {
+    color: "hsl(0, 0%, 80%)",
+    fontSize: 14,
+    lineHeight: 20,
+    width: "90%",
+    fontWeight: "300",
+    marginLeft: 20,
+    marginTop: 5,
+  },
+});
+export default styles;