aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLibravatarLibravatar Biswakalyan Bhuyan <biswa@surgot.in> 2024-10-17 20:39:35 +0530
committerLibravatarLibravatar Biswakalyan Bhuyan <biswa@surgot.in> 2024-10-17 20:39:35 +0530
commit6a76594f71ffba95a3480e57f4a4243e212e09ba (patch)
tree85b83a3656c83ef7e8ffe1be88b4c926568e7c76
parent3b6a18902ee9c4970dbcc5a2d8d111256a0b3736 (diff)
downloadmall-app-6a76594f71ffba95a3480e57f4a4243e212e09ba.tar.gz
mall-app-6a76594f71ffba95a3480e57f4a4243e212e09ba.tar.bz2
mall-app-6a76594f71ffba95a3480e57f4a4243e212e09ba.zip
Added styling to the Cart and Checkout page
-rw-r--r--src/screens/Auth/LoginScreen.js2
-rw-r--r--src/screens/Cart/CartScreen.js55
-rw-r--r--src/screens/Checkout/CheckoutScreen.js75
3 files changed, 119 insertions, 13 deletions
diff --git a/src/screens/Auth/LoginScreen.js b/src/screens/Auth/LoginScreen.js
index c74fed4..3912e65 100644
--- a/src/screens/Auth/LoginScreen.js
+++ b/src/screens/Auth/LoginScreen.js
@@ -22,7 +22,7 @@ const LoginScreen = ({ navigation }) => {
};
const handleTesting = () => {
- console.log("Navigating to Forgot Password");
+ console.log("Navigating to Testing channel");
// Navigate to the forgot password screen
navigation.navigate('MallSelection');
};
diff --git a/src/screens/Cart/CartScreen.js b/src/screens/Cart/CartScreen.js
index 392e665..b8ca0e4 100644
--- a/src/screens/Cart/CartScreen.js
+++ b/src/screens/Cart/CartScreen.js
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text, Button, StyleSheet, ScrollView } from 'react-native';
import { CartContext } from '../../context/CartContext';
const CartScreen = ({ navigation }) => {
@@ -8,16 +8,57 @@ const CartScreen = ({ navigation }) => {
const handleCheckout = () => navigation.navigate('Checkout');
return (
- <View>
+ <ScrollView contentContainerStyle={styles.container}>
{cart.map((item, index) => (
- <View key={index}>
- <Text>{item.name} - Quantity: {item.quantity}</Text>
- <Button title="Increase Quantity" onPress={() => updateQuantity(item.id, item.quantity + 1)} />
+ <View key={index} style={styles.itemContainer}>
+ <Text style={styles.itemText}>{item.name}</Text>
+ <Text style={styles.quantityText}>Quantity: {item.quantity}</Text>
+ <Button
+ title="Increase Quantity"
+ onPress={() => updateQuantity(item.id, item.quantity + 1)}
+ />
</View>
))}
- <Button title="Proceed to Checkout" onPress={handleCheckout} />
- </View>
+ <View style={styles.checkoutButton}>
+ <Button title="Proceed to Checkout" onPress={handleCheckout} />
+ </View>
+ </ScrollView>
);
};
+const styles = StyleSheet.create({
+ container: {
+ padding: 16,
+ backgroundColor: '#f8f9fa',
+ },
+ itemContainer: {
+ backgroundColor: '#ffffff',
+ padding: 16,
+ borderRadius: 8,
+ marginBottom: 12,
+ elevation: 2, // for subtle shadow on Android
+ shadowColor: '#000', // for iOS shadow
+ shadowOpacity: 0.2,
+ shadowRadius: 3,
+ shadowOffset: { width: 1, height: 2 },
+ },
+ itemText: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: '#333',
+ marginBottom: 4,
+ },
+ quantityText: {
+ fontSize: 16,
+ color: '#666',
+ marginBottom: 8,
+ },
+ checkoutButton: {
+ marginTop: 20,
+ paddingVertical: 10,
+ borderRadius: 8,
+ },
+});
+
export default CartScreen;
+
diff --git a/src/screens/Checkout/CheckoutScreen.js b/src/screens/Checkout/CheckoutScreen.js
index a8645d2..4cd8938 100644
--- a/src/screens/Checkout/CheckoutScreen.js
+++ b/src/screens/Checkout/CheckoutScreen.js
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text, Button, StyleSheet, ScrollView } from 'react-native';
import { CartContext } from '../../context/CartContext';
import emailService from '../../services/emailService';
@@ -13,14 +13,79 @@ const CheckoutScreen = ({ navigation }) => {
navigation.navigate('Invoice');
};
+ const totalAmount = cart.reduce((total, item) => total + item.price * item.quantity, 0);
+
return (
- <View>
+ <ScrollView contentContainerStyle={styles.container}>
+ <Text style={styles.title}>Checkout</Text>
{cart.map((item, index) => (
- <Text key={index}>{item.name} - ${item.price * item.quantity}</Text>
+ <View key={index} style={styles.itemContainer}>
+ <Text style={styles.itemText}>{item.name}</Text>
+ <Text style={styles.priceText}>${(item.price * item.quantity).toFixed(2)}</Text>
+ </View>
))}
- <Button title="Confirm and Pay" onPress={handlePayment} />
- </View>
+ <View style={styles.totalContainer}>
+ <Text style={styles.totalText}>Total: ${totalAmount.toFixed(2)}</Text>
+ </View>
+ <View style={styles.buttonContainer}>
+ <Button title="Confirm and Pay" onPress={handlePayment} />
+ </View>
+ </ScrollView>
);
};
+const styles = StyleSheet.create({
+ container: {
+ padding: 16,
+ backgroundColor: '#f8f9fa',
+ },
+ title: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ marginBottom: 20,
+ textAlign: 'center',
+ },
+ itemContainer: {
+ backgroundColor: '#ffffff',
+ padding: 16,
+ borderRadius: 8,
+ marginBottom: 12,
+ elevation: 2,
+ shadowColor: '#000',
+ shadowOpacity: 0.2,
+ shadowRadius: 3,
+ shadowOffset: { width: 1, height: 2 },
+ },
+ itemText: {
+ fontSize: 18,
+ color: '#333',
+ },
+ priceText: {
+ fontSize: 16,
+ color: '#888',
+ },
+ totalContainer: {
+ marginTop: 20,
+ padding: 16,
+ backgroundColor: '#ffffff',
+ borderRadius: 8,
+ elevation: 2,
+ shadowColor: '#000',
+ shadowOpacity: 0.2,
+ shadowRadius: 3,
+ shadowOffset: { width: 1, height: 2 },
+ },
+ totalText: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ textAlign: 'center',
+ color: '#333',
+ },
+ buttonContainer: {
+ marginTop: 20,
+ borderRadius: 8,
+ },
+});
+
export default CheckoutScreen;
+