170 lines
3.5 KiB
TypeScript
170 lines
3.5 KiB
TypeScript
import { StyleSheet } from "react-native";
|
|
|
|
export default StyleSheet.create({
|
|
mainContainer: {
|
|
flex: 1,
|
|
backgroundColor: "hsl(221, 39%, 11%)",
|
|
// paddingHorizontal: 10,
|
|
},
|
|
header: {
|
|
height: 125,
|
|
backgroundColor: "hsl(221, 39%, 12%)",
|
|
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,
|
|
},
|
|
title: {
|
|
color: "white",
|
|
fontSize: 38,
|
|
fontWeight: "bold",
|
|
marginTop: "auto",
|
|
marginBottom: 15,
|
|
},
|
|
liveBadgeContainer: {
|
|
position: "absolute",
|
|
top: 15,
|
|
left: 20,
|
|
backgroundColor: "red",
|
|
borderRadius: 10,
|
|
paddingVertical: 5,
|
|
paddingHorizontal: 10,
|
|
},
|
|
filterSection: {
|
|
width: "100%",
|
|
height: 70,
|
|
marginTop: 20,
|
|
},
|
|
searchContainer: {
|
|
width: "100%",
|
|
height: 60,
|
|
marginHorizontal: "auto",
|
|
backgroundColor: "hsl(221, 39%, 8%)",
|
|
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,
|
|
},
|
|
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: "hsl(221, 39%, 8%)",
|
|
borderWidth: 1.5,
|
|
borderColor: "hsl(221, 39%, 15%)",
|
|
marginHorizontal: "auto",
|
|
alignSelf: "center",
|
|
marginTop: 15,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 5,
|
|
// opacity: 0.9,
|
|
},
|
|
suggestionTitle: {
|
|
color: "hsl(0, 0%, 60%)",
|
|
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: "hsl(0, 0%, 90%)",
|
|
},
|
|
suggestionLabel: {
|
|
color: "white",
|
|
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: "white",
|
|
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: "white", fontSize: 16, fontWeight: "600" },
|
|
personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
|
|
});
|