add header part of the screen for closing and 'forgotten password'

src/screens/UserLoginScreen.tsx

@@ -3,52 +3,67 @@ import Input from "@components/Input";
 import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
+import { Fontisto } from "@expo/vector-icons";
 import { containers } from "@styles/Commons";
-import { KeyboardAvoidingView, Platform, View } from "react-native";
+import { KeyboardAvoidingView, Platform, SafeAreaView, TouchableOpacity, View } from "react-native";
 
 const UserLoginScreen = () => {
 	return (
 		<BackgroundGreenWhiteContentArea>
-			<Box
-				style={[containers.containerFull]}
-				p={"xl"}
-				paddingTop={"x240"}
-				flexDirection={"column"}
-				justifyContent={"space-between"}
-			>
-				<KeyboardAvoidingView
-					behavior={Platform.OS === "ios" ? "height" : "height"}
-					style={{ flex: 1 }}
+			<SafeAreaView style={{ flex: 1 }}>
+				<Box
+					px={"m"}
+					justifyContent={"space-between"}
+					flexDirection={"row"}
+					alignItems={"center"}
 				>
-					<View>
-						<Box mb={"x100"}>
-							<Text fontSize={40} fontWeight={"bold"}>
-								Connexion
-							</Text>
-							<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
-						</Box>
+					<Fontisto name="close-a" size={12} color="black" />
 
-						<Box gap={"m"}>
-							<Input label="Email" />
-							<Input label="Mot de passe" secureTextEntry={true} />
-						</Box>
-					</View>
-				</KeyboardAvoidingView>
-				<Box mt={"xl"}>
-					<Button
-						variant={"full"}
-						textVariants={"primary"}
-						label="Se connecter"
-						onPress={() => {}}
-					/>
-					<Button
-						variant={"lightGray"}
-						textVariants={"black"}
-						label="Creer un compte"
-						onPress={() => {}}
-					/>
+					<TouchableOpacity>
+						<Text>Mot de passe oublie ?</Text>
+					</TouchableOpacity>
 				</Box>
-			</Box>
+				<Box
+					style={[containers.containerFull]}
+					p={"xl"}
+					paddingTop={"x240"}
+					flexDirection={"column"}
+					justifyContent={"space-between"}
+				>
+					<KeyboardAvoidingView
+						behavior={Platform.OS === "ios" ? "height" : "height"}
+						style={{ flex: 1 }}
+					>
+						<View>
+							<Box mb={"x100"}>
+								<Text fontSize={40} fontWeight={"bold"}>
+									Connexion
+								</Text>
+								<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
+							</Box>
+
+							<Box gap={"m"}>
+								<Input label="Email" />
+								<Input label="Mot de passe" secureTextEntry={true} />
+							</Box>
+						</View>
+					</KeyboardAvoidingView>
+					<Box mt={"xl"}>
+						<Button
+							variant={"full"}
+							textVariants={"primary"}
+							label="Se connecter"
+							onPress={() => {}}
+						/>
+						<Button
+							variant={"lightGray"}
+							textVariants={"black"}
+							label="Creer un compte"
+							onPress={() => {}}
+						/>
+					</Box>
+				</Box>
+			</SafeAreaView>
 		</BackgroundGreenWhiteContentArea>
 	);
 };