update the modal filter to take advantage of the card custom made. And instead…

src/screens/TransactionHistoryScreen.tsx

+import { useModalsManagerContext } from "@/contexts/ModalsManagerContext";
+import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
 import Button from "@components/Button";
 import Input from "@components/Input";
 import TransactionInformationsItem from "@components/TransactionInformationsItem";
-import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
+import WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight";
 import useTransactionsHistory, { type OperatorsFilter } from "@hooks/useTransactionsHistory";
 import { LOG } from "@logger";
+import Card from "@re-card";
 import theme from "@themes/Theme";
 import { useCallback, useState } from "react";
 import { RefreshControl, ScrollView, Switch } from "react-native";
@@ -28,9 +31,13 @@ const TransactionHistoryScreen = () => {
 		setOperatorsFilter,
 	} = useTransactionsHistory();
 
+	const { showModal } = useModalsManagerContext();
+
 	return (
-		<BackgroundWithBeasyIconAndWhiteContentArea>
-			<>
+		<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
+			<BarWithBeasyAndNotificationsIcon />
+
+			<Card variant={"curvedTopContainer"} padding={"s"} height={"100%"} mt={"m"}>
 				{showFiltersModal && (
 					<FiltersModal
 						setShowFiltersModal={setShowFiltersModal}
@@ -39,7 +46,7 @@ const TransactionHistoryScreen = () => {
 					/>
 				)}
 				{/* <FiltersModal setShowFiltersModal={setShowFiltersModal} /> */}
-				<Box px={"m"} mt={"m"} flexDirection={"row"} gap={"s"} alignItems={"center"}>
+				<Box px={"m"} flexDirection={"row"} gap={"s"} alignItems={"center"}>
 					<Box flex={1}>
 						<Input placeholder="Reference" onChangeText={setReferenceFilter} />
 					</Box>
@@ -56,15 +63,25 @@ const TransactionHistoryScreen = () => {
 							name="filter"
 							size={30}
 							color="black"
-							onPress={() => setShowFiltersModal(true)}
+							// onPress={() => setShowFiltersModal(true)}
+							onPress={() =>
+								showModal(
+									<FiltersModal
+										setShowFiltersModal={setShowFiltersModal}
+										setOperatorsFilter={setOperatorsFilter}
+										operatorsFilter={operatorsFilter}
+									/>,
+								)
+							}
 						/>
 					</Box>
 				</Box>
 				<ScrollView
+					// style={{ backgroundColor: "red" }}
 					refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
 					contentContainerStyle={{
 						gap: 10,
-						padding: 10,
+						padding: 5,
 						// marginTop: 10,
 						paddingBottom: 30,
 						flexDirection: "column",
@@ -82,8 +99,8 @@ const TransactionHistoryScreen = () => {
 						/>
 					))}
 				</ScrollView>
-			</>
-		</BackgroundWithBeasyIconAndWhiteContentArea>
+			</Card>
+		</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
 	);
 };
 
@@ -122,34 +139,25 @@ const FiltersModal: React.FC<FiltersModalProps> = ({
 		});
 	}, [filterOm, filterMtn, filterFlooz, filterWave, filterCb, setOperatorsFilter]);
 
+	const { closeModal } = useModalsManagerContext();
+
 	const saveFilters = useCallback(() => {
 		saveOperatorsFilters();
 		setShowFiltersModal(false);
-	}, [saveOperatorsFilters, setShowFiltersModal]);
+		closeModal();
+	}, [saveOperatorsFilters, setShowFiltersModal, closeModal]);
 
 	return (
-		<>
-			{/* Overlay */}
-			<Box
-				width={"100%"}
-				height={"100%"}
-				backgroundColor={"black"}
-				opacity={0.5}
-				position={"absolute"}
-				zIndex={10}
-				// p={"m"}
-			/>
-
-			{/* Content */}
-
-			<Box width={"100%"} height={"100%"} position={"absolute"} zIndex={11} p={"m"}>
+		<Card variant={"absoluteForegroundScreenSizedTransparentCard"}>
 			<Box
 				backgroundColor={"white"}
-					width={"100%"}
-					height={"100%"}
+				width={"90%"}
+				// height={"70%"}
+				maxHeight={"80%"}
 				borderRadius={10}
 				p={"m"}
 				flexDirection={"column"}
+				style={{ margin: "auto" }}
 			>
 				<Box
 					justifyContent={"space-between"}
@@ -164,7 +172,10 @@ const FiltersModal: React.FC<FiltersModalProps> = ({
 						name="close-outline"
 						size={30}
 						color="black"
-							onPress={() => setShowFiltersModal(false)}
+						onPress={() => {
+							closeModal();
+							setShowFiltersModal(false);
+						}}
 					/>
 				</Box>
 
@@ -253,7 +264,7 @@ const FiltersModal: React.FC<FiltersModalProps> = ({
 						/>
 					</Box>
 				</Box>
-					<Box style={{ marginTop: "auto" }}>
+				<Box style={{ marginTop: 20 }}>
 					<Button
 						variant={"full"}
 						label={"Valider"}
@@ -262,7 +273,6 @@ const FiltersModal: React.FC<FiltersModalProps> = ({
 					/>
 				</Box>
 			</Box>
-			</Box>
-		</>
+		</Card>
 	);
 };