From cae5d1c95afeb17f84df5ab21ba4d7af40a2b69b Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@webionite.com>
Date: Mon, 21 Dec 2020 16:49:33 +0530
Subject: [PATCH] Move page structure of warning into GenericPageWithIcon

---
 src/plugins/GenericPageWithIcon.js | 32 ++++++++++++++++++++++++++++++
 src/plugins/warning.js             | 22 ++++++--------------
 2 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 src/plugins/GenericPageWithIcon.js

diff --git a/src/plugins/GenericPageWithIcon.js b/src/plugins/GenericPageWithIcon.js
new file mode 100644
index 0000000..b24a221
--- /dev/null
+++ b/src/plugins/GenericPageWithIcon.js
@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Box, Button, Heading, Text } from "grommet";
+
+function GenericPageWithIcon(props) {
+	return (
+		<Box
+			align="center"
+			background="light-1"
+			width="100vw"
+			justify="center"
+			direction="column"
+			alignContent="center"
+			height="100vh"
+		>
+			{props.icon}
+			<Heading>{props.title}</Heading>
+			<Text>{props.description}</Text>
+			<Button primary size="large" onClick={props.close}
+				label="Dismiss" margin="1.5em" />
+		</Box>
+	);
+}
+
+GenericPageWithIcon.propTypes = {
+	title: PropTypes.string,
+	description: PropTypes.string,
+	icon: PropTypes.node,
+	close: PropTypes.func
+};
+
+export default GenericPageWithIcon;
diff --git a/src/plugins/warning.js b/src/plugins/warning.js
index c292a67..84014cf 100644
--- a/src/plugins/warning.js
+++ b/src/plugins/warning.js
@@ -1,25 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Box, Button, Heading, Text } from "grommet";
+import GenericPageWithIcon from "./GenericPageWithIcon";
 import { Alert } from "grommet-icons";
 
 function Warning(props) {
 	return (
-		<Box
-			align="center"
-			background="light-1"
-			width="100vw"
-			justify="center"
-			direction="column"
-			alignContent="center"
-			height="100vh"
-		>
-			<Alert color="#D0C100" size="xlarge" />
-			<Heading>{props.data.title}</Heading>
-			<Text>{props.data.description}</Text>
-			<Button primary size="large" onClick={props.close} label="Dismiss" margin="1em"/>
-		</Box>
-	);
+		<GenericPageWithIcon
+			title={props.data.title}
+			description={props.data.description}
+			icon={<Alert color="#D0C100" size="xlarge" />}
+		/>);
 }
 
 Warning.propTypes = {