Move page structure of warning into GenericPageWithIcon

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;

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
+		<GenericPageWithIcon
-			align="center"
+			title={props.data.title}
-			background="light-1"
+			description={props.data.description}
-			width="100vw"
+			icon={<Alert color="#D0C100" size="xlarge" />}
-			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>
-	);
 }
 
 Warning.propTypes = {