165 lines
3.4 KiB
TypeScript
165 lines
3.4 KiB
TypeScript
import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
|
|
import { Dimensions, StyleSheet } from "react-native";
|
|
import { AccentColor, MainColor } from "../constants/color-palet";
|
|
|
|
const { width } = Dimensions.get("window");
|
|
|
|
export const GStyles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
paddingInline: 20,
|
|
paddingBlock: 10,
|
|
backgroundColor: MainColor.darkblue,
|
|
},
|
|
containerWithBackground: {
|
|
flex: 1,
|
|
paddingInline: 20,
|
|
paddingBlock: 10,
|
|
},
|
|
imageBackground: {
|
|
height: "100%",
|
|
width: "100%",
|
|
},
|
|
|
|
// AUTHENTICATION
|
|
authContainer: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
},
|
|
authContainerTitle: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
authTitle: {
|
|
fontSize: 27,
|
|
color: MainColor.yellow,
|
|
fontWeight: "bold",
|
|
},
|
|
authSubTitle: {
|
|
fontSize: 22,
|
|
color: MainColor.yellow,
|
|
fontWeight: "bold",
|
|
},
|
|
|
|
// TEXT & LABEL
|
|
textLabel: {
|
|
fontSize: TEXT_SIZE_MEDIUM,
|
|
color: MainColor.white,
|
|
fontWeight: "normal",
|
|
},
|
|
|
|
// Stack Header Style
|
|
headerStyle: {
|
|
backgroundColor: AccentColor.darkblue,
|
|
},
|
|
headerTitleStyle: {
|
|
color: MainColor.yellow,
|
|
fontWeight: "bold",
|
|
},
|
|
|
|
// HOME
|
|
homeContainer: {
|
|
flex: 1,
|
|
paddingInline: 25,
|
|
paddingBlock: 10,
|
|
backgroundColor: MainColor.darkblue,
|
|
},
|
|
|
|
// =============== TAB =============== //
|
|
tabBar: {
|
|
backgroundColor: MainColor.darkblue,
|
|
borderTopColor: AccentColor.blue,
|
|
borderTopWidth: 1,
|
|
// borderTopEndRadius: 10,
|
|
// borderTopStartRadius: 10,
|
|
// tintColor: MainColor.yellow
|
|
// paddingBottom: 20,
|
|
// paddingTop: 10,
|
|
// shadowColor: AccentColor.blue,
|
|
// shadowOffset: {
|
|
// width: 0,
|
|
// height: -2,
|
|
// },
|
|
// shadowOpacity: 0.9,
|
|
// shadowRadius: 3,
|
|
// elevation: 5,
|
|
},
|
|
tabContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
alignItems: "center",
|
|
paddingHorizontal: 0,
|
|
},
|
|
tabItem: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 12,
|
|
minWidth: width / 5,
|
|
position: "relative",
|
|
},
|
|
activeTab: {
|
|
transform: [{ scale: 1.05 }],
|
|
},
|
|
iconContainer: {
|
|
padding: 8,
|
|
borderRadius: 20,
|
|
// marginBottom: 4,
|
|
},
|
|
activeIconContainer: {
|
|
// backgroundColor: "#007AFF",
|
|
// shadowColor: "#007AFF",
|
|
// shadowOffset: {
|
|
// width: 0,
|
|
// height: 2,
|
|
// },
|
|
// shadowOpacity: 0.3,
|
|
// shadowRadius: 4,
|
|
// elevation: 4,
|
|
},
|
|
tabLabel: {
|
|
fontSize: 10,
|
|
color: "#666",
|
|
fontWeight: "500",
|
|
},
|
|
activeTabLabel: {
|
|
color: MainColor.white,
|
|
fontWeight: "600",
|
|
},
|
|
activeIndicator: {
|
|
position: "absolute",
|
|
bottom: -2,
|
|
width: 4,
|
|
height: 4,
|
|
borderRadius: 2,
|
|
backgroundColor: "#007AFF",
|
|
},
|
|
// =============== TAB =============== //
|
|
|
|
// =============== BOTTOM BAR =============== //
|
|
bottomBar: {
|
|
backgroundColor: MainColor.darkblue,
|
|
borderTopColor: AccentColor.blue,
|
|
borderTopWidth: 1,
|
|
// shadowColor: AccentColor.blue,
|
|
// shadowOffset: {
|
|
// width: 0,
|
|
// height: -1,
|
|
// },
|
|
// shadowOpacity: 0.9,
|
|
// shadowRadius: 5,
|
|
// elevation: 5,
|
|
},
|
|
bottomBarContainer: {
|
|
paddingHorizontal: 15,
|
|
paddingVertical: 10,
|
|
},
|
|
// =============== BOTTOM BAR =============== //
|
|
|
|
// =============== BUTTON =============== //
|
|
buttonCentered50Percent: {
|
|
width: "50%",
|
|
alignSelf: "center",
|
|
},
|
|
});
|