@questlabs/react-native-sdk/src/components/Onboarding/Onboaring.style.ts

Quest react native sdk

import { StyleSheet } from "react-native";
import { Dimensions } from "react-native";
const windowwidth = Dimensions.get("screen").width;
export const styles = StyleSheet.create({
  loadingMainView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  inputMainView: {
    flexDirection: "row",
    alignItems: "center",
    borderColor: "#ECECEC",
    paddingHorizontal: 16,
    // paddingVertical: 10,
    borderRadius: 10,
    marginTop: 4,
    borderWidth: 1,
  },
  inputHeaderText: {
    color: "#4C4C4C",
    fontSize: 12,
    fontStyle: "normal",
    fontWeight: "500",
    lineHeight: 16,
  },
  textInputInnerView: {
    // alignItems: "center",
    flex: 1,
    paddingVertical: 10,
    fontSize: 14,
    fontStyle: "normal",
    fontWeight: "400",
    lineHeight: 20,
    color: "black",
  },
  textAreaInnerView: {
    alignItems: "center",
    flex: 1,
    fontSize: 14,
    fontStyle: "normal",
    fontWeight: "400",
    lineHeight: 20,
  },
  crossIconView: { position: "absolute", right: 10 },
  mainView: {
    backgroundColor: "white",
    borderRadius: 12,
    width: "100%",
    maxHeight: "90%",
  },
  headerModleView: {
    flexDirection: "row",
    // borderWidth:1,
    paddingTop: 20,
    paddingHorizontal: 20,
  },
  onboardingHeaderView: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
    paddingVertical: 20,
    paddingHorizontal: 20,
    gap: 12,
    alignSelf: "stretch",
    borderBottomColor: "#EFEFEF",
    borderBottomWidth: 1,
  },
  onboardingHeaderText: {
    fontSize: 20,
    color: "#2C2C2C",
    fontWeight: "600",
    lineHeight: 30,
  },
  stepTextView: {
    color: "#B9B9B9",
    fontSize: 10,
    fontStyle: "normal",
    fontWeight: "600",
    lineHeight: 12,
    letterSpacing: -0.1,
    marginTop: 20,
    marginBottom: -4,
  },
  onboardingDescriptionText: {
    color: "#B9B9B9",
    fontSize: 12,
    fontStyle: "normal",
    fontWeight: "400",
    lineHeight: 16,
    marginTop: 4,
  },
  lineStyle: { borderWidth: 0.5, width: "100%" },
  headerModleInnerView: { paddingHorizontal: 10 },
  modleView: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 8,
  },
  sectionText: {
    fontSize: 14,
    fontWeight: "500",
    marginRight: 5,
    lineHeight: 16,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "600",
    color: "#252525",
    lineHeight: 24,
  },
  description: {
    color: "#B9B9B9",
    fontSize: 12,
    fontWeight: "400",
    lineHeight: 16,
    paddingTop: 4,
  },

  previousButtonViewStyle: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    flex: 1,
    borderWidth: 1.5,
    borderColor: "#EFEFEF",
    borderRadius: 10,
    // marginVertical: 20,
  },
  nextButtonViewStyle: {
    flex: 1,
    paddingHorizontal: 20,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",

    borderRadius: 10,
    marginVertical: 20,
    alignContent: "center",
  },
  getStartButtonViewStyle: {
    flex: 1,
    paddingHorizontal: 20,
    paddingVertical: 10,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",

    borderRadius: 10,
    marginVertical: 20,
    alignContent: "center",
  },
  buttonMainView: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    marginTop: 20,
    paddingBottom: 40,
  },
  footerView: {
    display: "flex",
    paddingVertical: 10,
    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",
  },
});