@questlabs/react-native-sdk/src/components/Gamified/Gamified.styles.ts

Quest react native sdk

import { Dimensions, StyleSheet } from "react-native";
const screenWidth = Dimensions.get("window").width;
export const styles = StyleSheet.create({
  loadingMainView: { flex: 1, justifyContent: "center", alignItems: "center" },
  mainModalContainer: {
    flex: 1,
    borderRadius: 12,
    marginHorizontal: 20,
    justifyContent: "center",
  },
  mainViewStyle: {
    backgroundColor: "#FFF",
    borderRadius: 12,
    height: "auto",
    position: "relative",
  },
  headerTextStyle: {
    fontSize: 24,
    fontWeight: "600",
    lineHeight: 36,
    color: "#FFF",
    textAlign: "center",
    marginBottom: 80,
  },
  iconContainer: {
    justifyContent: "center",
    alignItems: "center",
  },
  iconBackgroundView: {
    backgroundColor: "#ffffff33",
    padding: 30,
    borderRadius: 192,
  },
  questionBackgroundViewStyle: {
    width: "90%",
    maxHeight: 350,
    backgroundColor: "#FFF",
    borderRadius: 12,
    padding: 20,
    marginTop: -65,
    shadowColor: "#575757", // Shadow color
    shadowOffset: { width: 0, height: 4 }, // Offset matches the 0px 4px in CSS
    shadowOpacity: 0.08, // Opacity matches the rgba(87, 87, 87, 0.08)
    shadowRadius: 10, // Adjusted to approximate the blur radius (20px in CSS)
    // Android Shadow
    elevation: 5,

    // position: "absolute",
    // top: 300,
    // left: 16,
    // right: 15,
  },
  questionHeaderTextStyle: {
    fontSize: 16,
    fontWeight: "500",
    lineHeight: 24,
    color: "#B9B9B9",
    textAlign: "center",
  },
  questionTextStyle: {
    marginTop: 4,
    fontSize: 20,
    fontWeight: "600",
    lineHeight: 30,
    color: "#0D0D0D",
    marginBottom: 20,
    textAlign: "center",
  },
  optionsViewStyle: {
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
    paddingHorizontal: 16,
    borderRadius: 64,
    paddingVertical: 12,
    borderWidth: 2,
    width: "100%",
  },
  optionTextStyle: { textAlign: "center" },
  inputViewStyle: {
    flexDirection: "row",
    alignItems: "center",
    borderColor: "#ECECEC",
    borderWidth: 1,
    padding: 10,
    borderRadius: 10,
    marginTop: 7,
  },
  textInputInnerStyle: {
    flex: 1,
    marginHorizontal: 10,
    alignItems: "center",
  },
  buttonViewStyle: {
    flexDirection: "row",
    alignItems: "center",
    paddingTop: 20,
    gap: 12,
    justifyContent: "flex-end",
  },
  cancelButtonViewStyle: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
    borderColor: "#EFEFEF",
    borderWidth: 1,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  nextButtonViewStyle: {
    paddingHorizontal: 20,
    borderRadius: 10,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  footerView: {
    display: "flex",
    paddingVertical: 12,
    paddingHorizontal: 20,
    justifyContent: "center",
    gap: 8,
    alignSelf: "stretch",
    backgroundColor: "#FBFBFB",
    borderBottomStartRadius: 12,
    borderBottomEndRadius: 12,
  },
  footerInnerView: {
    display: "flex",
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
  },
  footerText: {
    fontSize: 12,
    fontStyle: "normal",
    fontWeight: "400",
    lineHeight: 16,
    color: "#B9B9B9",
  },
  modalOutterViewStyle: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(255, 255, 255, 0.5)",
    padding: 20,
  },
  successFooterViewStyle: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderTopWidth: 1,
    borderColor: "#EFEFEF",
  },
  successFooterTextStyle: {
    fontSize: 12,
    fontStyle: "normal",
    fontWeight: "400",
    lineHeight: 16,
    color: "#B9B9B9",
    textAlign: "center",
  },
  submitButtonViewStyle: {
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 10,
    backgroundColor: "#EFEFEF",
    marginTop: 20,
    borderColor: "#EFEFEF",
  },
  submitButtonTextStyle: {
    color: "#2C2C2C",
    fontSize: 14,
    textAlign: "center",
    fontWeight: "500",
    lineHeight: 20,
  },
  successCrossViewStyle: { position: "absolute", top: 20, right: 20 },
  successHeaderTextStyle: {
    color: "#2C2C2C",
    fontSize: 20,
    fontWeight: "600",
    lineHeight: 30,
    textAlign: "center",
  },
  successDescriptionTextStyle: {
    color: "#939393",
    fontSize: 12,
    fontWeight: "400",
    lineHeight: 16,
    textAlign: "center",
  },

  ImageViewStyle: {
    alignItems: "center",
  },
  ImageTextstyle: {
    maxHeight: 254,
    maxWidth: 264,
    height: screenWidth * 0.65,
    width: screenWidth * 0.68,
  },

  midContainerViewStyles: {
    paddingTop: 28,
    paddingHorizontal: 20,
    paddingBottom: 20,
  },
  successModalViewStyle: {
    width: "100%",
    backgroundColor: "#fff",
    borderRadius: 10,
  },
});