From 7b396073f702c2f11cfb08bd8f7080b7a2c2de2c Mon Sep 17 00:00:00 2001 From: iskubee Date: Thu, 20 Jun 2024 18:43:07 +0800 Subject: [PATCH] added scalling compatibilty for smaller devices --- components/ScannedDataBox.tsx | 121 +++++++++++++++++----------------- screens/HistoryScreen.tsx | 2 +- screens/QRScannerScreen.tsx | 4 +- 3 files changed, 65 insertions(+), 62 deletions(-) diff --git a/components/ScannedDataBox.tsx b/components/ScannedDataBox.tsx index b496b9d..77eea45 100644 --- a/components/ScannedDataBox.tsx +++ b/components/ScannedDataBox.tsx @@ -17,7 +17,7 @@ interface ScanResult { const ScannedDataBox: React.FC = ({ data, dataType, clearScanData }) => { const [scanResult, setScanResult] = useState(null); - const [isModalVisible, setIsModalVisible] = useState(false); + const [isModalVisible, setIsModalVisible] = useState(false); useEffect(() => { if (data.includes('https://Safe_website.com')) { @@ -74,7 +74,7 @@ const ScannedDataBox: React.FC = ({ data, dataType, clearSc return ( - + @@ -83,7 +83,7 @@ const ScannedDataBox: React.FC = ({ data, dataType, clearSc {new Date().toLocaleString()} - + Result: {getResultText()} @@ -97,25 +97,24 @@ const ScannedDataBox: React.FC = ({ data, dataType, clearSc Redirects: {scanResult ? scanResult.redirects : 'N/A'} - + Share - + Open More Information setIsModalVisible(true)}> - + Security Headers - + - setIsModalVisible(false)} > @@ -123,13 +122,13 @@ const ScannedDataBox: React.FC = ({ data, dataType, clearSc Security Headers Name: Strict-Transport-Security - Value: _ + Value: max-age=31536000; includeSubDomains Name: X-Frame-Options - Value: _ + Value: DENY Name: X-Content-Type-Options - Value: _ + Value: nosniff Name: Content-Security-Policy - Value: _ + Value: default-src 'self' setIsModalVisible(false)}> Close @@ -146,97 +145,101 @@ const styles = StyleSheet.create({ alignItems: 'center', }, scan_icon: { - width: 50, - height: 50, - marginRight: 8, + width: 37.5, + height: 37.5, + marginRight: 6, }, payload: { - fontSize: 20, + fontSize: 15, color: '#000', - marginBottom: 1, + flex: 1, // Allow text to use available space }, dataBox: { - padding: 20, + padding: 15, backgroundColor: '#ffe6f0', - borderRadius: 10, + borderRadius: 7.5, shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.2, - shadowRadius: 5, - elevation: 3, + shadowOffset: { width: 0, height: 1.5 }, + shadowOpacity: 0.15, + shadowRadius: 3.75, + elevation: 2.25, zIndex: 1, + //width: '95%', // Ensure the box uses the full width of its container }, qrContainer: { alignItems: 'center', - marginVertical: 10, + marginVertical: 7.5, }, blankLine: { - height: 20, + height: 15, }, divider: { - height: 1, + height: 0.75, backgroundColor: '#ddd', - marginVertical: 10, + marginVertical: 7.5, alignSelf: 'stretch', }, timestampText: { - fontSize: 12, + fontSize: 9, color: '#000', - marginBottom: 10, + marginBottom: 7.5, }, resultText: { - fontSize: 16, - marginBottom: 10, + fontSize: 12, + marginBottom: 7.5, textAlign: 'center', }, typeText: { - fontSize: 16, + fontSize: 12, color: '#000', - marginBottom: 10, + marginBottom: 7.5, }, checksText: { - fontSize: 16, + fontSize: 12, color: '#000', - marginBottom: 5, + marginBottom: 3.75, }, iconContainer: { flexDirection: 'row', justifyContent: 'space-between', - marginTop: 10, + marginTop: 7.5, }, iconButton: { flexDirection: 'column', alignItems: 'center', + flex: 1, }, iconText: { color: '#2196F3', - marginTop: 5, + marginTop: 3.75, + textAlign: 'center', + fontSize: 12, }, moreInfoText: { - fontSize: 18, + fontSize: 13.5, fontWeight: 'bold', color: '#000', - marginVertical: 10, + marginVertical: 7.5, }, moreInfoButton: { flexDirection: 'row', alignItems: 'center', - paddingVertical: 10, - paddingHorizontal: 15, + paddingVertical: 7.5, + paddingHorizontal: 11.25, backgroundColor: '#ffe6f0', - borderRadius: 10, - marginTop: 10, + borderRadius: 7.5, + marginTop: 7.5, }, moreInfoButtonText: { flex: 1, - fontSize: 16, + fontSize: 12, color: '#000', - marginLeft: 10, + marginLeft: 7.5, }, closeButton: { position: 'absolute', - top: 10, - right: 10, + top: 7.5, + right: 7.5, }, modalContainer: { flex: 1, @@ -247,30 +250,30 @@ const styles = StyleSheet.create({ modalContent: { width: '80%', backgroundColor: 'white', - borderRadius: 10, - padding: 20, + borderRadius: 7.5, + padding: 15, alignItems: 'center', }, modalTitle: { - fontSize: 20, + fontSize: 15, fontWeight: 'bold', - marginBottom: 10, + marginBottom: 7.5, }, modalText: { - fontSize: 16, - marginBottom: 5, + fontSize: 12, + marginBottom: 3.75, textAlign: 'left', width: '100%', }, closeModalButton: { - marginTop: 20, - paddingVertical: 10, - paddingHorizontal: 20, + marginTop: 15, + paddingVertical: 7.5, + paddingHorizontal: 15, backgroundColor: '#ff69b4', - borderRadius: 5, + borderRadius: 3.75, }, closeModalButtonText: { - fontSize: 16, + fontSize: 12, color: '#fff', }, }); diff --git a/screens/HistoryScreen.tsx b/screens/HistoryScreen.tsx index d5ef160..c983d55 100644 --- a/screens/HistoryScreen.tsx +++ b/screens/HistoryScreen.tsx @@ -165,7 +165,7 @@ const styles = StyleSheet.create({ alignItems: 'center', }, dataText: { - fontSize: 16, + fontSize: 11, color: '#000', marginLeft: 10, }, diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx index 124500f..8c54834 100644 --- a/screens/QRScannerScreen.tsx +++ b/screens/QRScannerScreen.tsx @@ -30,7 +30,7 @@ const determineDataType = (data: string): string => { // Function to handle VirusTotal scanning const processWithVirusTotal = async (data: string) => { - const apiKey = 'YOUR_VIRUSTOTAL_API_KEY'; + const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; const url = 'https://www.virustotal.com/vtapi/v2/url/scan'; const params = { apikey: apiKey, @@ -48,7 +48,7 @@ const processWithVirusTotal = async (data: string) => { // Function to get VirusTotal scan results const getVirusTotalResults = async (scanId: string) => { - const apiKey = 'YOUR_VIRUSTOTAL_API_KEY'; + const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; const url = 'https://www.virustotal.com/vtapi/v2/url/report'; const params = { apikey: apiKey,