hipmi-mobile/styles/global-styles.ts

import { TEXT_SIZE_LARGE, TEXT_SIZE_MEDIUM, TEXT_SIZE_SMALL } 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_gray,
    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_gray,
    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,
  },
  bottomBarContainer: {
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
  // =============== BOTTOM BAR =============== //

  // =============== BUTTON =============== //
  buttonCentered50Percent: {
    width: "50%",
    alignSelf: "center",
  },
  // =============== BUTTON =============== //

  // =============== TEXT INPUT =============== //
  // Container utama input (View luar)
  containerAreaInput: {
    marginBottom: 16,
  },

  // Label di atas input
  labelInput: {
    fontSize: TEXT_SIZE_MEDIUM,
    marginBottom: 6,
    fontWeight: "500",
    color: MainColor.white_gray,
  },

  // Tanda bintang merah untuk required
  requiredInput: {
    color: "red",
  },

  // Pesan error di bawah input
  errorMessageInput: {
    marginTop: 4,
    fontSize: TEXT_SIZE_SMALL,
    color: MainColor.red,
  },

  // Input Length
  inputMaxLength: {
    fontSize: TEXT_SIZE_SMALL,
    color: MainColor.white_gray,
  },

  // Wrapper input (View pembungkus TextInput)
  inputContainerInput: {
    flexDirection: "row",
    alignItems: "center",
    borderWidth: 1,
    borderColor: MainColor.white_gray,
    backgroundColor: MainColor.white,
    paddingHorizontal: 10,
    height: 50,
  },

  // Style saat disabled
  disabledInput: {
    backgroundColor: "#f9f9f9",
    borderColor: "#e0e0e0",
  },

  // Input utama (TextInput)
  inputInput: {
    flex: 1,
    fontSize: TEXT_SIZE_MEDIUM,
    paddingVertical: 0,
  },

  // Ikon di kiri/kanan
  iconInput: {
    marginHorizontal: 4,
    justifyContent: "center",
  },

  // Teks ikon jika berupa string
  iconTextInput: {
    fontSize: TEXT_SIZE_LARGE,
    color: "#000",
  },

  // Border merah jika ada error
  errorBorderInput: {
    borderColor: "red",
  },

  // Untuk TextArea tambahan
  textAreaInput: {
    textAlignVertical: "top",
    padding: 5,
    height: undefined, // biar multiline bebas tinggi
  },
});