From 87e404c97330e4e577b22be0bd1a8ed662329fdb Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Mon, 27 May 2024 16:21:58 +0000
Subject: [PATCH] basic component for the error modal

---
 src/components/icons/ErrorIcons.tsx  | 16 ++++++++++++++++
 src/components/modals/ErrorModal.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 src/themes/Theme.tsx                 |  6 ++++++
 3 files changed, 60 insertions(+)
 create mode 100644 src/components/icons/ErrorIcons.tsx
 create mode 100644 src/components/modals/ErrorModal.tsx

diff --git a/src/components/icons/ErrorIcons.tsx b/src/components/icons/ErrorIcons.tsx
new file mode 100644
index 0000000..c3dc64e
--- /dev/null
+++ b/src/components/icons/ErrorIcons.tsx
@@ -0,0 +1,16 @@
+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;
diff --git a/src/components/modals/ErrorModal.tsx b/src/components/modals/ErrorModal.tsx
new file mode 100644
index 0000000..f68483a
--- /dev/null
+++ b/src/components/modals/ErrorModal.tsx
@@ -0,0 +1,38 @@
+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;
diff --git a/src/themes/Theme.tsx b/src/themes/Theme.tsx
index 22d82e7..d58ccfd 100644
--- a/src/themes/Theme.tsx
+++ b/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",
--
libgit2 0.27.1