@propel-nsl/propel-react-native-sdk 1.0.0

package/src/screens/ProductDetails/styles.ts

@@ -0,0 +1,372 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { SCALE, VSCALE } from '../../../src-app/constants/Scaling';
+import { colors } from '../../../src-app/styles/colors';
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.white,
+  },
+  header: {
+    backgroundColor: colors.white,
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
+  statusBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  timeText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.black,
+    textAlign: 'center',
+    width: 95,
+  },
+  statusIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    width: 77,
+    height: 13,
+  },
+  headerContent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  cartButton: {
+    width: 42,
+    height: 42,
+    borderRadius: 100,
+    backgroundColor: colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  cartBadge: {
+    position: 'absolute',
+    top: 0,
+    right: 9,
+    width: 11,
+    height: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cartBadgeText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: '600',
+    color: colors.darkGrey,
+    textTransform: 'capitalize',
+  },
+  scrollContainer: {
+    flex: 1,
+  },
+  productImageContainer: {
+    height: 261,
+    backgroundColor: colors.productImageBackground,
+    borderRadius: 12,
+    marginHorizontal: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 75,
+    paddingVertical: 54,
+  },
+  productImage: {
+    width: 265,
+    height: 153,
+    resizeMode: 'contain',
+  },
+  productInfoSection: {
+    paddingHorizontal: 20,
+    paddingTop: 28,
+    gap: 28,
+  },
+  productHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  logoContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  productTitleContainer: {
+    flex: 1,
+    gap: 4,
+  },
+  productTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.black,
+    letterSpacing: 0.28,
+  },
+  productSubtitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+  },
+  variantSection: {
+    gap: 16,
+  },
+  sectionTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.onSurfaceVariant,
+  },
+  variantScrollContainer: {
+    flexDirection: 'row',
+    gap: 8,
+    paddingHorizontal: 4,
+  },
+  variantGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  variantButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.variantBorder,
+    backgroundColor: colors.variantBackground,
+  },
+  variantButtonSelected: {
+    borderColor: colors.darkGrey,
+    backgroundColor: colors.variantSelectedBackground,
+  },
+  variantText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '400',
+    color: colors.black,
+  },
+  variantTextSelected: {
+    color: colors.darkGrey,
+    fontWeight: '500',
+  },
+  quantitySection: {
+    gap: 16,
+  },
+  quantityRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  quantitySelector: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: colors.variantBorder,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 32,
+  },
+  quantityButton: {
+    padding: 4,
+  },
+  quantityText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 18,
+    fontWeight: '500',
+    color: colors.black,
+  },
+  deliveryInfo: {
+    flex: 1,
+    marginLeft: 20,
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+  },
+  accordionContainer: {
+    gap: 12,
+  },
+  divider: {
+    height: 1.2,
+    backgroundColor: colors.dividerBackground,
+  },
+  accordionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 4,
+  },
+  accordionTitle: {
+    flex: 1,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.black,
+  },
+  accordionContent: {
+    paddingRight: 30,
+  },
+  accordionText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    lineHeight: 15,
+  },
+  bottomCTA: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    backgroundColor: colors.white,
+    shadowColor: colors.shadowColor,
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  priceSection: {
+    gap: 8,
+  },
+  priceText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 20,
+    fontWeight: '600',
+    color: colors.black,
+    flexShrink: 1, 
+  },
+  priceTextSmall: {
+    fontSize: 14,
+    lineHeight: 18,
+  },
+  viewDetailsButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  viewDetailsText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: '500',
+    color: colors.darkGrey,
+  },
+  addToCartButton: {
+    width: 180,
+    height: 52,
+    backgroundColor: colors.darkGrey,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 12,
+  },
+  addToCartText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.white,
+  },
+  cartIcon: {
+    width: 24,
+    height: 26,
+    resizeMode: 'contain',
+  },
+  variantTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginVertical: 8,
+    color: colors.darkText,
+  },
+  variantsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  delivery: {
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.deliveryText,
+    lineHeight: 18,
+    letterSpacing: -0.165,
+  },
+  deliveryIcon: {
+    width: 22,
+    height: 16,
+    resizeMode: 'contain',
+  },
+  cartCountContainer: {
+    position: 'absolute',
+    right: SCALE(-4),
+    width: SCALE(16),
+    height: VSCALE(14),
+    justifyContent: 'center',
+    alignItems: 'center',
+    top: VSCALE(-8),
+  },
+  cartCountText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '700',
+    color: colors.red,
+  },
+  link:{
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  ol:{
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    paddingLeft: 20,
+    marginVertical: 8,
+  },
+  ul:{
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    paddingLeft: 20,
+    marginVertical: 8,
+  },
+  li:{
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    marginBottom: 8,
+  },
+  p:{
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    marginBottom: 8,
+  },
+  div:{
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    marginBottom: 6,
+  },
+});
+
+export default styles;