basic component for the error modal

src/components/icons/ErrorIcons.tsx

+import Box from "@components/bases/Box";
+import { images } from "@styles/Commons";
+import { Image } from "react-native";
+
+const ErrorIcon = () => {
+	return (
+		<Box width={50} height={50}>
+			<Image
+				source={require("../../../assets/icon_close_failure.png")}
+				style={images.contain}
+			/>
+		</Box>
+	);
+};
+
+export default ErrorIcon;

src/components/modals/ErrorModal.tsx

+import Button from "@components/Button";
+import Box from "@components/bases/Box";
+import ErrorIcon from "@components/icons/ErrorIcons";
+import { Text } from "react-native";
+
+const ErrorModal = () => {
+	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}
+		>
+			<ErrorIcon />
+			<Text>Une erreur s'est produite</Text>
+			<Box style={{ width: "80%" }}>
+				<Button
+					variant={"fullError"}
+					textVariants={"white"}
+					label="Fermer"
+					onPress={() => {}}
+				/>
+			</Box>
+		</Box>
+	);
+};
+
+export default ErrorModal;

src/themes/Theme.tsx

@@ -17,6 +17,7 @@ const palette = {
 	yellow: "#F4C44A",
 
 	red: "#FF0000",
+	softRed: "#C51605",
 };
 
 const theme = createTheme({
@@ -30,6 +31,7 @@ const theme = createTheme({
 		gray: palette.gray,
 		yellow: palette.yellow,
 		red: palette.red,
+		softRed: palette.softRed,
 	},
 	spacing: {
 		s: 8,
@@ -121,6 +123,10 @@ const theme = createTheme({
 			backgroundColor: "secondary",
 			color: "white",
 		},
+		fullError: {
+			backgroundColor: "softRed",
+			color: "white",
+		},
 		clean: {
 			backgroundColor: "primary",
 			color: "secondary",