fix: enhance layout

This commit is contained in:
2026-02-09 10:47:40 +01:00
parent 882cfc281d
commit cded5e8f00
5 changed files with 16 additions and 18 deletions

View File

@@ -62,35 +62,31 @@ export default function QrScanModal({ visible, onClose, onScan }: QrScanModalPro
/>
{/* Dark Overlay with Transparent "Hole" (Visually Simulated with Borders or Opacity) */}
<SafeAreaView className="flex-1">
<SafeAreaView className="flex-1 justify-between bg-black/60 pt-8">
{/* Header Overlay */}
<View className="flex-1 bg-black/60 items-center pt-8">
<View className="items-center">
<Text className="text-white text-xl font-bold">Scansiona QR Code</Text>
<Text className="text-gray-300 text-base mt-1">Inquadra il codice nel riquadro</Text>
</View>
{/* Central Area (Transparent for the camera) */}
<View className="flex-row" style={{ height: squareSize }}>
<View className="flex-1 bg-black/60" />
<View style={{ width: squareSize, height: squareSize }} className="border-2 border-[#099499] bg-transparent relative justify-center items-center">
<View className="items-center justify-center" style={{ height: squareSize }}>
<View style={{ width: squareSize, height: squareSize }}
className="border-2 border-[#099499] bg-transparent relative justify-center items-center">
{/* Decorative Corners */}
<View className="absolute top-0 left-0 w-6 h-6 border-l-4 border-t-4 border-[#099499]" />
<View className="absolute top-0 right-0 w-6 h-6 border-r-4 border-t-4 border-[#099499]" />
<View className="absolute bottom-0 left-0 w-6 h-6 border-l-4 border-b-4 border-[#099499]" />
<View className="absolute bottom-0 right-0 w-6 h-6 border-r-4 border-b-4 border-[#099499]" />
{/* Animated Scan Line or Icon */}
{!scanned && <ScanLine color="#099499" size={40} className="opacity-50" />}
</View>
<View className="flex-1 bg-black/60" />
</View>
{/* Footer Overlay */}
<View className="flex-1 bg-black/60 items-center justify-end pb-12 px-6">
<TouchableOpacity
onPress={onClose}
className="bg-white/20 p-4 rounded-full"
>
<View className="items-center justify-end pb-12">
<TouchableOpacity onPress={onClose} className="bg-white/20 p-4 rounded-full">
<X color="white" size={32} />
</TouchableOpacity>
<Text className="text-white mt-4 font-medium">Chiudi</Text>