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

package/src/screens/Dashboard/styles.ts

@@ -0,0 +1,512 @@
+import { Platform, 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.actionBackground,
+    paddingTop: Platform.OS === 'ios' ? 0 : VSCALE(16),
+  },
+  statusBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: SCALE(20),
+    paddingTop: VSCALE(16),
+    paddingBottom: VSCALE(16),
+  },
+  timeText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(15),
+    fontWeight: '400',
+    color: colors.timeText,
+    letterSpacing: -0.165,
+  },
+  statusIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(8),
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: colors.white,
+  },
+  scrollViewContent: {
+    flexGrow: 1,
+    paddingBottom: VSCALE(20),
+  },
+  headerSection: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: SCALE(20),
+    paddingBottom: VSCALE(16),
+  },
+  userInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(12),
+  },
+  backButton: {
+    width: SCALE(24),
+    height: SCALE(24),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backArrowIcon: {
+    width: SCALE(18),
+    height: SCALE(18),
+    resizeMode: 'contain',
+  },
+  avatar: {
+    width: SCALE(36),
+    height: SCALE(36),
+    borderRadius: SCALE(18),
+    backgroundColor: colors.avatarBackground,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  avatarText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(14),
+    fontWeight: '400',
+    color: colors.avatarText,
+  },
+  userDetails: {
+    gap: VSCALE(2),
+  },
+  greeting: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '400',
+    color: colors.greeting,
+  },
+  userName: {
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,
+    fontSize: SCALE(14),
+    fontWeight: '600',
+    color: colors.black,
+  },
+  cartButton: {
+    padding: SCALE(8),
+  },
+  cartContainer: {
+    position: 'relative',
+    width: SCALE(42),
+    height: SCALE(42),
+    borderRadius: SCALE(21),
+    backgroundColor: colors.cartBackground,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cartBadge: {
+    position: 'absolute',
+    top: VSCALE(8),
+    right: SCALE(9),
+    width: SCALE(11),
+    height: VSCALE(12),
+    backgroundColor: colors.cartBadgeBackground,
+    borderRadius: SCALE(6),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cartBadgeText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '700',
+    color: colors.cartBadgeText,
+  },
+  pointsCardContainer: {
+    paddingHorizontal: 0,
+    marginBottom: 0,
+  },
+  card: {
+    width: '100%',
+    height: VSCALE(148),
+    borderRadius: SCALE(21),
+  },
+  pointsCardContent: {
+    position: 'relative',
+    padding: SCALE(20),
+    flex: 1,
+    zIndex: 2,
+  },
+  pointsHeader: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: SCALE(10),
+    marginBottom: Platform.OS === 'ios' ? VSCALE(20) : VSCALE(10),
+    right: SCALE(5),
+  },
+  apnaClubLogo: {
+    width: SCALE(60),
+    height: VSCALE(55),
+    resizeMode: 'contain',
+  },
+  pointsInfo: {
+    flex: 1,
+  },
+  pointsValue: {
+    fontFamily: FontFamily.LEXEND_BOLD,
+    fontSize: SCALE(18),
+    fontWeight: '700',
+    color: colors.pointsValue,
+    marginBottom: VSCALE(1),
+  },
+  pointsLabel: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '400',
+    color: colors.avatarText,
+  },
+  redeemButton: {
+    height: VSCALE(40),
+    backgroundColor: colors.redeemButton,
+    borderRadius: SCALE(8),
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: SCALE(16),
+    minWidth: SCALE(100),
+  },
+  redeemButtonText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '700',
+    color: colors.redeemButtonText,
+  },
+  backgroundShape: {
+    position: 'absolute',
+    top: Platform.OS === 'ios' ? SCALE(3) : SCALE(1),
+    right: Platform.OS === 'ios' ? -SCALE(14) : -SCALE(15.5),
+  },
+  pencilIcon: {
+    position: 'absolute',
+    right: SCALE(16),
+    top: VSCALE(44),
+    width: SCALE(79),
+    height: VSCALE(89),
+  },
+  statsSection: {
+    flexDirection: 'row',
+    paddingHorizontal: SCALE(20),
+    gap: SCALE(18),
+    marginBottom: VSCALE(24),
+  },
+  statCard: {
+    flex: 1,
+    padding: SCALE(16),
+    borderRadius: SCALE(20),
+    backgroundColor: colors.statCardBackground,
+    alignItems: 'center',
+  },
+  statValue: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(24),
+    fontWeight: '700',
+    color: colors.pointsValue,
+    marginBottom: VSCALE(8),
+  },
+  statLabel: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '400',
+    color: colors.pointsValue,
+    textAlign: 'center',
+  },
+  actionsSection: {
+    flexDirection: 'row',
+    paddingHorizontal: SCALE(16),
+    gap: SCALE(10),
+    marginBottom: VSCALE(24),
+  },
+  actionItem: {
+    height: VSCALE(84),
+    padding: SCALE(14),
+    paddingBottom: VSCALE(12),
+    borderRadius: SCALE(20),
+    borderWidth: 1,
+    borderColor: colors.actionBorder,
+    backgroundColor: colors.actionBackground,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: SCALE(100),
+  },
+  actionLabel: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '400',
+    color: colors.avatarText,
+    textAlign: 'center',
+    lineHeight: VSCALE(12),
+    width: '100%',
+  },
+  rewardsSection: {
+    paddingHorizontal: SCALE(20),
+    marginBottom: VSCALE(24),
+  },
+  rewardsCard: {
+    padding: SCALE(16),
+    borderRadius: SCALE(20),
+    borderWidth: 1,
+    borderColor: colors.actionBorder,
+    backgroundColor: colors.actionBackground,
+  },
+  giftImage: {
+    width: SCALE(106),
+    height: SCALE(106),
+  },
+  rewardsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: VSCALE(12),
+  },
+  rewardsTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(14),
+    fontWeight: '700',
+    color: colors.avatarText,
+    marginBottom: VSCALE(4),
+    textAlign: 'right',
+  },
+  rewardsSubtitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '400',
+    color: colors.greeting,
+    lineHeight: VSCALE(18),
+    textAlign: 'right',
+  },
+  viewAllButton: {
+    width: SCALE(118),
+    height: VSCALE(32),
+    backgroundColor: colors.viewAllButton,
+    borderRadius: SCALE(8),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: VSCALE(8),
+    alignSelf: 'flex-end',
+  },
+  rewardsTextColumn: {
+    flex: 1,
+  },
+  viewAllButtonText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '700',
+    color: colors.redeemButtonText,
+  },
+  bottomSpacing: {
+    height: VSCALE(120),
+  },
+  icon: {
+    height: SCALE(24),
+    width: SCALE(24),
+  },
+  bannerCard: {
+    height: VSCALE(177),
+    width: SCALE(353),
+    alignSelf: 'center',
+    marginBottom: VSCALE(20),
+  },
+  bannerPointsContainer: {
+    position: 'relative',
+  },
+  giftIcon: {
+    height: VSCALE(106),
+    width: SCALE(106),
+    resizeMode: 'contain',
+    right: SCALE(10),
+  },
+  waveCorner: {
+    height: Platform.OS === 'ios' ? VSCALE(142) : VSCALE(146),
+    width: SCALE(180),
+    resizeMode: 'contain',
+  },
+  backgroundblue: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+  pencillogoContainer: {
+    position: 'absolute',
+    top: VSCALE(40),
+    left: SCALE(50),
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  pencillogo: {
+    height: VSCALE(88),
+    width: SCALE(79),
+    resizeMode: 'contain',
+  },
+  cartCountContainer: {
+    position: 'absolute',
+    top: VSCALE(2),
+    right: SCALE(8),
+    width: SCALE(16),
+    height: VSCALE(14),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cartCountText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '700',
+    color: colors.red,
+  },
+  // New styles for updated Home tab UI
+  headerBackground: {
+    marginHorizontal: SCALE(16),
+    borderRadius: SCALE(20),
+    overflow: 'hidden',
+    paddingVertical: VSCALE(16),
+    paddingHorizontal: SCALE(16),
+    marginBottom: VSCALE(10),
+  },
+  headerIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(8),
+  },
+  headerIcon: {
+    width: SCALE(20),
+    height: SCALE(20),
+    resizeMode: 'contain',
+  },
+  bellButton: {
+    padding: SCALE(8),
+  },
+  pointsCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.white,
+    borderRadius: SCALE(16),
+    paddingVertical: VSCALE(16),
+    paddingHorizontal: SCALE(16),
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  pointsCardLeft: {
+    marginRight: SCALE(12),
+  },
+  coinIcon: {
+    width: SCALE(48),
+    height: SCALE(48),
+    resizeMode: 'contain',
+  },
+  pointsCardCenter: {
+    flex: 1,
+  },
+  yourPointsLabel: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '400',
+    color: colors.greeting,
+  },
+  actionIcon: {
+    width: SCALE(28),
+    height: SCALE(28),
+    resizeMode: 'contain',
+  },
+  bannerSection: {
+    marginHorizontal: SCALE(16),
+    marginBottom: VSCALE(20),
+  },
+  discountBanner: {
+    width: '100%',
+    height: VSCALE(140),
+    borderRadius: SCALE(16),
+    resizeMode: 'cover',
+  },
+  sectionContainer: {
+    marginBottom: VSCALE(20),
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: SCALE(16),
+    marginBottom: VSCALE(12),
+  },
+  sectionTitle: {
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,
+    fontSize: SCALE(16),
+    fontWeight: '600',
+    color: colors.black,
+  },
+  viewAllText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '400',
+    color: colors.greeting,
+  },
+  categoriesList: {
+    paddingHorizontal: SCALE(16),
+    gap: SCALE(12),
+  },
+  categoryItem: {
+    alignItems: 'center',
+    marginRight: SCALE(12),
+  },
+  categoryImageContainer: {
+    width: SCALE(100),
+    height: SCALE(100),
+    borderRadius: SCALE(12),
+    backgroundColor: colors.surfaceVariant,
+    overflow: 'hidden',
+    marginBottom: VSCALE(8),
+  },
+  categoryImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  categoryName: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '400',
+    color: colors.black,
+    textAlign: 'center',
+  },
+  eVouchersList: {
+    paddingHorizontal: SCALE(16),
+    gap: SCALE(12),
+  },
+  eVoucherItem: {
+    alignItems: 'center',
+    marginRight: SCALE(12),
+  },
+  eVoucherImageContainer: {
+    width: SCALE(100),
+    height: SCALE(100),
+    borderRadius: SCALE(12),
+    backgroundColor: colors.surfaceVariant,
+    overflow: 'hidden',
+    marginBottom: VSCALE(8),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  eVoucherLogo: {
+    width: '80%',
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  eVoucherName: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '400',
+    color: colors.black,
+    textAlign: 'center',
+  },
+});
+
+export default styles;