using a modal card

src/components/modals/ErrorModal.tsx

 import { useModalsManagerContext } from "@/contexts/ModalsManagerContext";
 import Button from "@components/Button";
+import Card from "@components/Card";
 import Box from "@components/bases/Box";
+// import { Text } from "react-native"
+import Text from "@components/bases/Text";
 import ErrorIcon from "@components/icons/ErrorIcon";
-import { Text } from "react-native";
 
 interface Props {
 	message?: string;
@@ -12,25 +14,28 @@ interface Props {
 const ErrorModal = ({ message = "Une erreur s'est produite" }: Props) => {
 	const { closeModal } = useModalsManagerContext();
 	return (
-		<Box
-			width={300}
-			height={200}
-			backgroundColor={"white"}
-			alignItems={"center"}
-			justifyContent={"center"}
-			alignSelf={"center"}
-			marginTop={"x240"}
-			position={"absolute"}
-			zIndex={10}
-			borderRadius={20}
-			gap={"m"}
-			shadowColor={"black"}
-			shadowOffset={{ width: 0, height: 0 }}
-			shadowOpacity={0.5}
-			p={"s"}
-		>
+		// <Box
+		// 	width={300}
+		// 	height={200}
+		// 	backgroundColor={"white"}
+		// 	alignItems={"center"}
+		// 	justifyContent={"center"}
+		// 	alignSelf={"center"}
+		// 	marginTop={"x240"}
+		// 	position={"absolute"}
+		// 	zIndex={10}
+		// 	borderRadius={20}
+		// 	gap={"m"}
+		// 	shadowColor={"black"}
+		// 	shadowOffset={{ width: 0, height: 0 }}
+		// 	shadowOpacity={0.5}
+		// 	p={"s"}
+		// >
+		<Card variant={"modal"}>
 			<ErrorIcon />
-			<Text>{message}</Text>
+			<Text variant={"gray"} fontWeight={"bold"}>
+				{message}
+			</Text>
 			<Box style={{ width: "80%" }}>
 				<Button
 					variant={"fullError"}
@@ -39,7 +44,8 @@ const ErrorModal = ({ message = "Une erreur s'est produite" }: Props) => {
 					onPress={closeModal}
 				/>
 			</Box>
-		</Box>
+		</Card>
+		// </Box>
 	);
 };