modified: files to ios26 ui/ux
This commit is contained in:
Yordan Simeonov
@@ -1,22 +1,49 @@
|
||||
import { Dimensions, 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: 20,
|
||||
},
|
||||
closeIcon: {
|
||||
position: "absolute",
|
||||
top: Dimensions.get("window").height * 0.065,
|
||||
right: 15,
|
||||
profileHero: {
|
||||
alignItems: "center",
|
||||
paddingTop: 8,
|
||||
paddingBottom: 20,
|
||||
},
|
||||
profileImageContainer: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 60,
|
||||
overflow: "hidden",
|
||||
borderWidth: 3,
|
||||
borderColor: "rgba(25,158,219,0.4)",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 6 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
profileImage: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
},
|
||||
participantName: {
|
||||
color: Colors.text,
|
||||
fontSize: 20,
|
||||
fontWeight: "600",
|
||||
fontSize: 24,
|
||||
fontWeight: "700",
|
||||
textAlign: "center",
|
||||
marginTop: Dimensions.get("window").height * 0.06,
|
||||
marginTop: 16,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
participantSubtitle: {
|
||||
color: "rgba(255,255,255,0.5)",
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
textAlign: "center",
|
||||
marginTop: 4,
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
participantImage: {
|
||||
width: "100%",
|
||||
@@ -36,36 +63,34 @@ const styles = StyleSheet.create({
|
||||
marginTop: 5,
|
||||
},
|
||||
participantInfo: {
|
||||
color: Colors.textSecondary,
|
||||
fontSize: 16,
|
||||
color: "rgba(255,255,255,0.6)",
|
||||
fontSize: 15,
|
||||
textAlign: "center",
|
||||
},
|
||||
dot: {
|
||||
width: 4,
|
||||
height: 4,
|
||||
borderRadius: 3,
|
||||
backgroundColor: Colors.textSecondary,
|
||||
borderRadius: 2,
|
||||
backgroundColor: "rgba(255,255,255,0.3)",
|
||||
marginHorizontal: 7,
|
||||
marginTop: 2,
|
||||
},
|
||||
performedShowsSection: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: Colors.background,
|
||||
marginTop: 20,
|
||||
backgroundColor: "transparent",
|
||||
paddingBottom: 40,
|
||||
},
|
||||
performedShowsTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
color: Colors.textSecondary,
|
||||
marginTop: 15,
|
||||
marginLeft: 15,
|
||||
fontSize: 18,
|
||||
fontWeight: "700",
|
||||
color: Colors.text,
|
||||
marginTop: 8,
|
||||
marginLeft: 16,
|
||||
marginBottom: 4,
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
|
||||
showImage: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
borderRadius: 10,
|
||||
},
|
||||
showLabel: {
|
||||
color: Colors.text,
|
||||
@@ -85,102 +110,165 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
showTitle: {
|
||||
color: Colors.text,
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
textAlign: "center",
|
||||
marginTop: 15,
|
||||
fontSize: 16,
|
||||
fontWeight: "700",
|
||||
letterSpacing: 0.1,
|
||||
},
|
||||
showSeason: {
|
||||
color: Colors.textSecondary,
|
||||
fontSize: 12,
|
||||
fontWeight: "400",
|
||||
textAlign: "center",
|
||||
marginTop: 5,
|
||||
color: "rgba(255,255,255,0.45)",
|
||||
fontSize: 13,
|
||||
fontWeight: "500",
|
||||
},
|
||||
showContainer: {
|
||||
width: Dimensions.get("window").width - 75,
|
||||
height: 200,
|
||||
borderRadius: 15,
|
||||
marginTop: 20,
|
||||
alignItems: "center",
|
||||
backgroundColor: Colors.primary,
|
||||
width: Dimensions.get("window").width - 64,
|
||||
height: 180,
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
overflow: "hidden",
|
||||
},
|
||||
|
||||
card: {
|
||||
width: Dimensions.get("window").width - 75,
|
||||
alignItems: "center",
|
||||
width: Dimensions.get("window").width - 64,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "rgba(255,255,255,0.06)",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(255,255,255,0.08)",
|
||||
overflow: "hidden",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 10,
|
||||
elevation: 4,
|
||||
},
|
||||
|
||||
horizontalLine: {
|
||||
height: 50,
|
||||
width: 2,
|
||||
backgroundColor: Colors.textSecondary,
|
||||
marginTop: 10,
|
||||
alignSelf: "center",
|
||||
cardInfo: {
|
||||
padding: 16,
|
||||
gap: 4,
|
||||
},
|
||||
partnerLabel: {
|
||||
color: Colors.textSecondary,
|
||||
fontSize: 12,
|
||||
fontWeight: "400",
|
||||
textAlign: "center",
|
||||
marginTop: 10,
|
||||
cardTitleRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
gap: 12,
|
||||
},
|
||||
participantContainer: {
|
||||
width: "auto",
|
||||
minHeight: "auto",
|
||||
borderRadius: 15,
|
||||
marginTop: 15,
|
||||
alignItems: "center",
|
||||
cardSearchButton: {
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 17,
|
||||
backgroundColor: "rgba(25,158,219,0.15)",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(25,158,219,0.25)",
|
||||
justifyContent: "center",
|
||||
backgroundColor: Colors.header,
|
||||
padding: 10,
|
||||
alignItems: "center",
|
||||
marginTop: 2,
|
||||
},
|
||||
|
||||
participantLabel: {
|
||||
color: Colors.text,
|
||||
fontSize: 12,
|
||||
sectionLabel: {
|
||||
color: "rgba(255,255,255,0.45)",
|
||||
fontSize: 11,
|
||||
fontWeight: "600",
|
||||
letterSpacing: 0.4,
|
||||
textTransform: "uppercase",
|
||||
marginBottom: 8,
|
||||
},
|
||||
partnerSection: {
|
||||
marginTop: 14,
|
||||
paddingTop: 14,
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderTopColor: "rgba(255,255,255,0.08)",
|
||||
},
|
||||
partnerRow: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
gap: 8,
|
||||
},
|
||||
partnerChip: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "rgba(231,76,139,0.15)",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(231,76,139,0.3)",
|
||||
},
|
||||
partnerChipText: {
|
||||
color: "rgba(255,255,255,0.9)",
|
||||
fontSize: 13,
|
||||
fontWeight: "600",
|
||||
},
|
||||
participantsSection: {
|
||||
marginTop: 14,
|
||||
paddingTop: 14,
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderTopColor: "rgba(255,255,255,0.08)",
|
||||
},
|
||||
participantRow: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
gap: 6,
|
||||
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
},
|
||||
|
||||
participantChip: {
|
||||
paddingVertical: 4,
|
||||
paddingHorizontal: 8,
|
||||
borderRadius: 12,
|
||||
backgroundColor: "hsl(221, 39%, 18%)",
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 10,
|
||||
borderRadius: 14,
|
||||
backgroundColor: "rgba(255,255,255,0.08)",
|
||||
maxWidth: 160,
|
||||
},
|
||||
participantChipText: {
|
||||
color: "hsl(0, 0%, 85%)",
|
||||
color: "rgba(255,255,255,0.7)",
|
||||
fontSize: 11,
|
||||
fontWeight: "500",
|
||||
},
|
||||
|
||||
moreChip: {
|
||||
paddingVertical: 4,
|
||||
paddingHorizontal: 10,
|
||||
borderRadius: 12,
|
||||
backgroundColor: "hsl(221, 39%, 28%)",
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 16,
|
||||
backgroundColor: "rgba(25,158,219,0.2)",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(25,158,219,0.3)",
|
||||
},
|
||||
moreChipText: {
|
||||
color: Colors.text,
|
||||
color: "#199edb",
|
||||
fontSize: 11,
|
||||
fontWeight: "600",
|
||||
},
|
||||
heroButtons: {
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
marginTop: 16,
|
||||
},
|
||||
searchButton: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 20,
|
||||
backgroundColor: Colors.header,
|
||||
marginLeft: 15,
|
||||
marginTop: 15,
|
||||
marginBottom: 5,
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 18,
|
||||
borderRadius: 22,
|
||||
backgroundColor: "rgba(25,158,219,0.15)",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(25,158,219,0.3)",
|
||||
},
|
||||
searchButtonText: {
|
||||
color: "#199edb",
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
},
|
||||
instagramButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 18,
|
||||
borderRadius: 22,
|
||||
backgroundColor: "rgba(225,48,108,0.12)",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(225,48,108,0.3)",
|
||||
},
|
||||
instagramButtonText: {
|
||||
color: "#E1306C",
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
},
|
||||
loadingContainer: {
|
||||
paddingVertical: 60,
|
||||
alignItems: "center",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user