Added styling to the Cart and Checkout page

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;
+