Fixed Color Scheme and Scaling

App.tsx

@@ -2,9 +2,10 @@ import React, { useState, useEffect, createContext, useContext } from 'react';
 import { Text, View, StyleSheet, ActivityIndicator, TouchableOpacity, FlatList } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { CameraView, Camera } from 'expo-camera';
-import { Ionicons } from '@expo/vector-icons';
-import axios from 'axios'; // Import Axios for HTTP requests
+import { CameraView, Camera } from 'expo-camera'; // 
+import { Ionicons } from '@expo/vector-icons'; // The icons used in the navigation bar
+import axios from 'axios'; // Import Axios for HTTP requests for the VT API call
+
 
 // Create a Context for QR code data
 const QRCodeContext = createContext();
@@ -242,37 +243,38 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fa5da2', 
+    backgroundColor: '#f8f0fc',
+    padding: 20,
   },
   splashContainer: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#f8f0fc", // light purple background
+    backgroundColor: "#f8f0fc",
   },
-  banner: {
-    backgroundColor: "#333", // dark background
-    paddingVertical: 10,
-    alignItems: "center",
-  },
-  headerText: {
-    color: "white",
-    fontSize: 24,
-  },
-  welcomeText: {
+  scanText: {
     textAlign: "center",
-    fontSize: 20,
-    marginVertical: 10, // Adjusted margin
-    color: "white", 
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "#ff69b4",
+    marginVertical: 10,
+  },
+  instructionText: {
+    textAlign: "center",
+    fontSize: 16,
+    color: "#000",
+    marginBottom: 20,
   },
   cameraContainer: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
+    borderRadius: 10,
+    overflow: "hidden",
   },
   camera: {
-    width: 300,
-    height: 300,
+    width: "80%",
+    height: "60%",
   },
   button: {
     backgroundColor: '#333',
@@ -299,20 +301,10 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: "#000",
   },
-  menu: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    alignItems: "center",
-    backgroundColor: "#ff69b4", // pink background
-    paddingVertical: 10,
-  },
-
-
-  // Additional styles for green and red boxes
-  greenBox: {
-    backgroundColor: '#00FF00', // Green color
-  },
-  redBox: {
-    backgroundColor: '#FF0000', // Red color
+  welcomeText: {
+    textAlign: "center",
+    fontSize: 20,
+    marginVertical: 10,
+    color: "black", 
   },
 });