Update UI for color consistency, Further testing on harded Data for demo - INCOMPLETE need fix (Bug all data marked as Dangerous)

components/CustomTabBar.tsx

@@ -66,10 +66,10 @@ const CustomTabBar: React.FC<CustomTabBarProps> =  ({ state, descriptors, naviga
             onLongPress={onLongPress}
             style={styles.tabButton}
           >
-           <Ionicons name={iconName} size={24} color={isFocused ? '#673ab7' : '#222'} />
+           <Ionicons name={iconName} size={24} color={isFocused ? '#ff69b4' : '#222'} />
             {/* Check if label is a string before rendering */}
             {typeof label === 'string' ? (
-              <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
+              <Text style={{ color: isFocused ? '#ff69b4' : '#222' }}>
                 {label}
               </Text>
             ) : null}
@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
     width: 60,
     height: 60,
     borderRadius: 30,
-    backgroundColor: '#673ab7',
+    backgroundColor: '#ff69b4',
     justifyContent: 'center',
     alignItems: 'center',
     shadowColor: '#000',

components/ScannedDataBox.tsx

@@ -11,24 +11,27 @@ interface ScannedDataBoxProps {
 
 const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, scanResult, dataType }) => {
   const extractedData = data.split('\n')[1]?.split('Data: ')[1] || '';
-  let resultText = 'SAFE';
-  let resultColor = styles.safeResult;
 
-  if (scanResult) {
+  const getResultText = () => {
-    if (!scanResult.secureConnection || !scanResult.virusTotalCheck) {
+    if (!scanResult || (!scanResult.secureConnection && !scanResult.virusTotalCheck)) {
-      resultText = 'DANGEROUS';
+      return 'DANGEROUS';
-      resultColor = styles.dangerousResult;
+    } else if (scanResult.redirects > 0) {
-    } else if (scanResult.secureConnection && scanResult.virusTotalCheck) {
+      return 'WARNING';
-      resultText = 'SAFE';
-      resultColor = styles.safeResult;
     } else {
-      resultText = 'WARNING';
+      return 'SAFE';
-      resultColor = styles.warningResult;
     }
+  };
+
+  const getResultColor = () => {
+    const result = getResultText();
+    if (result === 'DANGEROUS') {
+      return '#ff0000'; // Red
+    } else if (result === 'WARNING') {
+      return '#ffa500'; // Orange
     } else {
-    resultText = 'WARNING';
+      return '#00ff00'; // Green
-    resultColor = styles.warningResult;
     }
+  };
 
   return (
     <View style={styles.dataBox}>
@@ -40,8 +43,8 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, scanResult, dataT
       <Text style={styles.timestampText}>{new Date().toLocaleString()}</Text>
       <View style={styles.qrContainer}>
         <QRCode value={extractedData} size={100} backgroundColor="transparent" />
-        <Text style={[styles.resultText, resultColor]}>
+        <Text style={[styles.resultText, { color: getResultColor() }]}>
-          Result: {resultText}
+          Result: {getResultText()}
         </Text>
       </View>
       <View style={styles.divider} />
@@ -114,15 +117,6 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     textAlign: 'center',
   },
-  safeResult: {
-    color: 'green',
-  },
-  warningResult: {
-    color: 'orange',
-  },
-  dangerousResult: {
-    color: 'red',
-  },
   typeText: {
     fontSize: 16,
     color: '#000',

screens/QRScannerScreen.tsx

@@ -232,7 +232,7 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
     <View style={styles.container}>
       {/* Banner section */}
       <View style={styles.banner}>
-        <Text style={styles.headerText}>SafeQR v0.77</Text>
+        <Text style={styles.headerText}>SafeQR v0.89</Text>
       </View>
       {/* Welcome Text */}
       <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>

screens/SettingsScreen.tsx

@@ -1,25 +1,43 @@
 import React, { useContext } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Linking } from 'react-native';
 import { QRCodeContext } from '../types';
 
 const SettingsScreen: React.FC = () => {
   const qrCodeContext = useContext(QRCodeContext);
-
-  // Safely access setQrCodes and handle the case when the context is null
   const setQrCodes = qrCodeContext ? qrCodeContext.setQrCodes : () => {};
 
-  
   const clearHistory = () => {
     setQrCodes([]);
   };
 
+  const handleLinkPress = (url: string) => {
+    Linking.openURL(url);
+  };
+
   return (
     <View style={styles.container}>
-      <Text style={styles.welcomeText}>Settings Screen</Text>
+      <Text style={styles.header}>Settings</Text>
-      <TouchableOpacity style={styles.button} onPress={clearHistory}>
+      <View style={styles.profileSection}>
-        <Text style={styles.buttonText}>Clear History</Text>
+        <Text style={styles.sectionTitle}>Profile</Text>
+        <TouchableOpacity style={styles.loginButton}>
+          <Text style={styles.loginButtonText}>Log In</Text>
         </TouchableOpacity>
       </View>
+      <View style={styles.divider} />
+      <View style={styles.aboutUsSection}>
+        <Text style={styles.sectionTitle}>About Us</Text>
+        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/marketing/')}>
+          <Text style={styles.linkText}>safeqr.github.io/marketing</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/privacy-policy')}>
+          <Text style={styles.linkText}>Privacy Policy</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/terms-of-service')}>
+          <Text style={styles.linkText}>Terms Of Service</Text>
+        </TouchableOpacity>
+      </View>
+      <Text style={styles.versionText}>Version 1.2</Text>
+    </View>
   );
 };
 
@@ -29,25 +47,53 @@ const styles = StyleSheet.create({
     backgroundColor: '#f8f0fc',
     padding: 20,
   },
-  welcomeText: {
+  header: {
-    textAlign: 'center',
+    fontSize: 24,
-    fontSize: 20,
+    fontWeight: 'bold',
-    marginVertical: 10,
+    color: '#ff69b4',
-    color: 'black',
+    marginBottom: 20,
   },
-  button: {
+  profileSection: {
-    backgroundColor: '#333',
+    marginBottom: 20,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#000',
+    marginBottom: 10,
+  },
+  loginButton: {
+    backgroundColor: '#ff69b4',
+    paddingVertical: 8,
     paddingHorizontal: 20,
-    paddingVertical: 10,
+    borderRadius: 20,
-    borderRadius: 30,
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: 10,
+    alignSelf: 'flex-start',
   },
-  buttonText: {
+  loginButtonText: {
-    color: 'white',
+    color: '#000',
     fontSize: 16,
   },
+  divider: {
+    height: 1,
+    backgroundColor: '#ccc',
+    marginVertical: 20,
+  },
+  aboutUsSection: {
+    marginBottom: 20,
+  },
+  linkText: {
+    fontSize: 16,
+    color: '#0000ff',
+    marginBottom: 10,
+  },
+  versionText: {
+    textAlign: 'center',
+    fontSize: 14,
+    color: '#aaa',
+    marginTop: 20,
+  },
 });
 
 export default SettingsScreen;