@questlabs/react-native-sdk/src/components/Challenges/Challenges.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: "#9035FF",
    borderRadius: 12,
    height: "auto",
    position: "relative",
  },
  headerTextStyle: {
    fontSize: 24,
    fontWeight: "600",
    lineHeight: 36,
    color: "#FFF",
    textAlign: "center",
    marginBottom: 40,
  },
  iconContainer: {
    justifyContent: "center",
    alignItems: "center",
  },
  iconBackgroundView: {
    backgroundColor: "#ffffff33",
    padding: 30,
    borderRadius: 192,
  },
  questionBackgroundViewStyle: {
    width: "90%",
    backgroundColor: "#FFF",
    borderTopRightRadius: 12,
    borderTopLeftRadius: 12,
    padding: 20,
    marginTop: -55,
  },
  searchInput: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingVertical: 8,
    borderWidth: 1,
    borderColor: "#E0E0E0",
    borderRadius: 5,
    paddingHorizontal: 16,
    marginBottom: 12,
  },
  questionHeaderTextStyle: {
    fontSize: 18,
    fontWeight: "600",
    lineHeight: 28,
    color: "#0D0D0D",
    marginBottom: 12,
  },
  questionTextStyle: {
    marginTop: 4,
    fontSize: 20,
    fontWeight: "600",
    lineHeight: 30,
    color: "#0D0D0D",
    marginBottom: 20,
    textAlign: "center",
  },
  optionsViewStyle: {
    borderRadius: 64,
    paddingVertical: 12,
    borderWidth: 2,
    width: "100%",
  },
  optionTextStyle: { textAlign: "center" },
  buttonViewStyle: {
    flexDirection: "row",
    alignItems: "center",
    paddingTop: 20,
    gap: 12,
  },
  cancelButtonViewStyle: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
    borderColor: "#EFEFEF",
    borderWidth: 1,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  nextButtonViewStyle: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
    backgroundColor: "#9035FF",
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  footerViewStyle: {
    backgroundColor: "#FBFBFB",
    padding: 12,
    borderBottomLeftRadius: 12,
    borderBottomRightRadius: 12,
  },
  footerTextStyle: {
    color: "#939393",
    fontSize: 10,
    fontWeight: "400",
    lineHeight: 12,
    textAlign: "center",
  },
  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: 20,
    borderRadius: 10,
    backgroundColor: "#9035FF",
    marginTop: 20,
  },
  submitButtonTextStyle: {
    color: "#FFF",
    fontSize: 14,
    textAlign: "center",
    fontWeight: "400",
    lineHeight: 20,
  },
  successCrossViewStyle: { position: "absolute", top: 20, right: 20 },
  successHeaderTextStyle: {
    color: "black",
    fontSize: 24,
    fontWeight: "600",
    textAlign: "center",
  },
  successDescriptionTextStyle: {
    color: "#5E5E5E",
    fontSize: 14,
    fontWeight: "400",
    textAlign: "center",
  },

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

  midContainerViewStyles: {
    padding: 20,
  },
  successModalViewStyle: {
    width: "100%",
    backgroundColor: "#fff",
    borderRadius: 10,
  },
  progressBarTextStyle: {
    fontSize: 12,
    fontWeight: "500",
    lineHeight: 16,
    color: "#9035FF",
    marginTop: 8,
  },
  progressBar: {
    width: "100%",
    height: 6,
    backgroundColor: "#EFEFEF",
    borderRadius: 8,
    overflow: "hidden",
  },
  progressBarInnerStyle: {
    backgroundColor: "#9035FF",
    height: "100%",
    borderRadius: 8,
  },
  listItemView: { paddingVertical: 12 },
  listItemTitle: {
    color: "#2C2C2C",
    fontSize: 20,
    fontWeight: "600",
    lineHeight: 30,
  },
  listItemDescription: {
    color: "#939393",
    fontSize: 12,
    fontWeight: "400",
    lineHeight: 16,
  },
  imageView: {
    backgroundColor: "#F4EBFF",
    borderRadius: 48,
    padding: 12,
    marginRight: 10,
  },
  itemTitle: {
    fontSize: 16,
    fontWeight: "600",
    lineHeight: 24,
    color: "#2C2C2C",
  },
});