added some styling to the MallSelection Page

1 files changed, 39 insertions, 5 deletions

diff --git a/src/screens/MallSelectionScreen.js b/src/screens/MallSelectionScreen.js
index 620abe7..964711b 100644
--- a/src/screens/MallSelectionScreen.js
+++ b/src/screens/MallSelectionScreen.js
@@ -1,16 +1,50 @@
 import React from 'react';
-import { View, Button, Text } from 'react-native';
+import { View, Button, Text, StyleSheet, TouchableOpacity } from 'react-native';
 
 const MallSelectionScreen = ({ navigation }) => {
   const handleMallSelect = () => navigation.navigate('ProductScanner');
 
   return (
-    <View>
-      <Text>Select Mall:</Text>
-      <Button title="Mall 1" onPress={handleMallSelect} />
-      <Button title="Mall 2" onPress={handleMallSelect} />
+    <View style={styles.container}>
+      <Text style={styles.title}>Select a Mall</Text>
+      <TouchableOpacity style={styles.button} onPress={handleMallSelect}>
+        <Text style={styles.buttonText}>Mall 1</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.button} onPress={handleMallSelect}>
+        <Text style={styles.buttonText}>Mall 2</Text>
+      </TouchableOpacity>
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f2f2f2',
+    padding: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 20,
+  },
+  button: {
+    backgroundColor: '#4CAF50',
+    paddingVertical: 12,
+    paddingHorizontal: 30,
+    borderRadius: 8,
+    marginVertical: 10,
+    elevation: 3,
+  },
+  buttonText: {
+    fontSize: 18,
+    color: '#ffffff',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
 export default MallSelectionScreen;