fix: enhance layout
This commit is contained in:
@@ -55,7 +55,7 @@ const DeviceCard = ({ device, onToggle }: { device: HaEntity; onToggle: (entityI
|
||||
|
||||
return (
|
||||
<View
|
||||
className={`bg-white rounded-3xl p-5 shadow-sm border border-gray-100 w-[48%] mb-4`}
|
||||
className="bg-white rounded-3xl p-5 shadow-sm border border-gray-100 w-[48%] mb-4"
|
||||
style={{ aspectRatio: 1 }}
|
||||
>
|
||||
<View className="flex-1 justify-between">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user