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

@@ -2,10 +2,12 @@ import { Redirect, Tabs } from 'expo-router';
import { Home, Clock, Zap, CalendarIcon, Building } from 'lucide-react-native';
import { useContext } from 'react';
import { AuthContext } from '@/utils/authContext';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
export default function ProtectedLayout() {
const authState = useContext(AuthContext);
const insets = useSafeAreaInsets();
if (!authState.isReady) {
return null;
}
@@ -23,7 +25,7 @@ export default function ProtectedLayout() {
borderTopWidth: 1,
borderTopColor: '#f3f4f6',
height: 90,
paddingBottom: 30,
paddingBottom: insets.bottom,
paddingTop: 10,
paddingHorizontal: 10,
},

View File

@@ -158,7 +158,7 @@ export default function AutomationScreen() {
areaData: JSON.stringify(area),
}
})}
className="bg-white rounded-3xl p-5 shadow-sm border border-gray-100 active:scale-[0.98] w-[48%] mb-4 aspect-square"
className="bg-white aspect-square rounded-3xl p-5 shadow-sm border border-gray-100 active:scale-[0.98] w-[48%] mb-4"
>
<View className="flex-1 justify-between">
<View className={`${bgColor} w-14 h-14 items-center justify-center rounded-2xl`}>

View File

@@ -120,9 +120,9 @@ export default function LoginScreen() {
</TouchableOpacity>
</View>
{/* TODO: Implement password recovery functionality */}
<TouchableOpacity className="mt-3 self-end" style={{ alignSelf: 'flex-end' }}>
{/* <TouchableOpacity className="mt-3 self-end" style={{ alignSelf: 'flex-end' }}>
<Text className="text-[#099499] font-bold text-base">Password dimenticata?</Text>
</TouchableOpacity>
</TouchableOpacity> */}
</View>
{/* Login Button */}

View File

@@ -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">

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>