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

Quest react native sdk

import { StyleSheet, Dimensions } from "react-native";
const windowWidth = Dimensions.get("window").width;
export const styles = StyleSheet.create({
  MainContainer: {
    width: "100%",
    borderRadius: 12,
    backgroundColor: "#FFF",
  },
  headingText: {
    fontSize: 24,
    fontWeight: "600",
    lineHeight: 32,
    color: "#FFF",
    textAlign: "center",
  },
  detailText: {
    fontSize: 12,
    fontWeight: "400",
    lineHeight: 16,
    color: "#FFF",
    textAlign: "center",
  },
  middalView: {
    backgroundColor: "white",
    paddingHorizontal: 20,
    gap: 20,
    borderRadius: 12,
    paddingVertical: 20,
    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: 3,
  },
  mainViewStyle: {
    paddingHorizontal: 20,
    paddingBottom: 40,
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
  },

  headerTextStyle: {
    color: "#2C2C2C",
    textAlign: "center",
    fontSize: 20,
    fontWeight: "600",
    lineHeight: 30,
  },
  descriptionTextStyle: {
    fontWeight: "400",
    fontSize: 12,
    textAlign: "center",
    color: "#939393",
    marginTop: 8,
    lineHeight: 16,
  },
  labelTextView: {
    fontWeight: "500",
    fontSize: 12,
    color: "#4C4C4C",
    lineHeight: 16,
  },
  codeViewStyle: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 4,
    borderRadius: 10,
    borderWidth: 1,
    paddingVertical: 10,
    paddingHorizontal: 12,
    borderColor: "#ECECEC",
    gap: 8,
    height: 43,
  },
  codeTextStyle: {
    fontSize: 14,
    color: "#939393",
    flex: 1,
    fontWeight: "400",
    lineHeight: 20,
  },
  inviteButtonViewStyle: {
    backgroundColor: "#0065FF",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 10,
    paddingHorizontal: 16,
  },
  buttonTextStyle: {
    color: "#FFF",
    fontSize: 14,
    fontWeight: "600",
    height: 20,
    lineHeight: 20,
  },
  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",
  },
});