185 lines
3.7 KiB
TypeScript
185 lines
3.7 KiB
TypeScript
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: Colors.background,
|
|
paddingHorizontal: 15,
|
|
},
|
|
header: {
|
|
minHeight: 125,
|
|
backgroundColor: Colors.header,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderBottomWidth: 1,
|
|
borderRadius: 25,
|
|
marginBottom: 15,
|
|
borderBottomColor: Colors.border,
|
|
...shadow,
|
|
},
|
|
title: {
|
|
color: Colors.text,
|
|
fontSize: 38,
|
|
fontWeight: "bold",
|
|
marginTop: "auto",
|
|
marginBottom: 15,
|
|
},
|
|
liveBadgeContainer: {
|
|
position: "absolute",
|
|
top: 15,
|
|
left: 20,
|
|
backgroundColor: Colors.red,
|
|
borderRadius: 10,
|
|
paddingVertical: 5,
|
|
paddingHorizontal: 10,
|
|
},
|
|
filterSection: {
|
|
width: "100%",
|
|
minHeight: 70,
|
|
marginTop: 20,
|
|
},
|
|
searchContainer: {
|
|
width: "100%",
|
|
height: 60,
|
|
marginHorizontal: "auto",
|
|
backgroundColor: Colors.card,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
borderRadius: 20,
|
|
paddingHorizontal: 20,
|
|
marginTop: 15,
|
|
borderWidth: 1.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%)",
|
|
fontSize: 18,
|
|
fontWeight: "500",
|
|
},
|
|
suggestionsSection: {
|
|
position: "absolute",
|
|
zIndex: 10,
|
|
top: 70,
|
|
width: "100%",
|
|
height: "auto",
|
|
paddingBottom: 15,
|
|
borderRadius: 20,
|
|
backgroundColor: Colors.card,
|
|
borderWidth: 1.5,
|
|
borderColor: Colors.border,
|
|
marginHorizontal: "auto",
|
|
alignSelf: "center",
|
|
marginTop: 15,
|
|
...shadow,
|
|
},
|
|
suggestionTitle: {
|
|
color: Colors.textSecondary,
|
|
fontSize: 14,
|
|
marginLeft: 15,
|
|
marginTop: 15,
|
|
fontWeight: "500",
|
|
},
|
|
suggestionContainer: {
|
|
marginTop: 15,
|
|
width: "100%",
|
|
height: 30,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
paddingHorizontal: 10,
|
|
},
|
|
imageContainer: {
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: 10,
|
|
borderWidth: 1.5,
|
|
borderColor: Colors.text,
|
|
},
|
|
suggestionLabel: {
|
|
color: Colors.text,
|
|
fontSize: 12,
|
|
fontWeight: "500",
|
|
marginLeft: 10,
|
|
},
|
|
tag: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: "#333",
|
|
borderRadius: 999,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 6,
|
|
marginRight: 8,
|
|
marginBottom: 8,
|
|
marginTop: 5,
|
|
},
|
|
tagLabel: {
|
|
color: Colors.text,
|
|
marginRight: 5,
|
|
},
|
|
tagContainer: {
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
marginTop: 10,
|
|
},
|
|
personRow: {
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: "#1b1e2b",
|
|
borderRadius: 10,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 10,
|
|
marginBottom: 8,
|
|
},
|
|
avatarCircle: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 999,
|
|
backgroundColor: "#2a2f45",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginRight: 10,
|
|
},
|
|
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,
|
|
},
|
|
});
|